Vue 入门

Vue

MVC

Model - View - Controller

MVVM

Model - View - ViewModel

使用

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。

Object.defineProperty() – 数据劫持

两种版本

• 开发版本

通常用于开发阶段，会在控制台抛出错误及警告信息

• 生产版本

用于生产环境 ，删除了警告

直接引入

使用 <script src=""> 引入

本地引入：下载 vue.js 文件，本地引入指定的文件

CDN：引入一个网络中的 vue.js 文件

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>

声明式渲染

<div id="app">
  {{ message }}
</div>

const vm = new Vue({
    el: '#app',
    data: {
        message: 'hello'
    }
})

Vue 实例

所有的 Vue 应用都从创建 Vue 实例开始，在创建 Vue 实例时，传递一个选项对象参数：

const vm = new Vue({
    el: '#app', // 指明 Vue 实例所关联的视图节点
    data: { // 数据，用于在关联的视图节点中渲染的数据
        message: 'hello'
    },
    methods: { // 方法，函数
        show() {
            return 'show'
        }
    }
})

在选项对象中的 el 属性，会根据对应的选择器创建出 DOM 节点对象，使用 $el 名称挂载到创建的 Vue 实例对象下（可使用 vm.$el 访问dom元素）；

选项对象的 data 属性，会使用 $data 名称直接挂载到创建的 Vue 实例下（可使用 vm.$data 访问）；

选项对象中的 data 数据，会将各属性直接挂载到创建的 Vue 实例对象下（可直接使用 vm.message 来访问 data 中的 message 数据），如果 data 中的数据属性名以 $ 开头，则不会挂载到 Vue 实例下

选项对象中 methods 方法，会挂载到创建的 Vue 实例下

语法

• {{ expression }} – 文本插值

双花括号中的表达式是 JS 表达式的内容，该表达式中使用到的是 Vue 实例能够直接调用到的属性、方法…，如果表达式的内容为 html 文本字符串，{{ }} 会实现转义，不会渲染成 html 节点结构，预防 xss 攻击。

• v-html 指令

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

指令就是在标签中以 v- 开头的属性，是在 Vue 中特殊定义的，有特定含义的属性，指令的属性值也是 JS 的表达式

• v-text 指令：渲染为普通文本
• v-bind 指令：动态绑定节点的属性值

在 html 元素的属性中，不能使用 {{ }} 语法来绑定属性值，需要使用 v-bind 指令来动态绑定。v-bind 可以简写为 :