vue生命周期、vue实例、模板语法

这次给大家带来vue生命周期、vue实例、模板语法，使用vue生命周期、vue实例、模板语法的注意事项有哪些，下面就是实战案例，一起来看一下。

vue从出生到现在，从一个默默小众型的框架发展成为现在国内的三大框架之一，也从最初的版本到现在的2.5.13(稳定版截止2018.1.26日 2014到2018)。

正题

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

由于在前面博客里面我介绍了vue的安装还有关于webpack的基本配置，那这篇文章我问就说介绍vue、以及vue的使用。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

如果您觉得本篇内容不错，请点个赞，后续我会把demo传到github上，觉得可以请点赞，谢谢。

干货

如果你想学vue请具备 HTML、CSS 和 JavaScript 的中级知识。
如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。(官网原话)。

1、第一步、vue生命周期表

学好vue生命周期表是绝对要看懂的

将官网生命周期图示进行注解，以加深印象和理解(来源网络图附上地址)

2、vue实例

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

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

登录后复制

3、实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——比如在设置数据绑定、方法传参将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在过程中也就运行了一些叫做生命周期钩子的函数，可以在不同的阶段添加自己的代码的机会。

比如 mounted 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
  data: {
    a: 1
  },
  mounted: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

登录后复制

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

3、模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。(官网原话)

3.1、文本插值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

登录后复制

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

vue是默认的双向绑定，若不想双向绑定，一次性数据的请用指令 v-once 指令，不过请小心影响到该节点上所有的数据绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

登录后复制

3.2、原始 HTML

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

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

登录后复制

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

3.3、使用 JavaScript 表达式

迄今为止，在vue的模板中，vue一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

登录后复制

3.4、指令

指令是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子

<p v-if="seen">现在你看到我了</p>

登录后复制

v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

3.4.1、参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url">...</a>

登录后复制

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

登录后复制

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

3.4.2、缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind缩写:

<!-- 完整语法 --><a v-bind:href="url">...</a><!-- 缩写 --><a :href="url">...</a>

登录后复制

v-on缩写:

<!-- 完整语法 --><a v-on:click="doSomething">...</a><!-- 缩写 --><a @click="doSomething">...</a>

登录后复制

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

相信看了本文案例你已经掌握了方法，更多精彩请关注Work网其它相关文章！