vue入门（一）

模板语法

1. 插值语法
   功能：用于解析标签体内容
   写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2. 指令语法
   功能：用于解析标签（包括：标签属性、标签内容、绑定事件......）。
   举例：v-bind: href = "xxx"或简写为 :href="xxx"，xxx同样是js表达式，且可以直接读取到data中的所有属性。

     <!-- v-bind:可简写为: -->
     v-bind: ===》：
   

数据绑定

1. 单项数据绑定
   使用v-bind进行绑定是单向的，数据只能从data流向页面。
2. 双向数据绑定
   使用v-model进行绑定是双向的，数据不仅能从data流向页面，也能从页面流向data。并且v-model只能应用在表单类元素（输入类元素），v-model: value可简写为v-model，因为v-model默认收集的就是value值。

el与data的两种写法

1. el有两种写法
   • new Vue时候配置el属性
   • 先创建Vue实例，随后再通过vm.$mount("#root")指定el的值
2. data有两种写法
   • 对象式
   • 对象式
     在app.vue中（根组件）采用对象式写法，其他（子组件）中采用函数式

数据代理

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

事件处理

• 使用v-on : xxx或@xxx绑定事件，其中xxx是事件名
• 事件的回调需要配置在methods对象中，最终会在vm上
• methods中配置的函数，都是被Vue所管理的函数
• @click="demo”和@click="demo($event)”效果一致，但后者可以传参

事件修饰符

• prevent：阻止默认事件（常用）
• stop：阻止事件冒泡（常用）
• once：事件只触发一次（常用）
• capture：使用事件的捕获模式
• self：只有event.target是当前操作的元素时才触发事件
• passive：事件的默认行为立即执行，无需等待事件回调执行完毕
  先进行事件捕获再进行事件冒泡，一般在事件冒泡阶段处理事件
  修饰符可以连着写，如@click.stop.prevent

键盘事件

键盘事件可分为两种，分别是keydown与keyup（在keyup中也可以连写，如@keyup.alt.y，即在同时按下alt和y键有效）

1. Vue中常用的按键别名：
   • 回车==》enter
   • 删除==》delete（捕获删除和退格键）
   • 退出==》esc
   • 空格==》space
   • 换行==》tab（与keydown使用方有效）
   • 上==》up
   • 下==》down
   • 左==》left
   • 右==》right
2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要转为kebab-case（短横线命名）
3. 系统修饰符（用法特殊）：ctrl、alt、shift、meta（win键）
   • 配合keyup使用：按下修饰键的同时，再按其他键，随后释放其他键，事件才会触发
   • 配合keydown使用：正常触发事件

计算属性

1. 在利用vue方法中，只要data中的数据发生改变，则vue一定会重新解析模板，并更新数据。
2. 原理：底层借助了objcet.defineproperty方法提供的getter和setter.
3. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
4. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。