一、什么是vue.js?
官网的定义是：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、vue.js的基本语法。
注意：编写vue.js代码之前应该先添加vue.js库。
1. Vue对象里的属性有那些？
<body>
<div id="start"></div>
<script>
new Vue({
el:"#start", //相当于vue.js作用的开始
data:{
a:"hello", //a,b,c相当于定义的变量，用来存储数据
b:[
{"name":"张三","sex":"女"},
{"name":"李四","sex":"男"}
],
c:"Tom"
},
method:{
//里面存储各种方法
add:function(){
return this.a+this.c
}
},
computed:{
//这是计算属性
}
})
</script>
</body>2. 那么vue()中的数据怎么在页面显示呢？是通过一些指令来实现的。
（1）v-bind :这是对标签属性的绑定操作。
<body>
<div id="start">
<a v-bind:href="a">百度</a>
a:"http://www.baidu.com"
},
})
</script>
</body><a :href="a>百度</a> //这是v-bind的缩写（2）v-model :给input使用，数据绑定模块。
<body>
<div id="start">
<input v-model="msg">
<p>{{msg}}</p>
</div>
<script>
new Vue({
el:"#start", //相当于vue.js作用的开始
data:{
msg:"hello"
},
})
</script>
</body>结果如下：
如果我们修改文本框的内容，那么文本框下面的内容也会改变，所以我们可以知道数据的绑定是双向的。
（3）v-if：条件循环指令。
<body>
<div id="start">
<p v-if="msg">hello</p>
</div>
<script>
new Vue({
el:"#start", //相当于vue.js作用的开始
data:{
msg:true
},
})
</script>
</body>如果msg的值为true则显示文本内容hello，如果为false，则文本不现实。
（4）v-for:循环指令。
<body>
<div id="start">
<p v-for="da in student">
<span>{{da.name}}</span> <span>{{da.sex}}</span>
</p>
</div>
<script>
new Vue({
el:"#start", //相当于vue.js作用的开始
data:{
student:[
{"name":"Tom","sex":"男"},
{"name":"Jeery","sex":"女"},
{"name":"Bob","sex":"男"}
]
},
})
</script>
</body>为了看到效果我们可以看浏览器便宜的结果：
（5）v-on：用于监听DOM事件。
<body>
<div id="start">
<input type="text" id="in">
<input type="button" value="查询" v-on:click="time()">
</div>
<script>
new Vue({
el:"#start", //相当于vue.js作用的开始
data:{
time:function(){
var date=new Date();
$("#in").val(date)
}
},
})
</script>
</body>点击页面上的查询an'n结果显示为：
（6）v-html：添加html元素。
<body>
<div id="start" v-html="list"></div>
<script>
new Vue({
el:"#start", //相当于vue.js作用的开始
data:{
list:"<p>v-html指令添加元素</p>"
},
})
</script>
</body>查看浏览器编译结果：
（7）v-text：向页面添加文本信息。
<body>
<div id="start" v-text="list"></div>
<script>
new Vue({
el:"#start", //相当于vue.js作用的开始
data:{
list:"<p>v-html指令添加元素</p>"
},
})
</script>
</body>页面显示结果为：
（8）v-once：执行一次性插值。
注意：当数据改变时，数据不会继续更新。
<body>
<div id="start">
<input type="text" v-model="msg">
<p v-once>{{msg}}</p>
</div>
<script>
new Vue({
el:"#start", //相当于vue.js作用的开始
data:{
msg:"hello"
},
})
</script>
</body>结果显示，如果我们修改文本框的值，并不会改变文本框下面的值，当去掉v-once，则文本框下面的值会随之改变。
