vue life cycle, vue instance, template syntax

This time I will bring you vuelife cycle, vue instance, template syntax, what are the precautions when using vue life cycle, vue instance, template syntax, the following is the actual combat Let’s take a look at the case.

Vue has developed from a silent niche framework to one of the three major frameworks in China since its birth, and also from the initial version to the current 2.5.13 (stable version as of 2018.1.26 2014 to 2018).

真题

Vue.js is a very popular JavaScript MVVM library. It is built with data-driven and componentized ideas. Compared with Angular.js, Vue.js provides a simpler and easier-to-understand API, allowing us to quickly get started and use Vue.js.

Since I introduced the installation of vue and the basic configuration of webpack in the previous blog, I will introduce vue and the use of vue in this article.

If you have been accustomed to using jQuery to operate the DOM before, please put aside the idea of ​​​​manipulating the DOM manually when learning Vue.js, because Vue.js is data-driven, and you do not need to manually operate the DOM. It binds DOM and data through some special HTML syntax. Once you create the binding, the DOM will stay in sync with the data, and whenever the data changes, the DOM will be updated accordingly.

Of course, when using Vue.js, you can also use it in conjunction with other libraries, such as jQuery.

If you think the content of this article is good, please like it. I will upload the demo to github later. If you think it is acceptable, please like it. Thank you.

干物

If you want to learn vue, please have intermediate knowledge of HTML, CSS and JavaScript.

If you are just starting to learn front-end development, using a framework as your first step may not be the best idea - master the basics before coming back! Previous experience with other frameworks is helpful, but not required. (Original words from the official website).

1. The first step, vue life cycle table

It is absolutely necessary to understand the vue life cycle table to learn it

Annotate the official website life cycle icon to deepen the understanding Impression and understanding (source network diagram with address)

2. vue instance

Every Vue application starts by creating a new Vue instance using the Vue function:

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

3. Instance life cycle hook

Each Vue instance must go through a series of initialization processes when it is created - such as setting data binding, passing method parameters, mounting the instance to the DOM, and Update DOM when data changes, etc. At the same time, some functions called life cycle hooks are run during the process, allowing you to add your own code at different stages.

For example, the mounted hook can be used to execute code after an instance is created:

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

There are also some other hooks that are called at different stages of the instance life cycle, such as updated and destroyed. The this context of a lifecycle hook points to the Vue instance that called it.

3. Template syntax

Vue.js uses HTML-based template syntax, allowing developers to declaratively bind the DOM to the data of the underlying Vue instance. All Vue.js templates are legal HTML and can be parsed by browsers and HTML parsers that follow the specification.

In the underlying implementation, Vue compiles the template into a virtual DOM rendering function. Combined with the responsive system, Vue can intelligently calculate how many components need to be re-rendered and minimize the number of DOM operations.

If you are familiar with virtual DOM and prefer the raw power of JavaScript, you can also write render functions directly without templates, using optional JSX syntax. (Original words from the official website)

3.1. Text interpolation

The most common form of data binding is text interpolation using "Mustache" syntax (double curly brackets):

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

The Mustache tag will be replaced with the value of the msg attribute on the corresponding data object. Whenever the msg property of the bound data object changes, the content at the interpolation point is updated.

vue is the default two-way binding. If you do not want two-way binding, please use the v-once command for one-time data, but please be careful that it affects all data binding on the node:

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

3.2. Original HTML

Double curly braces will interpret the data as ordinary text instead of HTML code. In order to output real HTML, you need to use the v-html directive:

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

Arbitrary HTML rendered dynamically on your site can be very dangerous, as it can easily lead to XSS attacks. Only use HTML interpolation for trusted content and never for user-supplied content.

3.3. Using JavaScript

Expression

So far, in the vue template, vue has only bound simple attribute key values. But in fact, for all data binding, Vue.js provides full JavaScript expression support.

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

3.4. Instructions

Instructions are special attributes with v- prefix. The value of a directive attribute is expected to be a single JavaScript expression (v-for is the exception). The responsibility of a directive is to reactively apply its associated effects to the DOM when the value of an expression changes. Looking back at the examples we saw in the introduction

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

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

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

v-on缩写:

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

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

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

相关阅读：

一次前端面试的经历

前端微信分享jssdk config:invalid signature 签名错误的解决方法

前端入门之css3

The above is the detailed content of vue life cycle, vue instance, template syntax. For more information, please follow other related articles on the PHP Chinese website!