Vue的指令和成员
指令
表单
表单指令一般是和属性指令联合使用的,最常见的就是v-model="变量",这种情况下绑定的变量所控制的就是表单元素的实际value值,我们可以用这种方法来实现实时同步一些input框的内容,以及单一复选框和多个复选框的设置,如下例
<body>
<div id="app">
<form action=""><!--这里我们定义的两个input框,一个textarea大文本框,其v-model都是绑定的同一个v1,这种情况下,我们只需要改变v1的值,三个框的值都会实时改变,而v-mode的值就是表单的value值,所以我们在input框里面输入的值就可以实时呈现出来-->
<input type="text" v-model="v1">
<input type="text" v-model="v1">
<textarea name="" id="" cols="300" rows="100" v-model="v1"></textarea>
<hr>
<!--单一复选框-->
<!---->
<input type="checkbox" name="agree" v-model="v2">
<!--这里的v2,只要给的值布尔值为真就为真,向后端发送的数据就是agree:true-->
<hr>
<!--多个复选框,多个复选框的v-model值要相同,-->
男:<input type="checkbox" name="hobbies" value="male" v-model="v3">
女:<input type="checkbox" name="hobbies" value="female" v-model="v3">
???:<input type="checkbox" name="hobbies" value="lala" v-model="v3">
<p>{{ v3 }}</p>
<hr>
<!--单选框,type类型为radio-->
中午吃啥：<br>
肉肉:<input name="food" type="radio" value="rourou" v-model="v4">
菜菜:<input name="food" type="radio" value="caicai" v-model="v4">
<p>{{ v4 }}</p>
<hr>
<button type="submit">提交</button>
</form>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
v1:'', //v1的初值可以为空
v2:true,//这里应该给的是布尔值,true或者false
v3:['male','female'],//这里是一个比较有意思的用法,我们绑定v3的框有三个,value分别是'male','female'和'lala',这个数组里我们可以指定默认的value,即生成网页的时候数组里写的value对应的多选框会默认选中
v4:'caicai',//这里的用法和上面的相似,也是生成时候的默认值,默认选中value值为'caicai'的单选框
}
})
</script>斗篷
斗篷指令比较适用于一些比较大的项目中,因为通常情况下我们导入Vue的语句会放在body的下面,这样其实在网页渲染的时候,在上面还没有读取到Vue的时候里面的{{}}不会被解析,而是直接以{{}}的形式显示出来,当然这个时间非常的短暂,不过如果网页较大,或者网速较慢的情况下,会比较明显的看到这个问题,所以斗篷指令就是为了解决这个问题,方法也非常的简单,我们在需要提前解析的地方加入v-cloak,然后在style里面赋予display:none就可以了.
<head>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div v-cloak>
{{}}
{{}}
</div>
</body>这样我们在打开网页的时候就不会出现双大括号没被渲染的那一个瞬间了.
条件
Vue中的条件指令不多,常用的其实就两个类,即v-if和v-show,其后面所应该添加的都应给是布尔值,两者展示出的效果几乎完全相同,但是内层含义有些许区别.
- v-if="true|false",当其值为假时,页面上不渲染该标签,我们可以用此方法来隐藏标签中的信息
- v-show="true|false",如果这个后面的值为false,我们在页面上也看不到该标签,但这并不代表该标签没有渲染,而是给这个属性所在的标签赋予了
display:none的属性,所以虽然没有展示出来,但实际上是经过了渲染的.且存在于整个页面的结构中,只是因为这个属性所以隐藏了.
实例如下:
<body>
<div id="app">
<!--这里两者的显示效果是一样的,但是真正存在形式不太一样-->
<p v-if="false">if指令</p>
<p v-show="false">show指令</p>
<!-- v-if其实就类似于我们之前所接触到的if,同样有elif,有else
v-if
v-else-if
v-else
使用的时候需要注意两点:
1、上分支成立，下分支会被屏蔽
2、else分支只要在所有上分支都为假时就会显示，不需要条件
-->
<p v-if="v1 === '1'">if分支</p>
<p v-else-if="v1 === '2'">elif分支1</p>
<p v-else-if="v1 === '3'">elif分支2</p>
<p v-else>else分支</p>
<hr>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
v1: '1'
}
})
</script>循环
Vue中的循环也是我们非常熟悉的东西,就是for,只不过这里的是v-for,其基本的语法结构为
v-for="成员 in 容器"
这个容器可以是很多的东西,比如字符串,比如数组,字典,甚至可以是对象,下面我们一一举例:
<body>
<div id="app">
<!--1、字符串-->
<p>
<span v-for="v in title">{{ v }}</span>
</p><!--只有一个v的话就是从字符串里每次取一个值,然后渲染-->
<p>
<span v-for="(v, i) in title">
<span v-if="i != 0"> | </span>
{{ v }}
</span>
</p><!--有两个参数,第一个v依然是从字符串里取出来的值,第二个参数是索引值,不仅字符串可以这样使用,数字,字典,对象都可以在最后加一个参数来取到其索引值-->
<!--2、数组-->
<div>
<p v-for="(v, i) in arr">第{{ i }}元素：{{ v }}</p>
</div>
<!--3、对象: 可以只遍历值，也可以遍历值与键，还可以遍历值、键与索引-->
<div><!--只遍历value-->
<p v-for="v in people">{{ v }}</p>
</div>
<div><!--同时遍历value和key-->
<p v-for="(v, k) in people">{{ k }}:{{ v }}</p>
</div>
<div><!--遍历value和key的同时加上索引值-->
<p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
</div>
<br>
<div><!--for循环的嵌套,即先把对象们从数组中取出来,然后对每个对象的value和key值进行遍历-->
<div v-for="(stu, i) in stus">
<hr v-if="i != 0">
<p v-for="(v, k) in stu">{{ k }}:{{ v }}</p>
</div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: '循环指令',
arr: [1, 4, 2, 5, 3],
people: {
name: '兔子',
color: '粉白',
price: 6.66,
},
stus: [
{
name: "Bob",
age: 18
},
{
name: "Tom",
age: 17
},
{
name: "Jerry",
age: 19
}
]
}
})
</script>成员
成员其实就是我们在定义new Vue({})时候里面的一些值,比如el实例成员,data数据成员,methods方法成员,computed计算成员,watch监听成员以及delimiters分隔符成员,下面我们着重介绍计算成员和监听成员
计算成员
计算成员的关键字为computed,添加方法和data相同,但使用的时候需要注意以下几点:
- computed中定义的是方法属性,和data相似,所以如果在computed中定义了一个值,不需要再data中重复定义,否则会报错
- computed中定义的方法属性一定要有返回值,否则正文中此方法属性就会呈现为none的形式
- computed中定义的方法属性只有在被渲染的时候才会触发,如果只是在computed中定义了,正文中并没有进行渲染,那么就不会触发这个方法属性
- computed中定义的方法属性中,如果出现了别的变量值,那么其内的所有变量值任意发生变化都会重新调用一次绑定的方法,重新更新一下方法属性的值
实例如下,这个实例实现的是两个input框,第三个button按钮里面会实时显示前两个框的和,如果前两个框有一个为空,button按钮显示为"结果"字符,而不是其和:
<body>
<div id="app">
<input type="text" v-model="v1">
+
<input type="text" v-model="v2">
=
<button>{{ res }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
// res: '结果',这里没必要重复定义,因为我们已经在computed里面定义过res这个方法属性
},
computed: {
res () {
console.log('该方法被调用了');
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';//这个三元表达式的意思是,如果v1和v2框内都有值的情况下,res就会被返回这两者的数值和,一旦有一个框没有值,res被返回的就是"结果"这个字符串.+this.v1和+this.v2指的是取v1和v2的数值类型,而不是字符串
}
}
})
</script>监听成员
监听,顾名思义,就是我们可以在监听成员里面加入已有的方法属性,从而实时监听其状态,显示出来或者对其做判断,做操作等等.监听成员在添加的时候需要注意以下几点:
- watch只能给已有的属性设置监听方法,即如果上面的data或者computed里面都没有定义这个属性方法,watch是没有办法监听的
- watch监听的意义在于,监听的属性值一旦发生变化就会触发监听成员里面定义的方法,执行其逻辑,触发方式类似于js的change
- watch监听成员里面定义的方法不需要返回值,这一点和computed要区别开,computed的方法属性是一定要有返回值.
接下来我们实现实时拆分一个两字姓名的人的姓和名,分别显示在两个span框里面,实例如下:
<body>
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<span>{{ first_name }}</span>
</p>
<p>
名：<span>{{ last_name }}</span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: '',
},
watch: {//full_name是上文中已经定义过的属性,所以可以添加监听方法
full_name() {//我们监听的方法是,当输入的姓名长度为2时,执行监听方法,以空格切割开姓名之后,取其第一个值为姓,第二个值为名,分别赋予first_name和last_name,这样是实现了实时拆分姓和名
if (this.full_name.length === 2) {
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
}
})
</script>