vue life cycle, vue instance, template syntax-JS Tutorial-php.cn

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({
  // 选项
})

Copy after login

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(&#39;a is: &#39; + this.a)
  }
})
// => "a is: 1"

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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 ? &#39;YES&#39; : &#39;NO&#39; }}
{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
<div v-bind:id="&#39;list-&#39; + id"></div>

Copy after login

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>

Copy after login

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

元素。

3.4.1、参数

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

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

Copy after login

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

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

Copy after login

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

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缩写: