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-item
      v-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,所以不要使用箭头函数。

模板语法

​ 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