目录
1、v-cloak
v-cloak解决闪烁问题：
当网速很慢的时候，vue将数据渲染到界面中，会出现插值表达式闪烁问题：用到模板引擎且不会闪烁出双花括号。这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
和 CSS 规则如 [v-cloak] { display: none } 一起用时。
比如，通过chrome浏览器模拟 一下:打开F12开发者工具，选择【网络】network，将网速调为{快速3g}或{慢速3g}进行刷新，可以看到有{{msg}}差值表达式闪烁。如下图：
解决方案：
index.html页面中进行如下调整：
head后添加style样式：
<style>
/* v-cloak配合属性选择器，默认隐藏,,当数据回来的时候
v-cloak指令会自动转换显示模式 */
[v-cloak] {
display: none;
}
</style> <body>
<div id="app">
<p v-cloak>{{msg}} </p>
<!-- 给msg标签，使用v-cloak指令 -->
</div>
</body> 具体如下：
2、v-text与v-html
与
v-html
和
jquery
中的
text()
与
html()
方法是一样的作用，都可以设置标签的文本内容。
纯文本设置， html可以设置
html
文本。
中给
vm
实例添加一个数据属性，分别通过
v-text
和
v-html
数据绑定，它们之间的区别一目了。
index.html代码如下：
<!-- v-text和v-html -->
<p v-text="msg3"></p>
<p v-html="msg3"></p>
结果展示：
3、v-bind属性与v-on事件
v-bind: 元素属性绑定，绑定的数据，在vm实例的data属性中声明
v-on: 元素事件绑定，事件绑定对应的函数，在vm实例的methods属性中声明
举例如下：
v-bind：使用v-bind进行绑定属性
index.html 文件：
<!-- v-bind: 指令可以被简写为 :要绑定的属性 -->
<input type="button" value="按钮" v-bind:title="mytitle"/> -->
<!-- v-bind 中，可以写合法的JS表达式 -->
<input type="button" value="按钮" :title="mytitle+'123'" /> 
main.js文件：
效果展示：
v-on：使用v-on或者@进行绑定
index.html 文件：
<!-- v-on:事件绑定机制 -->
<input type="button" value="按钮" v-on:click="show1('xx')" />
<!-- v-on: 指令可以被简写为 @要绑定的方法 -->
<input type="button" value="按钮" @click="show" />
main.js文件：
效果展示：
此时，还可以修改main.js中的show1，使得展示index.html页面中默认的参数，如下：
4、事件修饰符：
@事件名:事件修饰符=“xx”,
在事件绑定过程中,对于事件不同情景下的调整作用.
举例：
跳转至百度：
<a href=”http://www.baidu.com” @click=”linkClick”>百度一下</a>
5、v-model双向数据绑定
v-bind 或者{{xx}} 插值表达式只能实现数据的单向绑定，.从 M 自动绑定到 V 无法实现数据的双向绑定,当v变化的时候，M也自动更新,这个就是双向数据绑定，而v-model就是实现双向数据绑定，但注意的是，v-model只能运用在表单元素中，通常V会改变，也只是应用在表单元素中。
举例：
重新创建demo2.js和demo.html文件，修改vue.config.js配置：
<div id="app">
<!-- 注意: v-model 只能运用在 表单元素中 -->
请说出你的座右铭:
<input type="text" style="width:100%;" v-model="msg" @keyup="showMsg" />
</div>
data:{
msg:"坚持就是胜利，nothing impossible"
},
methods:{
showMsg(){
console.log(this.msg)
}
}
结果如图所示：
6、vue中的样式
vue中要为html的标签元素添加样式提供了2种方式：
- 为元素添加class样式
- 为元素添加style样式
class样式:
vue中为元素添加class样式，通过v-bind:class属性绑定的方式完成, 它有主要以下2种方式的支持：
-
class属性值直接传递一个数组:
<h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1>
<h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1>
<h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1>
效果如下：
-
class属性值传递data属性的绑定数据
<h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1>可以在data中设置样式对象“classObj”
data:{
flag:true,
classObj:{
red: true,
thin: true,
active: true,
itatic: false
}
}, 
效果如下：
*: classObj以及flag都是vm实例上data对象绑定的属性数据
style样式:
中为元素添加
style
样式，通过
v-bind:style
属性绑定的方式完成
,
它也有主要以下
2
种方式的支持：
- v-bind绑定style属性，传递一个样式对象
<h1 :style="{color: 'blue', 'font-size': '40px'}">这是一个善良的H1</h1>
- v-bind绑定style属性，传递data属性的绑定数据
<h1 :style=”styleObj1″>
这是一个
h1</h1>
7、v-for和key
v-for 就是循环指令，通过遍历数据，循环元素
- 遍历普通数组 <p v-for=”(item,index) in list”>索引:{{index}}—-每一项:{{item}}</p>
- 遍历对象数组 <p v-for=”(item,index) in listObj”>索引:{{index}}—-每一项id:{{item.id}}:每一项name:{{item.name}}</p>
- 遍历对象 <p v-for=”(val, key, i) in user”> {{key}}:{{ val }} — 索引:{{i}}</p>
- 遍历数字 <p v-for=”count in 10″>这是第 {{ count }} 次循环</p>
*: list
、
listObj
、
user
都是
vm
实例的
data
绑定数据，比如
:list: [1,2,3,4,5,6]listObj:[{id: 1,name: ‘zs1’},{id: 2,name: ‘zs2’},{id: 3,name: ‘zs3’}]user:{uid:”007″,name:”James Bande”,job:”
特工
“,salary:”10000”}
效果：
官方说明在使用
v-for
指令的时候
:
当
在组件上使用
v-for
时，
key
现在是必须的
，
我们现在并没有在
vue
组件中使用v-for
指令，所以可以不带
key
属性，但是建议，在任何场景中使用
v-for
指令，都要带上
key
属性。比如
:
当在动态循环li
标签时会出现的
checkbox
问题
即成功添加4–xx之后仍然勾选为1
8、v-if和v-show
v-if和v-show都可以控制元素的显示与隐藏,他们的区别在于:
- v-if：每次都会重新删除或创建元素
- v-show:每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
有较高的切换性能消耗，而
v-show
有较高的初始化渲染消耗，如果元素频繁切换显示与隐藏，建议使用
v-show
-
指令学习源代码：