目录
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
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、事件修饰符:
举例:
跳转至百度:
<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样式:
- 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 样式
-
指令学习源代码: