vue-sgg

开发环境

npm create vue@2 # yarn 可能会报错

模板语法

插值语法

• 功能：用于解析标签体内容
• 写法：{{ xxx }}，xxx 是 js 表达式，且可以直接读取到 data 中的所有属性

指令语法

• 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）
• 形式：v-指令名

单向数据绑定

• 完整语法：v-bind:属性="xxx"
• 简写语法：:属性="xxx"

xxx 是 js 表达式，且可以直接读取到 data 中的所有属性

<a :href="url">简写</a>

<a v-bind:href="url">完整写法</a>

双向数据绑定

• 完整语法：v-model:value="xxx"
• 简写语法：v-model="xxx"

只能应用在表单类元素（输入类元素上，有 value 属性）

<div>双向数据绑定：<input type="text" v-model:value="name" /></div>
<div>双向数据绑定：<input type="text" v-model="name" /> (简写)</div>

绑定事件

• 完整语法：v-on:事件名="xxx"
• 简写语法：@事件名="xxx"

事件修饰符

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

data 与 el 的两种写法

el 的两种写法：

• new Vue() 时，配置 el 属性
• 先创建 Vue 实例，随后再通过 vm.$mount('#root') 来指定 el

data 的两种写法：

• 对象式
• 函数式

由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不是 Vue 实例了。

MVVM 模型

• M 模型（Model）：对应 data 中的数据
• V 视图（View）：模板
• VM 视图模型（ViewModel）：Vue 实例对象

数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）。

• vue 中的数据代理：通过 vm 对象来代理 data 对象中属性的操作（读/写）
• vue 中数据代理的好处：更加方便地操作 data 中的数据
• 基本原理：通过 Object.defineProperty() 把 data 对象中所有属性添加到 vm 上，并为其指定一个getter/setter。在 getter/setter 内部去操作 data 中对应的属性。

监视属性

• 当被监视的属性变化时，回调函数自动调用，进行相关操作
• 监视的属性必须存在
• 监视的两种写法：
  • new Vue() 时，传入 watch 配置
  • 通过 vm.$watch() 监视
• 可监视属性和计算属性

计算属性和监视属性的区别

• 计算属性能完成的，监视属性都可以完成
• 监视属性能完成的，计算属性不一定能完成，比如：监视属性可以进行异步操作
• 原则：
  • 所有被 vue 管理的函数，都写成普通函数，不要写成箭头函数，这样 this 的指向才是 vm 或组件实例对象
  • 所有不被 vue 管理的函数（定时器回调函数、AJAX 的回调等），最好写成箭头函数，这样 this 的指向才是 vm 或组件实例对象

条件渲染

v-if

• 写法：
  • v-if="表达式"
  • v-else-if="表达式"
  • v-else
• 适用于：切换频率较低的场景。
• 特点：不展示的 DOM 元素直接被移除。
• 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

v-show

• 写法：v-show="表达式"
• 适用于：切换频率较高的场景。
• 特点：不展示的 DOM 元素未被移除，仅仅是使用样式隐藏掉

备注：

• 使用 v-if时，元素可能无法获取到，而使用v-show一定可以获取到。

• <template> 做条件渲染时，只能使用 v-if

vue 监视数据的原理

• vue 会监视 data 中所有层次的数据
• 对象数据的监视：通过 setter 实现监视，且要在 new Vue 时就传入要监视的数据
  • 对象中后追加的属性，vue 默认不做响应式处理
  • 如需要给后添加的属性做响应式，需要使用如下 API：
  • Vue.set(target, propertyName/index, value)
  • vm.$set(target, propertyName/index, value)
• 数组数据的监视：通过包裹数组更新元素的方法实现，本质就是做了两件事：
  • 调用原生对应的方法对数组进行更新
  • 重新解析模板，进而更新页面
• 修改数组数据的方法
  • 使用这些 API：push()、pop()、shift()、unshift()、 splice()、sort() 和 reverse()
  • Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给 vm 或其根数据对象添加属性！

生命周期