模板语法
- 插值语法
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 - 指令语法
功能：用于解析标签（包括：标签属性、标签内容、绑定事件……）。
举例：v-bind: href = “xxx”或简写为 :href=”xxx”，xxx同样是js表达式，且可以直接读取到data中的所有属性。
v-bind: ===》：
数据绑定
- 单项数据绑定
使用v-bind进行绑定是单向的，数据只能从data流向页面。 - 双向数据绑定
使用v-model进行绑定是双向的，数据不仅能从data流向页面，也能从页面流向data。并且v-model只能应用在表单类元素（输入类元素），v-model: value可简写为v-model，因为v-model默认收集的就是value值。
el与data的两种写法
- el有两种写法
- new Vue时候配置el属性
- 先创建Vue实例，随后再通过vm.$mount(“#root”)指定el的值
- data有两种写法
- 对象式
- 对象式
在app.vue中（根组件）采用对象式写法，其他（子组件）中采用函数式
数据代理
- vue中的数据代理
通过vm对象来代理data对象中属性的操作(读/写) - Vue中数据代理的好处
更加方便的操作data中的数据 - 基本原理
通过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键有效）
- Vue中常用的按键别名：
- 回车==》enter
- 删除==》delete（捕获删除和退格键）
- 退出==》esc
- 空格==》space
- 换行==》tab（与keydown使用方有效）
- 上==》up
- 下==》down
- 左==》left
- 右==》right
- Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要转为kebab-case（短横线命名）
- 系统修饰符（用法特殊）：ctrl、alt、shift、meta（win键）
- 配合keyup使用：按下修饰键的同时，再按其他键，随后释放其他键，事件才会触发
- 配合keydown使用：正常触发事件
计算属性
- 在利用vue方法中，只要data中的数据发生改变，则vue一定会重新解析模板，并更新数据。
-
原理：底层借助了objcet.defineproperty方法提供的getter和setter.
-
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。
Original: https://www.cnblogs.com/pengpi/p/15951414.html
Author: 默π
Title: vue入门（一）
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/576448/
转载文章受原作者版权保护。转载请注明原作者出处！