vue学习总结

最新推荐文章于 2022-03-22 21:44:46 发布

原创最新推荐文章于 2022-03-22 21:44:46 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

数据绑定

单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

备注：双向绑定一般用在表单类元素上（如：input，select等）；v-model默认收集的就是value值

el和data的两种写法

el的两种写法

new Vue时候配置el属性

//  写法1
const v = new Vue({
   el: '#root',
   data: {
   	name: 'zhangsan'
   }
})

先创建Vue实例。随后通过vm.$mount(’#root’)指定el的值

//  写法2
const v = new Vue({
   data: {
   	name: 'zhangsan'
   }
})
v.$mount('#root')

data的两种写法

new Vue({
	el:'#root',
	//data的第一种写法：对象式
	/* data:{
		name:'尚硅谷'
	} */
	//data的第二种写法：函数式
	data(){
		console.log('@@@',this) //此处的this是Vue实例对象
		return{
			name:'zhangsan'
		}
	}
})

MVVM模式

M：模型（Model）：data中的数据
V：视图（View）：模板代码
VM：视图模型（ViewModel）：Vue实例

data中的所有属性，最后都出现在了vm身上
vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用

vue中的数据代理

vue中的数据代理
通过vm对象来代理data对象中属性的操作（读/写）
vue数据代理的好处
更加方便操作data中的数据
基本原理
通过object.defineProperty() 把data对象中所有属性添加到vm中。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性

事件处理

事件的回调配置在methods对象中，最后会在vm上；
methods中配置的函数，不要用箭头函数，否则this不是vm了；
methods中配置的函数，都是vue所管理的函数，this指向是vm或组件实例对象；
@click="demo"和 @click=“demo($event)” 效果一致，后者可以传参

Vue中的事件修饰符

prevent：阻止默认事件
stop：阻止事件冒泡
once：事件只出发一次
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

键盘事件

Vue中常用的按键别名：

 - 回车：enter；
 - 删除：delete；
 - 退出：esc；
 - 空格：space；
 - 换行：tab；（特殊，必须配合keydown去使用）
 - 上：up；
 - 下：down；
 - 左：left：
 - 右：right：

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为 kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、meta
（1）配合 keyup 使用：按下修饰键同时，再按下其他键，随后释放其他键，事件才被触发。
（2）配合keydown使用：正常触发事件
使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名