vue系列:vue常用指令以及其用法
好记性不如烂笔头,学习过程中也要记笔记,方便日后的复习
常见Vue指令的用法及注意事项,包括v-text、v-html、v-model、v-cloak、v-bind、 v-on、v-if、v-show、v-for
文章目录
一、什么是指令?
指令 (Directives) 是带有 v- 前缀的特殊 attribute(vue 指令都以 v-开头)。指令 attribute 的值预期是单JavaScript 表达式 (v-for 是例外情况)。
二、常用指令
1、v-text
<div id="app">
<h1>{{msg}}</h1>
<!-- {{msg}}可以用 v-text 指令替代 -->
<h1 v-text="msg"></h1>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'helloworld'
}
})
</script>
作用:显示 data 中的变量值,与{{ }}语法基本一样但是又不完全一样
原因:{{}}表达式只会更新原本占位插值所在的数据内容,而 v-text指令则会替换掉整个的内容
2、v-html
<div id="app">
<h1 v-text="msg"></h1>
<h1 v-html="msg"></h1>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'<a href="http://www.baidu.com">百度</a>'
}
})
</script>
v-text运行结果是< a href=“http://www.baidu.com”>百度 一串数字。
v-html运行结果是百度,带连接的百度。
v-text 与v-html 的区别:
相同点:都可以更新页面元素内容
不同点:v-text 会将数据以字符串文本的形式更新,而 v-html 则是将数据以 html 标签的形式更新
3、v-model
在表单控件或者组件上创建双向绑定
<div id="app">
{{msg}}
<input type="text" v-model="msg">
</div>
<script>
var vm= new Vue({
el: '#app',
data: {
msg: 'helloworld',
}
});
</script>
v-model 指令完成数据在 View 与Model 间的双向绑定。
如图:
v-model的三个修饰符
(1)lazy 修饰符
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步。也就是如下文本框中输入的与显示的同步,每输入一个字符都会同步显示。当添加 lazy 修饰符,从而转变为失去焦点同步。也就是说现在在文本框中输入字符时msg 的值不会及时改变,要等光标移到文本框外面并单击空白处才同步改变。
(2)number 修饰符
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符
如果要对数字进行求和,可以用此方法,还可以用 parseInt 进行转换,如下:
{{parseInt(num1)+parseInt(num2)}}
效果一样是求和
(3)trim 修饰符
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符。有了 trim 修饰,只要光标离开了文本框在其他地方单击下,两端若有空格就会自动去掉
4、v-cloak
因为{{}}模板语法在数据较多是会存在闪烁问题,就就是可能页面数据还没加载渲染完成,就提前看到了{{}}。我们可以使用v-cloak来解决这个问题。
但是使用 v-cloak,需要配合 css 样式一起使用,否则不会生效。通过 css 样式先设置为不显示,在数据渲染完成之后就会自动修改 display 值
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h3 v-cloak> {{msg}}</h3>
</div>
<script>
var vm = new Vue({
el: '#app', data: {
msg: '张三',
},
// 使用 created 函数作用就是测试页面尚未渲染数据时提前看到了{{}},created 是 vue 生命周期中的一个钩子函数
created: function () {
alert('vue 实例刚创建,页面尚未渲染数据')
}
});
</script>
</body>
5、v-bind
用来在标签上绑定标签的属性和样式
语法: v-bind:属性=”值”
v-bind 可以简写为:
如:v-bind:src=““简写为:src=””
(1)v-bind绑定class属性
<style>
.a{
color:red;
font-size:20px;
}
.b{
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<!-- 普通 css 绑定 -->
<p class="a">张三</p>
<!-- 直接这样绑定不行,加了:表示到 vue 中去找 a 属性 -->
<!-- <p :class="a">张三</p> -->
<!-- 正确方式 1,直接在原来的类名外面写上一对单引号 -->
<p :class="'a'">张三 1</p>
<!-- 正确方式 2:通过变量形式 -->
<p :class="av">张三2</p>
<!-- 正确方式 3:应用多个样式,用数组形式,数组值为多个属性变量值 -->
<p :class="[av,bv]">张三 3</p>
<!-- 正确方式 4(常用):json 形式,键值对,键就是样式名,值固定为布尔型,即 true 或 false,true 表示应用该样式,false 表示不应用 -->
<!-- 当然直接写 true 或 false 也就是写死,可以用变量,比如 flag,就这表示来自 vue 中的值 -->
<p :class="{a:flag,b:false}">张三 4</p>
<p :class="{a:num>0,b:false}">张三 5</p>
<!—-上面键值对如果太长了,影响阅读,正确方式 5:通过变量引用 json 形式 -->
<p :class="varStyle">张三6</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
avr:'a',
bvr:'b',
flag:true,
num:-3,
varStyle:{
a:true,
b:true
// 这个地方也可使用 flag 指定,但要在前面加上 this,即 this.flag
}
}
})
</script>
</body>
(2)v-bind绑定style属性
<div id="app">
<!-- 内嵌样式的绑定 -->
<p :style="myStyle">张三 1</p>
<!-- 内嵌样式的绑定,使用数组形式 -->
<p :style="[myStyle,myStyle2]">张三 2</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
myStyle:{
// 注意这里的属性名要使用驼峰命名法,属性值需要单引号引起来
//驼峰命名法:第一个单词以小写字母开始;从第二个单词开始以后的每个单词的首字母都采用大写字母
color:'red',
fontSize:'30px'
},
myStyle2:{
backgroundColor:'#ccc'
}
}
})
</script>
6、v-on
用法:v-on:事件名=”函数”。
事件名比如:click、dblclick、mousedown、mouseup 等等。
v-on:可以简写为@
<div id="app">
<!-- 直接 onclick 这是原来 html 写法,是调用不到 show 方法,因为这个 show 方法就不能定义在 vue 实例中 -->
<!-- <button οnclick="show()">点我</button> -->
<!-- 在 vue 中要绑定事件要使用 v-on -->
<button @click="show()">点我</button>
<!-- show 后面不带()也行,vue 中允许这样写,当然写()更清楚这是方法,但是如果有参数必须得有括号的 -->
<button v-on:click="show">点我</button>
<hr>
<button v-on:click="add()">向数组中添加一个元素</button>
<br>
{{arr}}
<hr>
<button v-on:mouseover="show">鼠标经过时执</button>
<button v-on:dblclick="show">鼠标双击时</button>
</div>
<script>
/* js 定义方法格式
function show(){
} */
var vm = new Vue({
el: "#app",
data: {//存储数据地方
arr: [12,23,34,45]
},
methods:{//存储方法地方
// show:function()这句也可以直接简写为 show()
show(){
console.log("这是 show 方法")
},
add:function(){
//arr.push(88);
//直接这句不行,因为找不到 arr
console.log(this);
//输出 this 看下,发现 this 就是当前这个 vue 实例
console.log(this===vm)//这句结果为 true 也说明 this就当前 vue 实例 vm
//==单纯的比较值,===不仅比较值还要比较数据类型
this.arr.push(88);
//要在 arr 前面加 this 或者 vm,表示当前实例下的 arr
vm.arr.push(99);//当没有接收 vue 实例,也就是没有定义 vm 时,就直接用 this
console.log(this.arr)
this.show();
//在 add 方法中直接调用 show 方法也要在前面加上 this
}
}
})
</script>
7、v-if
(1)当 flag 值为 false 时 dom 元素会销毁,当为 true 时又会重新创建
<body>
<div id="app">
<!-- 双分支结构 -->
<div v-if="flag">Yes</div>
<div v-else>no</div>
<!-- 多分支结构 -->
<div v-if="grade>90">优秀</div>
<div v-else-if="grade>70">中等</div>
<div v-else-if="grade>60">及格</div>
<div v-else>不及格</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag:false,
grade:78
},
})
</script>
</body>
(2) 元素上使用 v-if 条件进行分组显示与隐藏,可以省略很多代码
<body>
<div id="app">
<!-- 下面这种效果v-if="flag"写了很多遍 -->
<template v-if="flag">
<div>计算机组成原理</div>
<div>C#程序设计</div>
<div>ASP.NET动态网页设计</div>
</template>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true,
grade: 78
},
})
</script>
</body>
8、v-show
v-show 指令也是根据表达式的真假值判断元素的显示与否
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-if 与v-show的区别
用来根据表达式的值显示或隐藏元素,v-show 是通过
display 实现,显示与隐藏只是切换 display 属性;v-if 每次删除后重新创建,即显示与隐藏是在销毁与创建元素之间切换
如下代码块:
<div id="app">
<!-- v-show 后面也可以直接跟 true 或 false,也可以使用 vue实例中的对象(因为 v 指令都可以访问 vue 实例中的数据 -->
<div style="width:100px;height:100px;background-color:red;" v-show="flag">我是红色正方形</div>
<!-- 通过下面按钮来切换上面 div 的显示与隐藏 -->
<hr>
<!-- 第一种方法 -->
<!-- <button v-on:click="change">隐藏</button> -->
<button v-on:click="change">隐藏/显示</button>
<!--第二种方法:事件里也可以直接写一个语句 -->
<button v-on:click="flag=false">隐藏</button>
<!-- 显示与隐藏之间切换 -->
<button v-on:click="flag=!flag">隐藏/显示</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {//存储数据地方
flag:true
},
methods:{
change(){
// this.flag=false;//隐藏
this.flag=!this.flag;//隐藏与显示切换
}
}
})
</script>
当我写的是v-if,它是隐藏时,控制台显示的是
当我写的还是v-show,他显示隐藏时,控制台是
(1)上面是通过 v-show 显示与隐藏,切换到代码查看器,会发现 div 的显示与隐藏是通过 display 是否为 none。
如果把 v-show 换成 v-if,则当 v-if 后面表达式值为 false 时,是销毁整个 div 元素,为 true 时,则重新创建。
(2)v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
(3)v-show 不支持 元素,也不支持 v-else。一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,当我们需要频繁控制元素的显示与否时,推荐使用v-show 指令,避免因为使用 v-if 指令而造成的高性能消耗
9、v-for
v-for 指令,可以对数组、对象、数字、字符串进行循环,获取到源数据的每一个值。使用 v-for 指令,必须使用特定语法 item in items ,其中 items 是源数据(数组、字符串等),而 item 则是当前遍历的元素的别名,这里类似于 C# 中的 foreach 的循环格式。
(1)使用 v-for 时尽量提供 key,提高修改元素的效
<div id="app">
<ul>
<li v-for="value in arr2">{{value}}</li>
<hr>
<!-- 通过指定:key 属性为每个元素绑定一个唯一的 key,其优
势是当更新元素时可重用元素提高效率 -->
<!-- 也就是说假设数组 arr2 元素值发生变化时,如果没有:key
属性,那么会把 arr2 所有值先删除再重新插入。有 key 的话就会重用
原有元素,也就是在原先基础上修改 -->
<li v-for="(value,key) in arr2" :key="key">{{value}}</li>
</ul>
</div>
<script>
var app4 = new Vue({
el: '#app',
data: {
arr2: [1,2,3,4,5],
}
})
</script>
10、v-once 与 v-pre
v-once 只绑定一次。
v-pre 不解析{{ }}。
<div id="app">
<input type="text" v-model="msg">{{msg}}</input><br>
<!-- 只绑定一次 ,后面修改了 msg 的值这里不变-->
<h3 v-once>{{msg}}</h3>
<!-- 这里我就想把{{}}显示出来怎么办? 加一个 v-pre 指令-->
<h3 v-pre>{{msg}}</h3>
<!-- <h3 v-pre>{{hello vue}}</h3> 这里如果没有 v-pre 指令就会报错,因为会认为 hello vue 是 data 里的一个属性,而实际不存在,所以会报错-->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg:"张三"
}
})
</script>
总结
本人的学习笔记,为了方便日后回顾,也可供大家参考,如果有错误的地方,还请各位指出。谢谢!!!