1、插值
1 A：<span>TEXT:{{text}}</span>
2 {{text}}会被相应的数据类型text属性值替换，当text值改变时候，文本中的值也会相应的发生变化
3
4 B：有时候只需要渲染一次数据，后续的数据变化不再关心，可以通过“*”实现
5 <span>TEXT:{{*text}}</span>
6
7 C：双大括号标签会将里面的值作为字符串来处理，如果值是HTML代码，可以使用过3个大括号表示
2、表达式
表达式：
1 <!-- 合法表达式 -->
2 A：js表达式 {{cents/100}}
3 B：三元表达式 {{true ? 1 : 0}}
4 C：{{example.split(",")}}
5
6 <!-- 无效实例 -->
7 A：{{var logo = ‘DDFE‘}}
8 B: {{if(true) return ‘DDFE‘}} 条件控制语句是不支持的，可以使用三元表达式
表达式后面添加过滤符：
A: {{examole | toUpperCase}} 这里的toUpperCase就是过滤器
B: 允许过滤器串联 {{example | filter1 | filter2}}
C: 过滤器支持传入参数，{{example | filter a b}}，这里的a和b均为参数，用空格隔开
3、指令
1 A：指令是带有v-前缀的特殊特性，值限定为绑定表达式，也就是js表达式以及过滤器 2 3 B：指令的作用是当表达式的值发生变化的时候，将这个变化也反应到DOM上， 4 eg：<div v-if="show">DDFE</div> 当show为true的时候，展示DDFE字样，否则不展示 5 6 C：有一些指令的语法有些不一样，在指令与表达式之间插入一个参数，用冒号分隔，如v-bind指令 7 eg:<a v-bind:href="url"></a> 8 <div v-bind:click="action"></div>
内部指令：
v-if：根据表达式的值在DOM中生成或移除一个元素
1 <div id="example">
2 <p v-if="greeting">hello</p>
3 </div>
4
5 <script>
6 var exampleVM2 = new Vue({
7 el : ‘#example‘,
8 data : {
9 greeting : false
10 }
11 })
12 </script>
13
14 结果：
15 <div id="example"></div>
16
17 <!-- 因为v-if指令是一个指令，需要添加到一个元素 -->
18 <!-- 如果想切换多个元素，可以使用template元素包装元素 -->
19 <template v-if="ok">
20 <p>Title</p>
21 <p>ssss</p>
22 <p>aaaa</p>
23 </template>
24
25 结果：
26 <div id="example">
27 <p>Title</p>
28 <p>ssss</p>
29 <p>aaaa</p>
30 </div>
v-show：根据表达式的值来显示或者隐藏HTML元素，也就说说要是为false，元素上面就会多一个内联样式style="display:none",v-show不支持<template>语法
v-else：必须跟着v-show或v-if，充当else的功能，最好不要和v-show一块使用，可以用另一个v-show替代
v-model：在表单控件元素上创建双向数据绑定
1 <body id="example">
2 <form>
3 <input type="text" v-model="data.name" placeholder="">
4
5 <input type="radio" id="one" name="" value="One" v-model="data.sex">
6 <input type="radio" id="two" name="" value="Two" v-model="data.sex">
7
8 <input type="checkbox" name="" value="book" id="book" v-model="data.interest">
9 <input type="checkbox" name="" value="swim" id="swim" v-model="data.interest">
10 <input type="checkbox" name="" value="game" id="game" v-model="data.interest">
11
12 <select v-model="data.indentity">
13 <option value="teacher" selected>教师</option>
14 <option value="doctor">医生</option>
15 </select>
16 </form>
17 </body>
18 <script>
19 new Vue({
20 el : ‘#example‘,
21 data : {
22 data : {
23 name : "",
24 sex : "",
25 interest : [],
26 indentity : ‘‘
27 }
28 }
29 })
30 </script>
-----------
除了以上用法，该指令后面还可以添加多个参数（number，lazy，debounce）：
number：将用户的输入自动转化为Number类型，如果原值的转化结果为NaN,则返回原值
-----------
lazy：在默认情况下，v-model在input事件中同步输入框的值与数据，添加lazy属性，将数据改到在change事件中发生
1 <input type="" name="" v-model="msg" lazy>
-----------
debounce：设置一个延时，在每次敲击之后延时同步输入框的值与数据
<input type="text" v-model="msg" debounce="5000"> <-- 5s之后才会改变 -->
v-repeat：基于源数据重复渲染元素，数组中的每一个对象，都会创建一个Vue对象，在重复元素中，可以访问重复实例以及父实例的属性，使用$index呈现对应的数组索引
1 <body id="example">
2 <ul id="demo">
3 <li v-repeat="items" class="item-{{$index}}">
4 {{$index}} - {{parentMsg}} {{childMsg}}
5 </li>
6 </ul>
7 </body>
8 <script>
9 var demo = new Vue({
10 el : ‘#demo‘,
11 data : {
12 parentMsg : ‘滴滴‘,
13 items : [
14 {childMsg : ‘顺风车‘},
15 {childMsg : ‘专车‘}
16 ]
17 }
18 })
19 </script>
有时候，我们更希望显式的访问变量，而不是隐式的回退到父元素，这时可以通过使用别名的方式进行实现：
v-repeat = ‘item in items’ （vue.js 0.12.8 及以后版本支持in分隔符）
-----------
要是要重复一个包含多个DOM元素的块，可以使用<template>
-----------
对于含有原始值的数组，可以简单的通过使用$value来获取值
1 <body id="example">
2 <ul id="tags">
3 <li v-repeat="tags">
4 {{$value}}
5 </li>
6 </ul>
7 </body>
8 <script>
9 var demo = new Vue({
10 el : ‘#tags‘,
11 data : {
12 tags : [‘js‘,‘mvvm‘,‘value‘]
13 }
14 })
15 </script>
16
17 //输出
18 js
19 mvvm
20 value
-----------
数组数据发生变动的时候，vue的监测方法，能触发视图更新：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
$set ----- demo.items.$set(0,{childMsg : ‘Changed!‘})
$remove --- demo.item.$remove(0)
filter ： 返回新数组
concat ： 返回新数组
slice ： 返回新数组
demo.items = demo.items.filter(function(item){
return item.childMsg.match(/hello/);
})
-----------
在vue中不能检测到下面数组的变化：
A: 直接用索引设置元素,eg:vm.items[0] = {}
解决方案：可以直接用$set方法
B: 修改数据的长度 ,eg:vm.items.length=0
解决方案：用一个空数组替换items
-----------
也可以使用v-repeat遍历一个对象，每一个重复的实例都有一个特殊的属性$key,对于原始值，可以使用$value获取
3种方法：$add(key,value),$set(key,value),delete(key,value)
<body id="example">
<ul id="repeat-object">
<li v-repeat="primitiveVlaue">{{$key}} : {{$value}}</li>
<li>======</li>
<li v-repeat="objectVlaue">{{$key}} : {{msg}}</li>
</ul>
</body>
<script>
var demo = new Vue({
el : ‘#repeat-object‘,
data : {
primitiveVlaue : {
a : ‘a‘,
b : ‘b‘,
c : ‘c‘
},
objectVlaue : {
one : {
msg : ‘hello‘
},
two : {
msg : ‘didi‘
}
}
}
})
</script>
<!-- 输出 -->
a : a
b : b
c : c
=======
one : hello
two : didi
-----------
v-repeat支持整数，就是重复的次数
<div id="range">
<div v-repeat="val">hi! {{$index}}</div>
</div>
<!-- 输出 -->
hi! 0
hi! 1
hi! 2
<span v-repeat="n in 6">{{n}}</span>
<!-- 输出 -->
0 1 2 3 4 5
-----------
filterBy：
<input type="" name="" v-model="searchText">
<ul>
<li v-repeat="user in users | fiterBy searchText in ‘name">{{user.name}}</li>
</ul>
users[
{
name : ‘快1‘,
tag : ‘1‘
}
{
name : ‘快2‘,
tag : ‘2‘
}
{
name : ‘快3‘,
tag : ‘3‘
}
]
orderBy：
<body id="example">
<ul>
<li v-repeat="user in users | orderBy field reverse">{{user.name}}</li>
</ul>
</body>
<script type="text/javascript">
var demo = new Vue({
el : ‘#example‘,
data : {
filed : ‘tag‘,
reverse : false,
users : [
{
name:‘快1‘,
tag : 1
},
{
name:‘快5‘,
tag : 5
},
{
name:‘快3‘,
tag : 3
}
]
}
})
</script>
<!-- 输出 -->
快1
快3
快5
v-for:基于源数据重复渲染元素，使用$index呈现相应的数据索引
v-for=‘item in items‘ 或者 在1.0.17版本之后支持 v-for=‘item of items‘
<body id="example">
<ul id="demo">
<li v-for=‘item in items‘ class="item-{{$index}}">
{{$index}} - {{parentMessage}} {{item.msg}}
</li>
</ul>
</body>
<script>
var demo = new Vue({
el : ‘#demo‘,
data : {
items : [
{msg : ‘didi‘},
{msg : ‘ddddd‘}
]
}
})
</script>
v-text：更新元素的textContent
<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>
v-html：更新元素的innerHTML。如果想要复用模板，则应当使用partials
<span v-html="html"></span>
<!-- same as -->
<span>{{html}}</span>
v-bind：用于响应更新HTML特性，将一个或多个attribute或者一个组件prop动态绑定到表达式
<!-- 绑定attribute -->
<img v-bind:src="imageSrc" alt="">
<!-- 缩写 -->
<img :src="imageSrc">
在绑定class或者style的时候，支持其他类型的值，如数组或对象
<body id="example">
<div :class="[classA,{classB:isB,classC:isC}]"></div>
</body>
<script type="text/javascript">
var demo = new Vue({
el : ‘#example‘,
data : {
dataA : ‘A‘,
isB : false,
isC : true
}
})
</script>
-----------
当没有参数的时候，可以绑定到一个对象，但是此时的class以及style绑定不支持数组和对象
<body id="example">
<div v-bind="{id:someProp,‘OTHERAttr‘:otherProp}"></div>
</body>
<script type="text/javascript">
var demo = new Vue({
el : ‘#example‘,
data : {
someProp : ‘idName‘,
otherProp : ‘prop‘
}
})
</script>
v-on：绑定事件监听
在监听自定义事件时，内联语句可以访问一个$arguments属性，他是一个数组，包含了传给子组件的$emit回调的参数
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
在监听原生DOM事件时，如果只定义一个参数，DOM event为事件的唯一参数，如果在内联语句处理器中访问原生DOM事件，则可以用特殊变量$event把它传入方法
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat(‘hello‘,$event)"></button> <!-- 缩写 --> <button @click="doThis"></button>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
v-on后面不仅可以跟参数，还可以增加修饰符
.stop --- event.stopPropagation()
.prevent --- event.preventDefault()
.capture --- 添加事件侦听器时使用capture模式
.self --- 只当事件从侦听器绑定的元素本身触发时才会触发回调
.{keyCode | keyAlias} -- 只在指定按键上触发回调，键值包含【esc:27、tab：9、enter：13、spac：32、‘delete‘：[8,46]、up：38、left:37、right：39、down：40】
<!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 --> <button @click.prevent></button> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 --> <button @keyup.enter="onEnter"></button> <!-- 键修饰符，键代码 --> <button @keyup.13="onEnter"></button>
v-el:为DOM元素注册一个索引，方便通过所属实例的$els访问这个元素，可以用v-el:some-el设置this.$els.someEL
<span v-el:msg>hello</span> <span v-el:other-msg>world</span> 通过this.$els获取相应的DOM元素 this.$els.msg.textContent this.$els.otherMsg.textContent
v-pre:编译时跳过当前元素和它的子元素
v-cloak：保持在元素上直到关联实例结束编译