vue小记

Vue

计算

监听

自定义指令

过滤-管道

动画

组件

---

计算

计算定义：从现有的数据计算新的数据

例：

computed:{
rmsg(){
	return  this.msg.split(").reverse().jion('')
	}
}

---

监听

监听定义：监听数据的变换，并同时执行回调函数handler

watch:{
	"num":{
		handler(nval,oval){}
		deep:true
	}
}

---

自定义指令

bind 绑定执行一次
insert 插入执行一次
update 每次更新执行一次

directives：{
"v-focus":{
	update(el,binding){
		if(binding,value){
			el.focus()
			}
		}
	}
}

---

过滤-管道

过滤,管道(格式化数据)
使用：1.{{num|fix}} 2.{{num|fix(2)}} 3.v-text=“num|fix”

new Vue({
				el:"#app",
				data:{
					num:100
				},
				// 过滤,管道(格式化数据)
				filters:{
					// 过滤名称，value过滤前的值,arg管道的参数
					fix(value,arg=2){
						// 返回转为小数的值
						return value.toFixed(arg)
					},
					tel(value,arg="-"){
						var arr=String(value).split('');
						var str='';
						arr.forEach((item,index)=>{
							str+=item;
							if(index==2||index==6){
								str+=arg
							}
						})
						return str;
					}
				}
			})

filters:{
	fix(value,arg){
	return value.toFixed(arg)
	}
}
//保留小数点两位

---

动画

Vue动画再内置组件transition包裹，会自动再动画进入过程与离开过程添加类名

1. 内置组件

transition:
name 名称
mode：模式、in-out：先进再出、out-in：先出再进
enter-active-class：指定进入类名
leave-active-class：指定离开类名

2.动画类

v-enter-active：进入过程 v-enter：进入前 v-enter-to：进入后
v-leave-active：离开过程 v-leave：离开前 v-leave-to：离开后

3.创建动画形式
引用第三方动画库
指定进入的class与离开的class

<transition
enter-active-class="slideln aimated"
leave-active-class="hinge animated"
></transition>

---

组件

1.一段可以重复利用的代码块

<div id="app">
			<h1>全局组件</h1>
			<btn></btn>
			<btn></btn>
			<btn></btn>
</div>

// 定义一个全局的组件,名称是btn(那个vue实例可以适应)
		Vue.component("btn",{
			// 定义组件的模板
			template:`<button @click="num++">{{num}}</button>`,
			// 定义组件的data数据
			data(){
				return {num:1}
			}
		})
		var vm=new Vue({
			el:"#app",
			
		})
		console.log(vm)
		// vm是根组件(最基础的)实例

全局组件：上面那个例子就是全局组件

• 局部组件

const steper={template:``}

<div id="app">
			<h1>局部组件</h1>
			<p><steper></steper></p>
			<p><steper></steper></p>
			<p><steper></steper></p>
</div>

const steper={
			template:`
			<span>
				<button>-</button>
				<input type="text" v-model.number="n"/>
				<button @click="n++">+</button>
			</span>
			`,
			data(){
				return {n:1}
			}
		}
		
		new Vue({
			el:"#app",
			components:{steper}
		})

---

类绑定与样式绑定

• 类绑定是Vue的类属性方法

当对象的属性值为真，该属性作为class绑定
:class="{‘key1’:true,‘key2’:false}"
key1的值为真，key1会被绑定，key2不会

• 样式绑定
  属性名去掉-下个字母大写
  :style="{color:‘red’,‘fontSize’:’'48px}"