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.自定义键名=键码，也可以去定制按键别名
评论区