01
v-once
说明：
只渲染元素和组件
一次
。随后的重新渲染，元素
/
组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!-- 单个元素 --><span v-once>This will never change: {{msg}}</span><!-- 有子元素 --><div v-once><h1>comment</h1><p>{{msg}}</p></div><!-- 组件 --><my-component v-once :comment="msg"></my-component><!-- `v-for` 指令 --><ul><li v-for="i in list" v-once>{{i}}</li></ul>
02
v-text
说明：
v-text
指令用于更新标签包含的文本，它的作用跟双大括号的效果一样
<span v-text="msg"></span><!-- 和下面的一样 --><span>{{msg}}</span>
03
v-html
说明：
帮助我们绑定一些包含
html
代码的数据在视图上，比如：
“<b>hello,vue</b>”
，这个字符串包含了<b>
标签，要想
<b>
不被当作普通的字符串渲染出来，就得用
v-html
说明： <div v-html="html"></div>
04
v-show
说明：
v-show
指令的取值为
true/false
，分别对应着显示
/
隐藏它就是用来控制元素的
display css
属
性的
[display:none]
<div id="app"><p v-show="show1"> 我是 true</p><p v-show="show2"> 我是 false</p></div><script>let app = new Vue({el:"#app",data:{show1:true,show2:false }});</script>
渲染后
05
v-if
说明：
设置为
true
的标签，成功渲染出来，而设置为
false
的标签，直接被一行注释代替了，并没有
被解析渲染出来。
v-show
和
v-if
两者的区别
如果需要
频繁切换显示
/
隐藏
的，就用
v-show
；
如果运行后
不太可能切换显示
/
隐藏
的，就用
v-if
。
<p v-if="if_1"> 我是 true</p><p v-if="if_2"> 我是 true</p>let app = new Vue({el:"#app",data:{if_1:true,if_2:false}});
06
v-else
说明：
两个标签
:
第一个使用
v-if
指令，并取值为
false
，第二个使用
v-esle
指令
,
一旦第一个标签的
v-if
指令的值为
true
，被忽视的就是第二个
<p>
标签了。
v-if
和
v-else
只有一个会被渲染出来。
<div v-if="Math.random() > 0.5">Now you see me</div><div v-else>Now you don't</div>
07 v-else-if:
用法同
js
原生中的
if…elseif…elseif…else
<div id="app"><input type="text" v-model="type" /><p v-if="type === 'A'">A</p><p v-else-if="type === 'B'">B</p> <p v-else-if="type === 'C'">C</p><p v-else>Not A/B/C</p></div><script>var vm=new Vue({el:"#app",data:{type:""}})</script>
08
v-for
说明：
我们用
v-for
指令根据一组数组
/
对象的选项列表进行渲染。
v-for
指令需要使用
item in items
形
式的特殊语法，
items
是源数据数组并且
item
是数组元素迭代的别名。
08-1
基本用法
<ul><li v-for=" item in items ">{{item}}</li></ul>data: {items : [' 我 ', ' 是 ', ' 数 ', ' 组 ']}
08-2 v-for
应用于数组
<div v-for="(item,index) in list">{{index}}.{{item}}</div>data:{list:['Tom','John','Lisa']}
08-3 v-for
应用于对象
<div v-for="(item,index) in list">{{index}}.{{item}}</div>data:{list:['Tom','John','Lisa']}
Eg2:
let vm = new Vue({el:"#app",data:{list:[{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"c"},{id:4,name:"d"},{id:5,name:"e"},{id:6,name:"f"}],id:"",name:""},methods:{add(){this.list.push({id:this.id,name:this.name})}}})
09
v-bind
<!--
绑定一个属性
-->
<img v-bind:src="imgUrl" />
<!--
缩写
-->
<img :src="imgUrl" />
<!--
内联字符串拼接
-->
<img :src="'../images/' + fileName" />
<!-- class
绑定
-->
<div :class="{
'red'
: isRed}"></div>
布尔值绑定模式 对象方式
<span v-bind:class="{'class-a':
isA
,'class-b':
isB
}">VUE</span>
var vm = new Vue({
el: "#demo",
data: {
isA
: true,
isB
: true
}
})
<div :class="[classA, classB]"></div>
变量绑定模式：数组绑定
<span :class=[
classA
,classB]>VUE</span>
var vm = new Vue({
el: "#demo",
data: {
classA
: "class-a",
classB: "class-b"
}
})
<div :class="[classA, {‘classB’: isB, ‘classC’: isC}, classD]"></div>
综合绑定模式
<span :class="[one,{'classA':classa,'classB':classb}]">Be good at VUE</span>
var vm = new Vue({
el: "#demo",
data: {
one: "string",
//
string-->
类名
classa: true,
classb: false
}
})
<!-- style
绑定
-->
<div :style="{fontSize: size + 'px'}">div</div>
内嵌绑定
<div v-bind:style="{width:'200px', height:'200px', 'background-color':'red',fontSize: size + 'px'}">
new Vue({
el: "#app",
data: {
size:60
}
})
<div v-bind:style="styleObject"></div>
直接绑定到一个样式对象
<!--
绑定一个有属性的对象
-->
<div v-bind="{id:someProp, 'other-attr': otherProp}"></div>
<span v-bind:style="styleObject">VUE</span>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
<!--
通过
prop
绑定，
prop
必须在
my-component
中声明
-->
<my-component :prop="someThing"></my-component>
<!--
通过
$props
将父组件的
props
一起传递给子组件
-->
<child-component v-bind="$props"></child-component>
<!-- Xlink -->
<svg><a :xlink:special="foo"></a></svg>
10 v-on
作用：
用在普通元素上时，只能监听
原生
DOM
事件
。用在自定义元素组件上时，也可以监听子组件触发的
自定义事件
。
修饰符：
. stop - 调用 event.stopPropagation() 。
. prevent - 调用 event.preventDefault() 。
. capture - 添加事件侦听器时使用 capture 模式。
. self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
. { keyCode | keyAlias } - 只当事件是从特定键触发时才触发回调。
. native - 监听组件根元素的原生事件。
. once - 只触发一次回调。
. left - (2.2.0) 只当点击鼠标左键时触发。
. right - (2.2.0) 只当点击鼠标右键时触发。
. middle - (2.2.0) 只当点击鼠标中键时触发。
. passive - (2.3.0) 以 { passive: true } 模式添加侦听器
API: https://v2.cn.vuejs.org/v2/api/?#v-on
