特点：
1.轻量型，不依赖于任何其他库
2.双向数据绑定，简单方便
3.内置的简单指令（V-*），也可以自定义指令
4.插件化：其核心不包含router,ajax,表单验证等功能
5.内置过滤器和自定义过滤器
6.不支持低端浏览器（IE6/7/8）
数据绑定：
1.文本插值
使用双大括号 {{ }} ,其会把里面的值当做字符串来处理
<span>text:{{text}}</span>如果是HTML片段，则可以使用三个大括号
<span>Logo:{{{logo}}}</span>
logo:'<span>abcd</span>'双大括号还可以放在HTML标签内
<span data-id='{{id}}'></span>2.表达式
表达式是各种数值、变量、运算符的综合体
<---js表达式--->
{{ count / 100 }} //在原值的基础上除以100
{{ true ? 1 : 0 }} //值为真则渲染1，否则为0
{{ explemt.split(',') }}
{{ explemt | toUpperCase}} //vue允许过滤器，toUpperCase就是过滤器
{{ explemt | filterA | filterB}} //允许过滤器串联
{{ explemt | filter a b}} //过滤器允许传参，这里a b 均为参数3.指令
指令是带有v-前缀的特殊特性，其值限定为绑定表达式。指令的作用是当表达式的值发生变化时，这个变化也将反映到DOM上。
<div v-if='show'>DESW</div> //当show为true时显示 DESW 字样，否则则不显示内部指令
1.1 v-if 根据表达式的值在dom中生成或移除一个元素
<body>
<div id='example'>
<p v-if='greeting'>Hello</p>
</div>
</body>
<script>
var exampleVME = new Vue({
el：'#example',
data:{
greeting ：true
}
})
</script>1.2 v-show 根据表达式的值来显示或隐藏HTML元素，简单的基于CSS的切换
p标签的Hello是根据 greeting 的值来显示的
1.3 v-else 必须跟着v-if或者 v-show 使用
利用v-show 代替 v-else，在判断条件加个非运算符 !
1.4 v-model 主要用在input 、select 、text 、checkbox、radio等表单控件元素上的双向数据绑定
<body>
<div id='example'>
<form action="">
<p>姓名：
<input type="text" v-model='data.name'>
</p>
<p>性别：
<input type="radio" id='man' v-model='data.sex' value="one">男
<input type="radio" id='woman' v-model='data.sex' value="two">女
</p>
<p>兴趣：
<input type="checkbox" v-model='data.interest' value="book">图书
<input type="checkbox" v-model='data.interest' value="swim">游泳
<input type="checkbox" v-model='data.interest' value="game">游戏
<input type="checkbox" v-model='data.interest' value="pingpong">乒乓球
</p>
<p>身份：
<select v-model='data.identity'>
<option value="teacher" selected>教师</option>
<option value="lawyer">律师</option>
</select>
</p>
</form>
</div>
</body>
<script>
var exampleVME = new Vue({
el:'#example',
data:{
data:{
name:'王二麻子',
sex:'one',
interest:['swim'],
identity:'teacher'
}
}
})
</script>
1.5 v-for 对数组或对象进行渲染
v-for 还支持一个可选的第二个参数为当前项的索引。
也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：
<div id="list">
<ul>
<li v-for='(value,key) in list'>{{key}}:{{value}}</li>
</ul>
</div>
<script>
var exampleVME3 = new Vue({
el:'#list',
data:{
list:{
'姓名':'mary',
'性别':'男',
'年龄':'14'
}
}
})
</script>
变异方法
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
1.6 v-bind 操作元素的 class 列表和内联样式
我们可以传给 v-bind:class 一个对象，以动态地切换 class,
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
<script>
var exampleVME3 = new Vue({
el:'#list',
data: {
isActive: true,
hasError: false
}
})
</script>结果为：
<div class="static active"></div>也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
<div id='examleBox'>
<div v-bind:class="classObject"></div>
</div>
<script>
var exampleVME3 = new Vue({
el:'#examleBox',
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
})
</script>结果为：
<div class="active"></div>
也可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}结果为：
<div class="active text-danger"></div>也可以根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
再举个栗子：
<div id='exampleBox'>
a={{ a }}, b={{ b }}
</div>
<script>
var exampleVME4 = new Vue({
el:'#exampleBox',
data: {
a: 1
},
computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
}
}
})
</script>1.7 v-on 绑定事件监听器
使用在普通元素上，只能监听原生dom事件，使用在自定义组件上，也可以监听子组件触发的自定义事件。
<div id="example-1">
<button v-on:click="counter += 1">Add {{counter}}</button>
<p>点击一下加 {{ counter }} 次</p>
<input type="text" v-model='counter'>
</div>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
</script>v-on 还可以接收一个需要调用的方法名称。
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<script>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
// example2.greet() // => 'Hello Vue.js!'
</script>内联处理器的方法，传递参数：
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
<script>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message) //hi 和 what 作为参数传递给了say函数
}
}
})
</script>有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
<div id="example-2">
<button v-on:click="warn('这是一个按钮地啊你.', $event)">Submit</button>
</div>
<script>
var example2 = new Vue({
el: '#example-2',
// 在 `methods` 对象中定义方法
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}
})
</script>事件修饰符：修饰符是由点开头的指令后缀来表示的。
- stop
- prevent
- capture
- self
- once
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击。
vue 2.1.4 新增:
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>vue计算属性 ，setter 和 getter
当输入框的值发生改变时，计算属性会依次计算得出相应结果渲染到elment上面
<div id="app1">
<!-- 桌腿数量用type= range 选择器，绑定变量legsCount-->
<label>
桌腿数量: <input type="range" v-model="legsCount">
</label>
<!-- 桌子数量 绑定变量tableCount，并且输入数量时触发update -->
<label>
桌子数量： <input type="text" @input = "update" :value="tableCount">
</label>
<!-- 统计结果 -->
<output>
我们将要做 {{legsCount}}桌腿，组成 {{tableCount}} 桌子
</output>
</div>
<script>
var ABC = new Vue({
el: '#app1',
data () {
return {
legsCount: 0
}
},
computed: {
tableCount: {
get () {
return this.legsCount / 4;
},
set (newValue) {
this.legsCount = newValue * 4;
}
}
},
methods: {
update (e) {
this.tableCount = e.target.value
}
}
})
</script>
