vue(二)指令、过滤器

指令

指令在vue中，都是以v-开头的，指令写在标签的属性中，可以写不同的指令完成不同的功能。
代码如下：

<div id = "app">
	//1.v-pre   跳过该元素的渲染过程，显示最初的{{}}
	<div v-pre> {{ name }} </div>
	//2.v-cloak  没具体含义，但可以用来操作内部过程
	<div v-cloak> {{ name }} </div>
	//3.v-once  只会被渲染一次
	<div v-once> {{ name }} </div>
	//4.v-html   innerHTML
	//5.v-text
	<div v-html="dom"></div>
	//6.v-if 控制元素是否存在
	<div v-if = "flag"> 
		<div>{{ name }} </div>
	</div>
	<div v-else = "flag"> 
		<div>{{ age}} </div> 
	</div>
	//v-else  v-else-if  和原生的一样，中间不能有其他的
	//模板可以减少dom的渲染次数
	<template v-if = "flag">
		<div>qq</div>
		<div>ww</div>
		<div>ee</div>
	</template>
	//v-show  控制display：none
	//v-show和v-if的区别
	//1.v-if是直接控制元素是否存在，v-show是控制display：none，可以通过inner去获取内容
	//2.v-show不支持template标签
	
</div>
<script>
var vm = new Vue({
	el : "#app",
	data : {
		name : "aaa",
		age : "18",
		dom : "<div>宜昌</div>",
		flag : true
	}
})
</script>

上面所列出的是一些基本指令，接下来再看看其他的：

<style>
	#app div{
		width : 100px,
		height : 100px
	}
	.red{
		background-color : red
	}
	.yellow{
		background-color : yellow
	}
	.blue{
		background-color : blue
	}
</style>
<div id = "app>
	<img v-bind:src="imgUrl" alt=""/>
	//绑定属性，需要通过vue去渲染的属性前面得加上一个标识符v-bind:，绑定属性的标识符可以进行简写 ===>   :
	<img :src="imgUrl" alt=""/>
	//class
	//1.一个值
	<div :class="red"></div>
	//2.数组
	<div :class="[red,blue]"></div>
	//3.对象
	<div :class="{red:flag,blue:!flag,yellow:flag}"></div>

	//style
	//1.
	<div :style="divStyle"></div>
	//2.数组
	<div :style="[divStyle]"></div>
	
	//事件
	//1.v-on:+事件名称
	<button v-on:click="change()"></button>
	//2.@
	<button @click="change()"></button>
	<button></button>

</div>
<script>
var vm = new Vue({
	el : "#app",
	data : {    //定义数据
		imgUrl : "这里放图片",
		red : "red",
		yellow : "yellow",
		divStyle : {
			width : "200px",
			height : "200px",
			background : "red"
		}
	},
	methods : {  //所有的方法定义在这里
		change (){
			alert(123)
		}
	}
})
</script>

再来看一下v-for指令：
在使用v-for之前，我们需要明白，数据是从哪里来的，那么肯定有人说：“从服务端来呀”，那么服务端的数据呢？没错，从数据库中来。在mvvm中，我们始终关注的是m层，用m层的数据去驱动v层的数据，利用数据去驱动视图的更新。
接下来，再看代码

<div id = "app">
	<div v-for = "item in arr">{{ item }}</div>
	<div v-for = "(item,index) in personArr">{{ item }}{{ item }}</div>//index  索引
	<div v-for = "(value,key) in obj">{{ key }}:{{ value }}</div>
	//注意：在脚手架环境中不行
	//mvvm框架没有直接去更改dom，而是去更改虚拟的dom，虚拟dom驱动视图，变成真实的dom，修改dom会导致页面的重绘，为了效率，他把循环出来的vdom全部加上的标记（在普通环境中没法看到，但是到了cli中会出警告），这个标记就是key属性，key值可以任意写，但是它是标记，尽量不要用索引来做key属性的值。key值不会显示在dom中
</div>
<script>
var vm = new Vue({
	el : "#app",
	data : {
		arr : [1,2,3],
		personArr : ["1","2","a"],
		obj : {
			name : "jack",
			age : "100"
		}
	},
	methods : {   //所有的方法定义在这里
		
	}
})
</script>

v-model双向数据绑定，主要是用在表单类元素中的

<div id = "app">
	<input type="text" :value = "content" @input= "inputBlur"/>  //m层  数据
	<span>{{ content }}</span>   //v层  展示
	//v-model就是value+input事件的语法糖
</div>
<script>
var vm = new Vue({
	el : "#app",
	data : {
		content : "jack"
	},
	methods : {
		imputBlur(e){
			this.content = e.target.value
		}
	}
})
</script>

自定义指令

<div id = "app">
	<input type = "text" v-model="content" v-slice="content">
	{{ content }}
</div>
<div id = "app2">
	
</div>
<script>
//全局的：可以用在任意一个被vue接管的div中
//局部的: 定义在vue实例中，只能在当前vue接管的div中使用
Vue.directive("slice",(el,bindings,vnode) => {
//el:绑定的元素
//bindings :绑定的详细信息
//vnode : 虚拟节点
bind(el,bindings,vnode){}//指令绑定上去的时候触发
updata(el,bindings,vnode){}//数据更新的时候触发
inserted(el){}//元素插入到页面的时候触发

})     //全局定义
new Vue({
	el : "#app",
	data : {},
	methods : {},
	directive : {}   //局部定义
})
</script>

过滤器

<div id = "app">
//money 作为toMoner的第一个参数，如果有第二个参数，依次加上括号传递
{{ money | toMoney(1,2,3) }}
</div>
<script>
//1.过滤器在vue中没有内置的，全都是自定义的
//2.局部
//简单理解就是过滤器说白了就是去调用一个函数,返回值作为参数
Vue.filter('toMoney',(value,a,b,c)=>{
	return value * 3
})
new Vue({
	el : "#app",
	data : {
		money : 100
	},
	filters : {  //局部
		
	}
})
</script>