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 实例下）
• data 中数据更新会触发页面响应式渲染，只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
• 创建的 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>

指令(directive)

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

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

参数：

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

修饰符：

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

所有指令：

文本与html渲染：

• v-text：更新元素的 textContent
• v-html：更新元素的 innerHTML

**条件渲染：**根据条件显示/隐藏元素，通常布尔值 true 表示显示、false 表示隐藏

• v-show：
• v-if：
• v-else-if：
• v-else：

列表渲染：

• v-for：循环列表渲染

<li v-for="item in array"></li>
<li v-for="item of array">in 与 of 作用相同</li>
<li v-for="(item, index) in array"></li>
<li v-for="value in object