vue学习（三）——指令（2）

简介

接着上一篇文章，再补充一些重要的指令，其中v-model是重点，篇幅也较长。

v-if

该指令的作用是通过判断语句中的条件是否成立来决定是否生成对应的html代码。

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>

当seen的值为True时，即可看到该标签p被生成出来。

v-show

该指令的作用是通过判断语句中的条件是否成立来决定是否显示对应的html代码。

<div id="app">
    <p v-show="seen">现在你看到我了</p>
</div>

当seen的值为True时，即可看到该标签p被显示出来。

注：v-if与v-show区别在于是否生成对应标签，v-if为no时是不生成对应标签的，v-show为no时只是把css中的display值改为false，标签依旧会生成，只是不可见。

v-model

该指令十分重要，其实现了双向绑定。你可以把它当成v-bind与v-on的结合体。

<div id="app">
	<input v-model="aaa"/>
	<p>{{aaa}}</p>
</div>

<script>
	const app = new Vue({
	  el: '#app',
	  data:{
	  	aaa : '123'
		}
	})
</script>

如上，标签中的input的东西就与vue中data变量中的aaa绑定在一起了。

我们可以通过修改input中的东西改变aaa，也可以通过修改aaa来改变input中的东西。

可以用v-model的地方特别多。包括：

1. radio控件，其选定与否可以用v-model与一个bool变量绑定在一起。
2. checkbox，同上，但是在多选时，需要绑定同一个数组，也不是bool变量。
3. select同checkbox一样的用法

v-model还有修饰符号，包括：

1. lazy，降低绑定频率用，减少资源损耗。

2. number，限制输入的数据。

3. trie，去除空格。

v-model在组件中的使用

v-model除了能双向绑定数据和标签中的东西，也可以让子组件标签数据的与父组件数据进行绑定。但是，需要注意的是，双向绑定不能直接套上去用，毕竟父子通讯是要走流程的，没有想象中那么简单。下面是样例：

<div id="app">
	<cpn v-model="aaa"></cpn>
	{{aaa}}
</div>

<script>

	const cpn = {
		template: "<div><input v-model='xxx'></div>",
		props:['xxx'],
		model:{
			prop : 'xxx',
			event: 'out2'
		},
		watch:{
			xxx(val){
				this.$emit('out2',this.xxx)
			}
		}
	}

	const app = new Vue({
	  el: '#app',
	  data:{
	  	aaa : '123'
		},
		components : {
	  	cpn
		}
	})
</script>

我们可以看到，外面的aaa是父组件的变量，而输入框，是子组件的输入框，要让他们相互绑定。

我们需要v-model，还需要子组件中加入model这一属性。

其中，model属性的prop值用于指定要绑定的值，也就是v-model对应的变量（该变量必须在props中，即要是传进来的值中的一个），如上例，xxx为指定要绑定的值，所以prop对应的值就是xxx。model属性的event值用来约定好回调的事件，通过$emit该事件，我们就能将xxx值回馈给父组件了。

简单来说，v-model就是v-on和v-bind的简写方法，只不过在父子组件通信中，v-on与v-bind的写法比在同一组件中麻烦得多，所以vue也提供了v-model，但是就要加入一些父子组件通讯必备的一些操作了，比如prop和event。