Vue笔记

vue

插件

• Vue 3 Snippets nollowtree

{{}}

标签体内，动态显示data变量或变量表达式
插值语法：用于解析标签体内容。

v-bind:(单向绑定)：数据只能从data流向页面

标签属性之前，动态绑定标签，标签字符串为data变量或变量表达式，简写为==:==
指令语法：用于解析标签（包括标签属性、标签体内容、绑定事件。。。），还有好多其他的v-???

v-model:(双向绑定)：数据不仅能从data流向页面，还可以从页面流向data

用于value属性之前
1.双向绑定一般都应用在表单类元素上（如：input、select等）；
2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。

el的两种写法

第一种：
const v = new Vue({
	el:'#root',//第一种写法
	data:{
		name:'尚硅谷'
	}
})
第二种：
const v = new Vue({
	data:{
		name:'尚硅谷'
	}
})
v.$mount('#root')//mount:挂载

data的两种写法

第一种：
const v = new Vue({
	el:'#root',
	//data的第一种写法，对象式
	data:{
		name:'尚硅谷'
	}
})
第二种：
const v = new Vue({
	el:'#root',
	//data的第二种写法，函数式
	data:function(){
		console.log(this)//此处this指的是vue实例对象。function函数不能写成箭头函数，如果为箭头函数，此处指向的是全局的window对象，箭头函数没有自己的this，往外找就找到了全局的window
		return{
			name:'尚硅谷'
		}
	}
})

v-on:事件绑定

v-on:xxx，xxx是事件名，简写为==@==
@click="demo"和@click="demo($event)"效果一致，但后者可以传参。没有传递参数时，会默认传递事件对象。如果传参，不会默认传递事件对象，想传递event对象的话，需要传递￥event参数。

事件修饰符(用于 click 等)

1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有 event.target 是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
例：@click.prevent=“showInfo” @事件名.事件修饰符=“方法名” 事件修饰符可以连着写

键盘事件(用于 keyup 、 keydown )

Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

例：@keydown.enter=“showInfo” @事件名.按键别名=“方法名” 键盘事件按键别名可以连着写

计算属性

computed(){} //简写(只有getter的时候)

监视属性

watch(){} 或 vm.$watch(‘被监视的属性’,{})

watch:{
	//完整写法
	属性（包含计算属性）:{
		//immediate:true // 初始化时让handler调用一下，（不需要）
		deep:true;//监视多级结构中所有属性的变化
		//handler(newValue,oldValue){
			console.log('xxx',newValue,oldValue)
		}
	}
	//简写(只有handler的时候)
	属性（包含计算属性）(newValue,oldValue){
		console.log('xxx',newValue,oldValue)
	}
}

深度监视：
1.Vue中的watch默认不监测对象内部值的改变（一层）；
2.配置deep:true可以监测对象内部值改变（多层）；
备注：
1.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以；
2.使用watch时根据数据的具体结构，决定是否采用深度监测。

computed和watch之间的区别

1.computed能完成的功能，watch都可以完成；
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作；
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组建实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象。