快速构建vue"/>
vue起步：用html+js快速构建vue
早先学vue的时候在知乎写的学习笔记，今天想起来了给搬到博客上。知乎链接
这几天刚接触vue.js，由于没有接触过es6和webpack，打算直接用html+js构建vue项目，发现虽然官方文档是html+js写的，但是不够详细，网上的例子又都是vue-cli构建的，于是简单总结分享一下这两天的成果，希望能给同样初学的小伙伴们一点帮助。
demo案例
对于官方文档上的内容我就不过多重复了，希望大家能先看一下组件以前的部分。在这里我就简单的进行一下总结，先上一个小例子（这个例子都看不懂的话还是先把官方文档仔细看一看吧）：
<body>
<div id="app"><input v-model="message"/><p>{{ message }}</p><button v-on:click="show">点我</button>
</div><script>new Vue({el: '#app',data: {message: 'Hello world'},methods:{show:function(){alert("run...")}}})
</script>运行结果：
从上面例子可以看到vue的基本使用：数据绑定，有了一个初步认识之后，让我们来看看vue的基本语法
一、vue实例
创建根实例，所有的内容都应该包含在根实例中
new Vue({el: '#app',data: {//数据放这里message: 'Hello world'},methods:{//方法放这里show:function(){alert("run...")}}})二、模板语法
这部分请直接去官方文档学习，我只简单提一下如何区别快速记忆一些常用的
文本：文本绑定数据的方式
<p>{{ message }}</p>属性：html属性绑定数据的方式
<div v-bind:class="{'red': true}">
<div :href="url">//简写格式指令：html没有的属性即是vue的指令，以v-xxx的格式:如v-for、v-if···
数据绑定：前面的可以算是单向的数据绑定，而双向数据绑定需要用到v-model指令
<input v-model="message"/>事件：
<!-- 完整语法 -->
<a v-on:click="show"></a>
<!-- 缩写 -->
<a @click="show"></a>三、组件
vue的核心内容便是组件，页面的每一块都可以是一个组件，这一部分需要着重理解
1.先来个小例子熟悉一下组件的基本用法
<body><div id="app"><p>父组件说：{{message}}</p><!--使用组件--><my-component></my-component></div>
<!--定义模板-->
<template id="childComp"><p>子组件说：{{message}}</p>
</template>
<script>var child= {template: '#childComp',//必须绑定一个模板data:function(){return {message:"我是子组件"}}}new Vue({el: '#app',components: {'my-component': child},data:{message:"我是父组件"}})
</script>
</body>打印结果：
代码分析：
组件必须绑定一个模板，而模板必须为template标签。其他的用法和vue实例很相似，因为vue实例本身也可以算是一个组件。需要注意的是，在使用组件时，data必须是一个函数，该函数返回data数据，如下：
data:function(){return {message:"我是子组件"}
}在这里，大家发现我在父组件和子组件中都定义了message，但是显示的是不同的结果。因为在vue.js中组件的作用域是独立的，即使是父子组件也不能继承作用域。而要传递数据就必须借助prop和事件传参，prop往下传，事件往上传。
2.子组件通过prop获取父组件参数
<body><div id="app"><p>父组件说：{{message}}</p><!--使用组件，传递参数**************--><my-component :message="fu"></my-component></div>
<!--定义模板-->
<template id="childComp"><p>子组件说：{{message}}</p>
</template>
<script>var child= {//声明参数*********************props:["fu","message"],template: '#childComp',data:function(){return {message:"我是子组件",zi:"子组件内容"}}}new Vue({el: '#app',components: {'my-component': child},data:{message:"我是父组件",fu:"父组件内容"}})
</script>
</body>打印结果：
可以看到，父组件的fu传递到了子组件，并赋值给了message
3.子组件通过事件向父组件传递参数
接下来让我们再试试从父组件向子组件传递参数
<body><div id="app"><p>父组件说：{{message}}</p><!--自定义increment事件用以传递参数**************--><my-component :message="fu" @increment="get"></my-component></div>
<!--定义模板-->
<template id="childComp"><div><p>子组件说：{{message}}</p><button @click="send">传参</button></div>
</template>
<script>var child= {props:["fu","message"],template: '#childComp',data:function(){return {message:"我是子组件",zi:"子组件内容"}},methods:{send:function(){//触发increment事件，并传递参数**************this.$emit("increment",{mes:this.zi});}}}new Vue({el: '#app',components: {'my-component': child},data:{message:"我是父组件",fu:"父组件内容"},methods:{//在事件处理函数中接收参数并赋值给message*************get:function(opt){this.message = opt.mes;}}})
</script>打印结果：
四、路由
了解组件之后，就可以使用路由来制作一个简单的单页应用了。我们要做的是配置组件和路由映射，并指定组件渲染的位置
<body><div id="app"><!-- router-link会被渲染成a标签--><!-- 如果想传递变量，使用:to="url"--><router-link to="/child1">子组件1</router-link><router-link to="/child2">子组件2</router-link><!--路由匹配到的组件将渲染在这里--><router-view></router-view></div>
<!--定义模板-->
<template id="childComp"><div><p>子组件说：{{message}}</p></div>
</template>
<script>var child1= {template: '#childComp',data:function(){return {message:"我是子组件1"}}}var child2= {template: '#childComp',data:function(){return {message:"我是子组件2"}}}//定义路由var routes = [//每个路由对应一个组件{path:'/child1',component:child1},{path:'/child2',component:child2}]var router = new VueRouter({routes:routes})new Vue({el:"#app",router:router});
</script>
</body>打印结果：
更多推荐
vue起步：用html+js快速构建vue
发布评论