Vue.js框架详解-优快云博客

本文介绍了Vue.js框架的基本概念，包括声明式渲染、条件与循环、处理用户输入等核心功能，并探讨了组件化应用构建的方式。此外，还讲解了Vue实例的创建及数据响应性的原理。

2019独角兽企业重金招聘Python工程师标准>>>

Vue介绍

Vue.js是什么？

是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，与第三方库或既有项目整合方便。与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

声明式渲染

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

如：文本插值

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

如：绑定元素特性

<span v-bind:title="message">鼠标悬停查看动态绑定的提示信息</span>

说明：v-bind指令指：将这个元素节点的title特性和Vue实例的message属性保持一致。

指令：带有前缀v-，表示是Vue提供的特殊特性。它们会在渲染的DOM上应用特殊的响应式行为。

条件与循环

如：控制切换一个元素是否显示

<p v-if="seen">通过seen的值控制是否渲染该元素</p>

说明：不仅可以把数据绑定到DOM文本或特性，还可以绑定到DOM结构。此外，Vue也提供一个强大的过渡效果系统，可以在Vue插入、更新、移除元素时自动应用过渡效果。

如：v-for指令可以绑定数组的数据来渲染一个项目列表

处理用户输入

如：v-on指令添加一个事件监听器，通过它调用在Vue实例中定义的方法

<button v-on:click="clickHandler">单击事件监听器，单击时触发调用方法</button>

说明：clickHandler方法中，只需更新应用的状态，不需要碰触DOM，所有的DOM操作都由Vue来处理，编写的代码只需关注逻辑层面即可。

组件化应用构建

组件系统是Vue的一个重要概念，因为它是一种抽象，允许使用小型、独立和通常可复用的组件构建大型应用。任意类型的应用界面都可以抽象为一个组件树。

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

如：简单的Vue组件

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

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

如：从父作用域将数据传递到子组件，组件定义props

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

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

使用v-bind指令将待办项传到循环输出的每个组件中

<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>

Vue实例

创建一个Vue实例

每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的。

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

虽然没有完全遵守MVVM模型，但Vue的设计也受到了它的启发，在文档中经常会使用vm（ViewModel的缩写）这个变量名表示Vue实例。

当创建一个Vue实例时，你可以传入一个选项对象。如何使用这些选项来创建你想要的行为。

一个Vue应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

数据与方法

当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这些属性的值发生改变时，视图将会产生响应，即匹配更新为新的值。

当这些数据改变时，视图会进行重渲染。

注意：只有当实例被创建时 data 中存在的属性才是响应式的。所以如果添加一个新的属性，该属性值的改动不会触发任何视图的更新。因此，如果可预知在晚些时候需要一个属性，但是一个开始它为空或不存在，那么你仅需要设置一些初始值（如：''、0、false、[]、null）。

唯一的例外是使用 Object.freeze() ，这会阻止修改现有的属性，即响应系统无法再追踪变化。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

除了数据属性，Vue实例还暴露了一些有用的实例属性与方法（它们都由前缀$）。

实例生命周期钩子

每个Vue实例在被创建时都要经过一系列的初始化过程，如：需要设置数据监听、编译模版、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这样可以在不同阶段添加自己的代码。

生命周期钩子的 this 上下文指向调用它的Vue实例。

注意：不要在选项属性或回调上使用箭头函数，比如：

created: () => console.log(this.a) 或

vm.$watch('a', newValue => this.myMethod())

因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的Vue实例，经常导致：

Uncaught TypeError: Cannot read property of undefined 或

Uncaught TypeError: this.myMethod is not a function 之类的错误。

生命周期图示

转载于:https://my.oschina.net/happyran/blog/1943993

Vue.js学习笔记一

Vue介绍

Vue实例