Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you what are the relevant knowledge points about the operation of vue interpolation, the content is detailed, and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Vue interpolation operations are: 1, use Mustack syntax, syntax "{{value}}"; 2, use v-once instruction; 3, use v-html instruction, you can output html code; 4, use v-text instruction to display data in the interface; 5, use v-pre instruction; 6, use v-cloak instruction.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Six interpolation operations in Vue

The first kind: Mustache

Mustache syntax (that is, double curly braces).

Mustache: beard / beard. (beard grammar)

The data is responsive.

Document {{message}}, world! {{counter * 2}} {{message} {{counter}} let app = new Vue ({el:'# app', data: {message: 'Hello', counter:200} Methods: {}})

The second kind: v-once

This instruction does not need to be followed by any expression (for example, the previous v-for is followed by an expression)

This directive indicates that elements and components are rendered only once and do not change as the data changes.

Document {{message}} {{message}} let app = new Vue ({el:'# app', data: {message: 'Hello'}})

The third kind: v-html

The data requested from the server is itself a HTML code

This instruction is often followed by a string type, which parses the html of string and renders it.

Document {{link}} {{link}} let app = new Vue ({el:'# app', data: {link: 'Baidu'}})

The fourth kind: v-text

The function of v-text is similar to that of Mustache: both are used to display data in the interface

V-text typically accepts a string type

Document {{message}} {{message}} let app = new Vue ({el:'# app', data: {message: 'Hello', message2:'World'}})

The fifth kind: v-pre

V-pre is used to skip the compilation of this element and its child elements and to display the original Mustache syntax.

Document {{message}} {{message}} let app=new Vue ({el:'#app', data: {message:'Hello'})

The sixth kind: v-cloak

It may be obvious that uncompiled Mustache tags come out directly.

Cloak: cloak

Document [v-cloak] {display: none } Hello, {{name}} Hello, {{name}} setTimeout (() = > {let app=new Vue ({el:'#app', data: {name:'World'}})} 10000) these are all the contents of the article "what are the operating methods of vue interpolation?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.