What are the operation methods of vue interpolation
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.
