Vue uses HTML-based template syntax, which allows developers to declaratively bind DOM to the data of the underlying Vue instance.
The core of Vue is a system that allows you to use concise template syntax to declaratively render data into DOM.
Combined with the response system, when the application state changes, Vue can intelligently calculate the minimum cost of re-rendering components and apply it to DOM operations. 2.7.2. Text The most common form of data binding is to use the {{...}} text interpolation (double curly braces):Text interpolation < divid = "app" >< p > {{ message }} p >div > The content of the {{...}} tag will be replaced with the value of the message attribute in the corresponding component instance. If the value of the message attribute changes, the content of the {{...}} tag will also be updated.
If you do not want to change the contents of the tag, you can use the v-once the instruction performs one-time interpolation, and when the data changes, the contents of the interpolation are not updated.
< span v - once > This will not change : {{ message }} span > 2.7.3. Html Use v-html instruction is used for output html code:
v-html instruction < divid = "example1" class = "demo" >< p > Text interpolation using double curly braces : {{ rawHtml }} p >< p > Use v - html Order : < spanv - html = "rawHtml" >span >p >div >< script > const RenderHtmlApp = { data () { return { rawHtml : ' red ">This will display red！ ' } } } Vue . createApp ( RenderHtmlApp ) . mount ( '#example1' ) script > 2.7.4. Attribute The value in the HTML property should use the v-bind instructions.
< div v - bind : id = "dynamicId" >div > For Boolean attributes, the regular values are either true or false . If the attribute value is null or undefined , the attribute will not be displayed.
< button v - bind : disabled = "isButtonDisabled" > button button > If in the above code isButtonDisabled the value of null or undefined , then disabled properties are not even included in the rendered element. The following example determines use if the value is true use class1 class, otherwise the class is not used
v-bind instruction < divid = "app" >< labelfor = "r1" > Modify Color label >< inputtype = "checkbox" v - model = "use" id = "r1" >< br >< br >< divv - bind : class = "{'class1': use } ">v-bind:class order </div> <p> The expression will be parsed as JavaScript within the data scope of the current activity instance. There is a limitation that each binding can only contain a single expression, so the following examples will not take effect: </p> <div class= "highlight-default notranslate" > <div class= "highlight" > <pre><span></span> <!-- This is a statement, not an expression：--> {{ var a = 1 }}
{{ if (ok) { return message } }} 2.7.6. Instruction The instruction is with v- the special property of the prefix.
Directive is used to apply certain behaviors to the DOM when the value of the expression changes. Examples are as follows:
Example < divid = "app" >< pv - if = "seen" > Now you see me p >div >< script > const app = { data () { return { seen : true / \* Change to false , the information cannot be displayed \*/ } } } Vue . createApp ( app ) . mount ( '#app' ) script > Here, the v-if instruction will determine whether to insert the p element based on the value of the expression seen ( true or false ).
There are many other instructions, each with a special function. For example, v-for the command can bind the data of the array to render a list of items:
Example < div id = "app" > < ol > < li v - for = "site in sites" > {{ site . text }} li > ol > div > < script > const app = { data () { return { sites : [ { text : 'Google' }, { text : 'Runoob' }, { text : 'Taobao' } ] } } } Vue . createApp ( app ) . mount ( '#app' ) script > 2.7.7. Parameters. The parameter is indicated by a colon after the instruction. For example, the v-bind instruction is used to update HTML attributes in response:
Example < divid = "app" >< p >< av - bind : href = "url" > Rookie Tutorial a >p >div >< script > const app = { data () { return { url : 'https://www.runoob.com' } } } Vue . createApp ( app ) . mount ( '#app' ) script > Here href is a parameter, inform v-bind instruction sets the element s href attributes and expressions url the value binding.
Another example is the v-on instruction, which is used to listen for DOM events:
Here, the parameter is the name of the listening event.
2.7.8. Modifier The modifier is a full stop in half a corner. A special suffix specified to indicate that an instruction should be bound in a special manner. For example, .prevent ihe modifier tells you v-on instruction is called for the triggered event event.preventDefault() :
< form v - on : submit . prevent = "onSubmit" >form > 2.7.9. User input In input the input box, we can use v-model directive to implement two-way data binding
Bidirectional data binding < divid = "app" >< p > {{ message }} p >< inputv - model = "message" >div >< script > const app = { data () { return { message : 'Runoob!' } } } Vue . createApp ( app ) . mount ( '#app' ) script > v-model instruction is used in input , select , textarea , checkbox create bidirectional data binding on form control elements such as radio, and automatically update the values of the bound elements based on the values on the form.
Button event we can use the v-on listens for events and responds to user input.
The following example reverses the string after the user clicks the button:
String inversion Vue Test Example - Rookie Tutorial(runoob.com) {{ message }}
Invert String 2.7.11. v-bind abbreviations Vue.js provides special abbreviations for the two most commonly used instructions: