拾光°
vue指令
04/02
指令：
插值表达式：
语法：{{要插入的值}}，此时相当于占位符，到时候{{关键字}}会被替换成Model中的数据
bug点：
当网速较慢时，Vue初始化未完成时，插值表达式不能被解析，会直接显示
出来，加载完毕之后又会被替换成真实结果，造成闪烁（Vue的加载代码写在
HTML元素之后时会出现该bug）
1.v-cloak指令：
语法：把它当作HTML元素的一个属性使用
示例：
{{msg1}}特点：
当Vue加载完毕后，v-cloak属性会自动消失
使用：
添加如下CSS样式：让所有带v-cloak属性的元素隐藏，Vue加载完成后显示
实现，解决插值表达式闪烁的问题
[v-cloak]{
display: none;
}2.v-text：
语法：
<p v-text="msg"></p>作用：和插值表达式一样，用于给HTML元素添加文本
区别：
- v-text不会存在闪烁问题
- v-text会将Model中的数据完全替换到HTML元素中（覆盖）
- 插值表达式只会将Model中的数据替换到插值表达式中（占位符内容的替换相同点：
- 插值表达式和v-text都可以给HTML元素显示文本
- 插值表达式和v-text都不会解析要添加文本中的HTML标签（原样显示）
3.v-html：
和v-text的唯一区别：给HTML添加内容时会解析内容中的HTML
可能有安全问题, 一般只在可信任内容上使用 v-html，永不 用在用户提交的内容上(xss攻击)
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
4. v-pre：
语法：
<span v-pre>{{ this will not be compiled }}</span>
<!-- 结果就是 {{ this will not be compiled }} -->注意：
- 显示原始信息跳过编译过程
- 跳过这个元素和它的子元素的编译过程。
- 一些静态的内容不需要编译加这个指令可以加快渲染
5. v-bind：
语法：在HTML元素的属性目前加上绑定标识，此时HTML的该属性的值就会根据属性值的名字从Model中获取数据
注意：
- 【v-bind:】用于绑定HTML元素属性的值（用来响应地更新 HTML 属性）
- 【v-bind:】可以简写为 :
- v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找 当我们在控制台改变属性值时，对应也会变化。
6. v-on：
语法：在HTML的事件属性（不带on）前加上绑定标识，此时HTML触发此事件时，会执行事件中绑定的代码
示例：
点击下显示你好
<button @click=“sayHello(可以传参数)”>点击下显示你好注意：
- 常见的web网页的事件都支持绑定
- 事件名字不带on
- 事件触发的方法必须在methods中定义
- v-on标识的属性会被Vue解析为特定JavaScript，只要内容符合JavaScript规范都能正确执行（比如传入参数）
- 【v-on:】等价于【@】
7.v-once
语法:
<div v-once>{{info}}</div>注意：
- 只编译一次【显示内容之后不再具有响应式功能】
- 即使data里面定义了info 后期我们修改了 仍然显示的是第一次data里面存储的数据
- v-once的应用场景: 如果显示的信息后续不需要再修改, 那么可以使用 v-once, 这样可以提高性能
8.v-model (数据双向绑定)
语法：
<div id="app">
<div>{{msg}}</div>
<div>
<!-- 当输入框中内容改变的时候， 页面上的msg 会自动更新 -->
<input type="text" v-model='msg'>
</div>
</div>
<script type="text/javascript">
/*
双向数据绑定
1、从页面到数据
2、从数据到页面
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
注意：
- 限制在 、
