vue初始学习

MVVM
M - Model，数据

V - View，视图

VM - ViewModel，关联 Model 与 View，实现数据双向绑定：View 的变动会自动反映到 ViewModel，ViewModel 会自动通知 Model 更新，反之，Molde 的变化也会自动反映到 ViewModel 中，ViewModel 会通知 View 实现重新渲染。

Vue
官网

尤雨溪

现行两种版本：v2.x 与 v3.x，目前 3.x 的版本成为了默认版本。

渐进式 JavaScript 框架

兼容性：Vue 2.x 不支持 IE8 及以下版本，因为 Vue2.x 使用了 IE8 无法模拟的 ECMAScript 5 特性(Object.defineProperty())

安装
使用 <script src=""> 方式在页面中引入
开发版本：包含完整的警告和调试模式

生产版本：经过压缩混淆，删除了警告等信息，有更小的体积

npm install
Vue CLI
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

Vue 实例
var vm = new Vue({
  // 选项对象 option
  el: '', // element
  data: { // 是在模板语法中需要处理渲染的数据
    message: ''
  },
  methods: { // 是在 vue 实例中需要调用到的一些方法
    methodName() {}
  }
})
说明：

data 是需要在模板中渲染处理的数据
添加到 data 中的各属性（字段）会被自动挂载到创建的 vue 实例下（但以 $ 或 _ 开头的不会被挂载到 vue 实例下）
创建的 vue 实例中可以使用 $data 获取到选项中 data 对象的引用
创建的 vue 实例中可以使用 $options 获取到选项对象
创建的 vue 实例中可以调用 $el 获取到渲染后的 DOM 节点
添加到 methods 中的各方法会被自动挂载到 vue 实例下，在方法中的 this 指向的是当前所创建的 Vue 实例本身
模板语法
Vue.js 使用了基于 HTML 的模板语法

插值
文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

<div>
  {{ JS expression }}
</div>
注意，{{ exp }} 内部添加的是 JS 的表达式，如：{{ 5 }}、{{ message }}、{{ 3 + 2 - 5 * 0 }}，不能使用如 if-else、while 等语句。

{{ exp }} 不会解析 html 文本内容，而是会将 html 文本转义为普通文本渲染。目的是避免 XSS 攻击。

**v-text 指令：**渲染普通文本

原始 html
要渲染原始 html，使用 v-html 指令：

<div v-html="htmlText">
</div>
请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值(v-html)。

属性(Attribute)
使用 v-bind 指令来动态绑定属性值：在绑定属性值时，不能使用 {{}} 语法。

v-bind 可以缩写为 :，如：

<div v-bind:title="title">这是一个 div</div>
<div :title="title">这是一个 div</div>
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute（是在标签中添加的有特殊意义的属性，这个属性以 v- 开头），指令值是一个 JS 表达式。

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

参数：
是在 指令名称 后使用 : 连接的。

所有指令：
文本与html渲染：

v-text：更新元素的 textContent
v-html：更新元素的 innerHTML
**条件渲染：**根据条件显示/隐藏元素，通常布尔值 true 表示显示、false 表示隐藏

v-show：
v-if：
v-else-if：
v-else：
列表渲染：

v-for：循环列表渲染
事件绑定：

v-on：绑定事件，可缩写为 @
属性绑定：

v-bind：动态绑定标签的属性值，可缩写为 :
双向绑定：

v-model：表单双向绑定
插槽：

v-slot：
其它：

v-pre：
v-cloak：这个指令保持在元素上直到关联实例结束编译。通常将这个指令与 CSS 规则结合一起使用：[v-cloak] { display: none; }，可以隐藏未编译的 Mustache 标签直到实例准备完毕。（解决从未编译显示html模板到编译完毕显示渲染结果之间的闪烁效果）。
v-once：只渲染一次

计算属性(computed)
模板内的表达式应该是进行简洁运算操作，如果运算逻辑比较复杂，就可以使用 计算属性 来实现。

在选项对象中，使用 computed 字段来表示计算属性。

const options = {
    completedCount: { // 已完成数量
        get() {
            return this.todos.reduce((result, todo) => todo.completed ? result + 1 : result, 0)
        },
    },
    // 可简写为
    // completedCount() { // 已完成数量
    //   return this.todos.reduce((result, todo) => todo.completed ? result + 1 : result, 0)
    // },
}
计算属性(computed) VS 方法(methods)(面试)
计算属性有缓存，而方法没有缓存（计算属性是基于它们的响应式依赖进行缓存的），即只要依赖项不发生变化，计算属性就会一直使用之前运算的结果，而调用方法将总会再次执行函数。
计算属性通常是无副作用的，而方法中可以包含副作用操作（如：发送网络请求）
侦听属性(watch)
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。

在选项对象中使用 watch 来表示。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

条件渲染
v-if、v-show、v-else-if、v-else

v-if 与 v-show 区别(面试)：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。（v-if 操作的是 DOM 节点的销毁与重建）

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。（v-show 操作的是节点的 css 属性中的 display）

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染
v-for

数组更新
变更方法
push() / pop()
unshift() / shift()
splice()
sort() / reverse()
调用这些方法后，原数组本身会受影响，所以视图会响应式渲染

替换数组
当调用非变更方法时，可以使用新数组替换旧数组，来实现渲染

v-for 与 v-if 一起使用(面试)
注意我们不推荐在同一元素上使用 v-if 和 v-for

Vue2.x 中当它们处于同一节点，v-for 的优先级比 v-if 更高，Vue3.x 中当它们处于同一节点，v-if 的优先级比 v-for 更高

事件处理
在事件指令值中直接书写表达式
引用事件方法名称
内联处理器中调用方法，显式传递参数，可以用特殊变量 $event 把它传入方法，在方法体内部就可以使用到事件event对象了
事件修饰符：
.stop - 阻止事件传播
.prevent - 阻止默认行为
表单输入绑定
v-model

创建双向数据绑定

v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
组件化应用构建
组件系统：它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

定义并使用组件
定义选项对象
const options = {
  template: '', // 视图模板
  data() {
    return {}
  },
  computed: {},
  methods: {},
}
template 定义的是组件的视图模板，在 template 中应该使用唯一的单个根元素包裹布局结构
data 必须是一个函数**(面试)**，在函数体内部返回一个普通对象
注册组件
全局注册：

Vue.component(componentName, options)
局部注册：

使用组件
使用组件名称作为自定义标签名，在模板中引用标签