- v-if
可完全根据表达式的值在DOM中生成或移除一个元素（false表示移除，true表示生成。v-if支持template语法）
- v-show
当v-show为false时，元素被隐藏，查看DOM会发现元素上多了一个内联样式style="display: none"（v-show不支持template语法）
1） 对比v-if与v-show
v-if：惰性，如初始条件渲染时条件为假，则什么也不做，在第一次条件为真时才开始局部编译。
v-show：元素始终被编译，只是使用css（display: none）控制是否展示
优缺点：v-if有更高的切换消耗；v-show有更高的初始渲染消耗。因此在频繁切换时，采用v-show较好；在运行时条件不大可能改变的，使用v-if较好。
- v-else
必须与v-if或v-show一起使用，充当else功能。 <!-- v-show和v-else同时使用，由于指令的优先级会出现问题 -->
<-- 错误写法 -->
<h3 v-show="flag">标题</h3>
<p v-else>第一段文字</p>
<!-- 正确写法 -->
<h3 v-show="flag">标题</h3>
<p v-show="!flag">第一段文字</p>
- v-model
用来在input、select、text等表单控件上创建双向数据绑定，v-model可以添加多个参数（number、lazy、debounce）
1） number
将用户输入自动转换为Number类型（若原值转换结果为NaN，则返回原值）
2） lazy
在默认情况下，v-model在input事件中同步输入框的值与数据，在添加lazy特性之后，可以将数据改到在change事件中发生。 <body id="example">
<input v-model="msg" lazy>
<div>
{{ msg }}
</div>
</body>
<script>
var example = new Vue({
el:'#example',
data: {
msg:"change事件之后改变"
}
})
</script>
3） debounce
设置延时，在输入之后延时同步到输入框的值与数据。减少了每次输入时多次发送Ajax请求。 <body id="example">
<input v-model="msg" debounce="5000">
<div>
{{ msg }}
</div>
</body>
<script>
var example = new Vue({
el:'#example',
data: {
msg:"5秒后内容改变"
}
})
</script>
- v-for
基于源数据重复渲染元素。
1） vue能触发视图更新的数组方法
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
ES5无法检测到新属性添加到一个对象上或者在对象上删除，要解决处理这种情况，vue增加了三种方法：$add(key,value)、$set(key,value)、$delete(key)，来触发视图更新
2） filterBy
语法：filterBy searchKey[in dataKey...]
用法：
<body id="example">
<ul>
<li v-for="user in users | orderBy field reverse">{{user.name}}</li>
</ul>
</body>
<script>
var example = new Vue({
el:'#example',
data: {
field: "tag",
reverse: false,
users: [{
name: "一班",
tag: 1
}, {
name: "三班",
tag: 3
}, {
name: "三班",
tag: 2
}, {
name: "四班",
tag: 4
}]
}
})
</script>
- v-text
可以更新元素的textContent，相当于插值语法。
- v-html
可以更新元素的innerHTML，内容忽略数据绑定，并按普通的HTML插入，等同于HTML插值语法。
不建议直接使用动态渲染HTML，易遭到XSS攻击
- v-bind
用于响应更新HTML特性，可以动态地绑定属性（绑定style或class时支持数组与对象） <!--完整形式-->
<img v-bind:src="img_path">
<!--简化形式-->
<img :src="img_path">
1） 在绑定prop时，prop必须在子组件中声明，可用修饰符指定不同的绑定类型。修饰符：
- .sync：双向绑定，仅用于prop绑定
- .once：单次绑定，仅用于prop绑定
- .camel：双向绑定，将绑定特性的名称转回驼峰命名，仅用于普通HTML特性绑定
<!-- prop绑定，“porp”必须在test_component组件内声明 -->
<test_component :porp="event"></test_component>
<!-- 双向prop绑定 -->
<test_component :porp.sync="event"></test_component>
<!-- 单次prop绑定 -->
<test_component :porp.once="event"></test_component>
- v-on
用于绑定事件监听器，事件类型由参数指定：表达式可以是一个方法的名称或一个内联语句。（在普通html上使用，只能监听原生的dom事件；在自定义组件上使用，可监听子组件触发的自定义事件） <!-- 方法处理器 -->
<button v-on:click="click_event">点击执行事件click_event</button>
<!-- 内联语句 -->
<button v-on:click="click_event('hello', $event)">点击执行事件</button>
<!-- 缩写 -->
<button @click="click_event">点击执行事件click_event</button>
1） v-on后也可以跟修饰符
- .stop：调用event.stopPropagation()
- .prevent：调用event.preventDefault()
- .capture：添加事件侦听器时使用capture模式
- .self：只有事件是从侦听器绑定的元素本身触发时才触发回调
- .{keyCode|keyAlias}：只是指定按键上触发回调
<!-- 停止冒泡 -->
<button @click.stop="click_event">点击执行事件click_event</button>
<!-- 阻止默认行为 -->
<button @click.prevent="click_event">点击执行事件click_event</button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="click_event">点击执行事件click_event</button>
<!-- 键修饰符，键别名 -->
<input @ketup.enter="click_event">Enter按键触发
<!-- 键修饰符，键代码 -->
<input @ketup.13="click_event">按键ASCII码触发
- v-ref
在父组件中注册一个子组件的索引，便于直接访问。可通过父组件的$refs对象访问子组件。
当ref和v-for一起使用时，注册的值将是一个数组，包含所有子组件，对应于绑定数组；若v-for使用在对象上，注册值将是一个对象
- v-el
为DOM元素注册一个索引，方便通过所属实例的$els访问这个元素。 <span v-el:msg>hello</span>
<script>
this.$els.msg.textContent // => "hello"
</script>
- v-pre
编译时跳过当前元素和他的子元素。
- v-cloak
保持在元素上直到关联实例结束编程。 <style>
[v-cloak] {
display: none;
}
</style>
<div v-cloak>
{{message}}
</div>
浙公网安备 33010602011771号