目录

• • • Vue 插值语法与实例化
    • v-bind 模板绑定
    • 双向数据绑定
    • el 和 data 的另一种写法->使用原型格式
    • MVVM 模型
    • 数据代理
    • 事件处理
    • 事件修饰符
    • 键盘事件

Vue 插值语法与实例化

1. 以对象形式声明 vue 实例 v
2. 在 data(){}方法的 return 内写入我们需要注册的属性，以 key value 键值对的形式！
3. {{name}} 插值语法格式，双大括号里面写 data 中定义的变量名称
4. createApp(v) 注册 Vue 实例 v
5. mount(‘#v’) 我们看到顶部 div 的 id 为 v，那么这条代码就是将 vue 实例的作用域控制于拥有该 id 的标签上

这是我的名字:{{name}}

v-bind 模板绑定

1. 专门绑定元素属性
2. v-bind 后接元素属性，即可将属性内容变成 data 里面的变量（此时无需双大括号）
3. v-bind:可以简写为一个冒号 :

123456 // 完整形式 123456 //
简写格式

双向数据绑定

1. 单向数据绑定：使用 v-bind，只有后台修改值能影响网页内容，反过来不行
2. 双向数据绑定：使用 v-model，后台和网页内容完全同步，任何一方修改都会影响对方
3. 注意，v-model 仅可以对表单内部（即输入类）属性使用！
4. v-model:value=““可以简写为 v-model=””，因为 v-model 的默认附加属性就是 value
5. v-model.lazy 表示触发 change 事件后才执行数据同步
6. v-model.number 自动将数据转换成数值形式后才同步
7. v-model.trim 自动清除用户输入的空白字符

单向数据绑定： 双向数据绑定：

el 和 data 的另一种写法->使用原型格式

已下方代码为例，若我们直接使用 console.log(v)将会输出 v 实例的内容，在开发者模式下，我们点开该 vue 实例，里面加了
美元符号$的是我们可以操作的内容，而加了短下划线的是 vue 底层实现内容
最重要的是属性 proto 它是 vue 的原型

1. $mount 可以直接指定该 vue 实例挂载的元素，代替 el
2. data 的另一种写法就是函数式写法（这种写法的好处是可以在函数内部通过 this 取得当前 vue 实例）

MVVM 模型

1. M 模型(model):对应 data 内部数据
2. V 视图(view):对应模板
3. VM 视图模型(viewmodel):对应 vue 实例对象

设目前有 vue 实例名称为 vm，则有以下性质

1. data 中的所有属性都出现在 vm 身上
2. vm 身上所有的属性，以及 vue 实例中原型（proto）中的所有属性都可以直接作为模板调用

数据代理

以 JS 代码作为示例

1. Object.defineProperty 设置单个数据代理（所谓代理就是让某个对象代替某个对象执行操作）
2. 第一个参数为欲执行代理的对象，第二个参数为被执行对象的属性
3. 第三个参数则写 getter 和 setter 方法，他表示当我调用对象 obj2 时应当执行的动作
4. 因为 obj2 为 obj1 的代理，且重写了 obj2 的 getter、setter 方法，故执行 obj2.x 时返回 100

以 vue 作为示例
假设目前有 vue 实例 vm，则

1. 实例对象 vm 实际上是作为数据域 data 的代理而出现的
2. vm.name === vm._data.name 从实例对象 vm 中取出 data 中的属性可以按照左边两种形式的写法
3. 使用插值语法时，也可以按照上方格式来写，因为插值语法实际上就是对实例 vm 的调用！！！

{{_data.name}}
{{name}}

事件处理

所谓事件处理，就是为 vue 实例内增加一些方法，方法全部写在 methods 里面

1. 所有 methods 内的方法都写普通函数而最好避免写箭头函数
2. 箭头函数的 this 指向 window； 而普通函数的 this 指向当前所在的 vue 实例对象
3. v-on:click=““或者简写@click=”” 用来指定元素点击后使用的方法，双引号内直接写方法名称即可
4. v-on 内部的方法如果要传参，务必加上小括号，不传参的直接省略小括号

事件修饰符

vue 中最常用的事件修饰符

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

特殊：
@click.prevent.self 会阻止元素本身及其子元素的点击的默认行为
@click.self.prevent 只会阻止对元素自身的点击的默认行为

阻止默认事件
阻止事件冒泡
事件只会被触发一次

passive 和滚轮事件解析

1. @wheel=“” 事件：每检测到一次鼠标滚轮滚动就触发一次方法；
2. @scroll=“” 事件：鼠标滚轮滚动和滑动条滚动都可以触发该方法
3. 给 wheel 加了 passive 修饰后，无需等待 show 回调方法执行完毕，就可马上执行 wheel 的初始动作（即滚动内容下移）

键盘事件

按下某个案件即触发方法，最常用的是@keyup

1. 常见键代码：enter 回车 delete 退格 esc 退出 space 空格 tab 换行
2. 在常见键代码中，除了 tab 必须使用@keydown 触发，其他都使用@keyup 触发
3. 对于控制性按键如 ctrl alt shift 等
4. 对于控制性按键，@keyup 表示按下修饰键后再按下其他键，待其他键松开后才触发事件
5. 对于控制性按键，@keydown 表示正常触发事件