table of Contents
Vue instruction and members
instruction
Forms
Forms and instructions are generally used in conjunction attribute command, the most common is v-model="变量", variable bindings in this case is the actual value of the control value of the form element, we can use this method to achieve real-time synchronization of the content of some of the input box , and a single box and a plurality of check boxes, in the following example
<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>cloak
Cape instruction more suitable for some of the larger projects, because we import Vue statements that are ordinarily will be placed under the body, so in fact, when rendering the page, above have not read Vue time inside the {{ }} will not be resolved, but the display directly to {{}} form, but of course this time is very short, but if the page is large, slow down or speed situation, would be more obvious to see this problem Therefore cape instruction is to solve this problem, the method is very simple, we add v-cloak in place need to be resolved in advance, and then give in style inside display:noneit.
<head>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div v-cloak>
{{}}
{{}}
</div>
</body>So that we would not have that one moment curly brackets not being rendered in time to open the page.
condition
Vue conditions in much instruction, in fact, two common classes, i.e., v-if and v-show, behind the should be added to a Boolean value, both exhibited almost identical results, but the layer of meaning slightly different.
- v-if = "true | false", when it is false, does not render the tag on the page, we can use this method to hide information in the label
- v-show = "true | false ", if this latter is false, we can not see the label on the page, but this does not mean that the label does not render, but to label this property is located gives
display:nonethe property, so although there is no display, but the reality is the result of rendering. and is present in the structure of the entire page, just because this property so hidden.
Examples are as follows:
<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>cycle
Vue also circulating in our very familiar thing that is for, but here is v-forits basic grammatical structure
v-for="成员 in 容器"
This container can be many things, such as strings, such as arrays, dictionaries, or even objects below us one example:
<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>member
In fact, our members define new Vue({})some values when inside, such as el实例成员, data数据成员, methods方法成员, computed计算成员, watch监听成员and delimiters分隔符成员, below we highlight calculated members and members of the listener
Calculated member
Keyword calculated members to computedadd the same method and data, but the use of the time to note the following:
- computed attributes defined in the method, and similar data, so if a defined value computed, the data do not need to define repeated, otherwise an error
- The method attribute must be computed as defined in the return value, otherwise the body of this method will be presented in the form of property of none
- The method defined attribute computed will only be triggered when rendering, if only in computed defined in the text did not render, then it will not trigger this method properties
- The method defined attribute computed, if the value of the other variables appear, then all the variables that will change in the value of the method call once again bound to happen in any re-update the look of the property value method
Examples below, this example implementation is two input boxes, the third button buttons which will be displayed in real time the first two frames and, if the first two have a box is empty, button button is displayed in the "Results" character, rather than and its:
<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>Monitor members
Monitor, by definition, we can add in there listening members of the existing method attributes to monitor their status in real time, show up or do their judgment, do the operation, etc. Note that the following members to listen in time to add a few points:
- watch only to an existing property to monitor method, that is, if the above data or computed which are not defined in this attribute method, there is no way listening watch
- watch monitor significance is that property values once the monitor will trigger a change in the method defined inside the listener members, to carry out its logic, triggering a manner similar to the change js
- Methods watch members do not need to monitor which defines the return value, which is computed and to distinguish, computed properties is the method must have a return value.
Next we split a word in real time the names of the people first and last name, are displayed in two span box inside, examples are as follows:
<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>