01、初识 Vue
- 想让 Vue 工作,就必须创建一个 Vue 实例,且传入一个配置对象;
- root 容器里面的代码依然符合 html 语法,只不过混入了一些特殊的语法;
- root 容器里面的代码被称为【Vue 模板】;
- 容器和 vue 实例一对一关系 ;
- 真实开发中只有一个 vue 实例,并且会配合组件一起使用;
- {{xxx}}中要写 js 表达式,且 xxx 可以自动读取到 data 中的所有属性;
- 一旦 data 中的数据发生改变,页面中 使用该数据的地方也会改变。
02、Vue 模板语法
vue 模板语法有两大类:
插值语法:
功能:用于解析标签体内容;
写法:{{xxx}},xxx 是 js 表达式,且可以直接读取到 data 中的所有属性;
指令写法:
功能:用于解析标签等(包括:标签属性、标签体内容、绑定事件…);
举例:v-bind:href=“xxx” 或 简写为 :href=“xxx” 同样 xxx 要写 js 表达式,且可以直接读取到 data 中的所有属性;
备注:vue 中有很多的指令,且形式都是:v-???,此处我们只拿 v-bind 举个例子
03、数据绑定
Vue 中有两种数据绑定的方式:
单向绑定(v-bind):数据只能从 data 流向页面;
双向绑定(v-model) :数据不仅能从 data 流向页面,还可以从页面流向 data;
备注:
- 双向绑定一般都应用在表单类元素上(如:input、select 等);
- v-model:value 可以简写为 v-model,因为 v-model 默认收集的就是 value 值。
04、el 与 data 的两种写法
el 有两种写法
- new Vue 时候配置 el 属性;
- 先创建 Vue 实例,然后通过 vm.$mount(‘#root’)指定 el 的值;
data 有两种写法
对象式
函数式
使用组件时,data 必须使用函数式,否则会报错。
注意:由 Vue 管理的函数,一定不要写箭头函数,一旦写了箭头函数,this 就不再是 Vue 实例了。
05、MVVM模型
MVVM模型:
- M:模型(Model):data中的数据
- V:视图(View):模板代码
- VM:视图模型(ViewModel):Vue实例
备注:
- data中所有的属性,最后都出现在vm身上;
- vm身上所有的属性及Vue原型上所有的属性,在Vue模板中都可以直接使用。
06、数据代理
回顾Object.defineProperty方法
Object.defineProperty(person, 'age', {
// value: '18',
// enumerable: true, //控制属性是否可以枚举,默认值是false
// writable: true, //控制属性是否可以被修改,默认值是false
// configurable: true //控制属性是否可以被删除,默认值是false
// 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
get() {
console.log('有人读取age属性');
return number;
},
// 当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
set(value) {
console.log('有人修改age属性');
number = value;
}
})
何为数据代理
let obj = { x: 100 }
let obj2 = { y: 200 }
// 数据代理:通过一个对象代理对另一个对象中属性的操作(读 / 写)
Object.defineProperty(obj2, 'x', {
get() {
return obj.x;
},
set(value) {
obj.x = value
}
})
Vue中的数据代理
Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
Vue中数据代理的好处:
更加方便的操作data中的数据
基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。
07事件处理
事件的基本使用
- 使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
- 事件的回调需要配置在methods对象中,最终会在vm上;
- methods中配置的函数,不要使用箭头函数!否则this就不是vm了;
- methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
- @click=“demo” 和 @click=“demo($event)” 效果一致,但后者可以传参;
事件修饰符
- 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.自定义键名=键码,也可以去定制按键别名
评论区