Vue.js详解（一）_综合

Vue.js详解

一、介绍

vue.js是什么

Vue是一套渐进式框架。
它只关注视图层，便于与第三方库或既有项目整合。
当与现代化工具链和各种类库结合时，Vue也能创建复杂的单页应用。

使用vue.js

? 有三种使用vue.js的方式，具体如下：

cdn引入

直接下载并引用标签引入时，Vue会被注册为全局变量。

开发环境

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

命令行工具vue-cli

? Vue官方提供了一个cli命令行构建工具，可以快速搭建SPA单页应用的脚手架，可以很快生成一个带有热更新的生产环境可用的构建版本。
NPM

? 构建大型应用时最好使用NPM安装，因为NPM能够很好的整合webpack或Browserify等模块。提供配套工具开发单文件组件。
```
#最新稳定版本
npm install vue
```

声明式渲染

? vue中使用一个简洁地模板语法将数据渲染进DOM系统，类似于渲染字符串模板。

? 首先创建一个Vue的实例，并将dom元素与实例的el属性绑定起来。

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

var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
})

? 模板用{{}}表示，模板中的变量和Vue实例中的data绑定在一起。所有东西都是响应式的，当改变app.message时，页面视图中的文本也相应更新。

? 绑定有三种形式：

元素文本值 {{val}}
元素属性 v-bind:attribute=“val”
元素结构 v-if = “seen”

组件化

? 组件（构件）相当于一个小功能模块，但是这个模块在浏览器中是可见的，例如一个导航栏可以抽象为一个组件，组件中即包含了视图，也包含了业务逻辑。一个大的组件由若干小组件组成，一个页面由很多不同的组件组成。组件具有高度的解耦性和可复用性。

? 在Vue中，一个组件相当于预定义选项的Vue实例，要创建一个组件，首先需要注册组件（预定义）：

// 定义名为 todo-item 的新组件，实际就是添加一个组件预定义选项用于创建此组件
Vue.component('todo-item', {// todo-item 组件现在接受一个"prop"，类似于一个自定义特性// 这个 prop 名为 todo。props: ['todo'],template: '<li>{{ todo.text }}</li>'
})var app = new Vue(...)

<ol><!-- 创建一个 todo-item 组件的实例 --><todo-item></todo-item>
</ol>

现在，可以将父组件中的值传入到子组件中，用于循环生成子组件。

<div id="app-7"><ol><!--现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”，稍后再作详细解释。--><todo-itemv-for="item in groceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item></ol>
</div>

var app7 = new Vue({el: '#app-7',data: {groceryList: [{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '随便其它什么人吃的东西' }]}
})

? 可以注意到，父子组件之间的唯一接口是prop,此时父子组件高度解耦，今后子组件逻辑的更改并不会影响到父组件。

二、Vue实例

创建实例

? 每个Vue应用通过用Vue函数创建实例开始：

var vm = new Vue({// 选项
})

一个Vue应用由根实例以及可选的嵌套的组件树组成。如下：

根实例
└─ TodoList├─ TodoItem│  ├─ DeleteTodoButton│  └─ EditTodoButton└─ TodoListFooter├─ ClearTodosButton└─ TodoListStatistics

数据与方法

实例数据

? 当vue实例创建时，data对象被绑定进入Vue响应式系统中，data对象属性的改变会导致视图的更新。注意只有实例创建时data的属性才是响应式的，后加入data的属性不具有此特性。

// 我们的数据对象
var data = { a: 1 }// 该对象被加入到一个 Vue 实例中
var vm = new Vue({data: data
})// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

实例属性和方法

? Vue实例暴露了一些有用的实例属性和方法，它们以前缀 $开头，如$ data、 $el,$ watch等。

生命周期钩子

? 每个Vue的实例在创建时会经历一系列初始化的过程，如设置数据监听、编译模板、实例挂载dom、更新dom节点等操作，这些操作都有不同的发生时机，这就是生命周期钩子，利用钩子，可以在不同阶段添加和执行用户的代码，执行一定的逻辑。

生命周期钩子：

created
mounted
updated
destroyed

注：this上下文指向调用它的vue实例。箭头函数中没有this,所以不要使用箭头函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dqYnSENR-1574763894204)(C:\Users\舒琨博\Documents\学习笔记\vue生命周期.png)]

模板语法

? Vue使用了基于原始html的模板语法，允许将dom绑定至vue实例的数据，因为vue会在背后做很多事，将模板编译成虚拟dom渲染函数，减少dom的操作次数。

插值

文本插值
原始HTML插值
属性插值

遇到需要绑定dom属性的情况，需要用到v-bind指令：
```
<div v-bind:id="dynamicId"></div>
```

绑定的两种格式：

数据

js表达式 (有返回值的)

<div v-bind:id="'list-' + id"></div>
<div{{ number + 1 }}div>

指令

? 指令是dom上带有v-前缀的特殊特性，当表达式值改变时，产生一定的影响，响应作用于dom。

常用指令如下：

v-bind: attribute = “val”
v-if =“val”
v-on: event = “method”

指令的三要素：

参数

一些指令可以接收参数，在指令名称后以冒号表示。
动态参数
修饰符modifier

以半角句号.指明的特殊后缀，指出指令的特殊方式绑定。如.prevent表示阻止默认提交表单事件。
```
<form v-on:submit.prevent="onSubmit">...</form>
```

计算属性

? 模板内的表达式可以用于简单运算，当当运算逻辑变复杂时，应该考虑更加优雅的计算属性。

计算属性

#臃肿的计算逻辑
<div id="example">{{ message.split('').reverse().join('') }}
</div>

? 计算属性通过computed特性来实现：

var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {// 计算属性的 getter,当message变化时，reversedMessage也会变化reversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}
})

? 有一点需要明白，计算属性会进行缓存操作，即会对计算出的值进行缓存，只要响应依赖message没有发生变化，就不会重新执行函数计算值，直接返回缓存的值，这有助于减少大量的方法计算。

? 计算属性可以设置setter来反过来更新响应依赖的值。

侦听器

? 当数据变化时要执行异步或开销较大的操作时，使用vue提供的自定义监听器watch更好。

参考文献：
Vue.js官方文档: https://cn.vuejs.org/index.html