Vue uses htML-based template syntax that allows developers to declaratively bind DOM to the data of the underlying Vue instance.
At its core, Vue is a system that allows you to declaratively render data into the DOM using concise template syntax.
Combined with the response system, Vue can intelligently calculate the minimum cost of rerendering components when the application state changes and apply it to DOM operations
The interpolation
The text
The most common form of data binding is the use of {{… }} (double curly braces) text interpolation:
<div id="app">
<p>{{ message }}</p>
</div>
Copy the code{{… The contents of the}} tag will be replaced by the value of the message attribute in the corresponding component instance. If the value of the message attribute changes, {{… }} tag content is also updated.
If you do not want to change the contents of the label, you can perform a one-time interpolation using the V-once instruction. When the data changes, the contents of the interpolation will not be updated.
<span v-once> This will not change: {{message}}</span>Copy the codeHtml
Use the V-HTML directive to output HTML code:
<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script SRC ="https://unpkg.com/vue@next"></script> </head> <body> <div id="example1" class="demo"> <p> Text interpolation with double braces: {{rawHtml}}</p> <p> Use v-HTML instructions: <span v-html="rawHtml"></span></p> </div> <script> const RenderHtmlApp = { data() { return { rawHtml: <span style="color: red" style="color: red" style="color: red" </span>' } } } Vue.createApp(RenderHtmlApp).mount('#example1') </script> </body> </html>Copy the codeattribute
Values in HTML attributes should use the V-bind directive.
<div v-bind:id="dynamicId"></div>
Copy the codeFor Boolean properties, the normal value is true or false. If the property value is null or undefined, the property will not be displayed.
<button v-bind:disabled="isButtonDisabled">按钮</button>
Copy the codeIf isButtonDisabled is null or undefined in the code above, the disabled attribute will not even be included in the rendered element.
The following example determines the value of use, using class class1 style if true, otherwise not:
<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script src="https://unpkg.com/vue@next"></script> <style> .class1{ background: #444; color: #eee; } </style> </head> <body> <div id="app"> <label for=" R1 "> <br><br> <div v-bind:class="{'class1': Use}"> v-bind:class instruction </div> </div> <script> const app = {data() {return {use: false } } } Vue.createApp(app).mount('#app') </script> </body> </html>Copy the codeexpression
Vue.js provides full JavaScript expression support.
<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO'}} < br > {{message. The split (' '). The reverse () join (' ')}} < div v - bind: id = "' list - '+ id" > novice tutorial < / div > < / div > < script > const app = { data() { return { ok: true, message: 'RUNOOB!! ', id: 1 } } } Vue.createApp(app).mount('#app') </script> </body> </html>Copy the codeThe expression is parsed as JavaScript in the data scope of the current active instance. One limitation is that each binding can only contain a single expression, so none of the following examples will work:
<! {{var a = 1}} <! {{if (ok) {return message}}}Copy the codeinstruction
Directives are special attributes prefixed with v-.
Directives are used to apply certain behaviors to the DOM when the value of an expression changes. Here’s an example:
<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script SRC = "https://unpkg.com/vue@next" > < / script > < / head > < body > < div id = "app" > < p = "seen" > v - if you see me now < / p > < / div > < script > const app = { data() { return { seen: */}}} vue.createApp (app).mount('#app') </script> </body> </ HTML >Copy the codeHere, the V-if directive determines whether to insert the p element based on the value (true or false) of the expression seen.
There are many other instructions, each with a special function. For example, the V-for directive can bind an array of data to render a list of items:
<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <ol> <li v-for="site in sites"> {{ site.text }} </li> </ol> </div> <script> const app = { data() { return { sites: [ { text: 'Google' }, { text: 'baidu' }, { text: 'Taobao' } ] } } } Vue.createApp(app).mount('#app') </script> </body> </html>Copy the codeparameter
Parameters are specified with colons after instructions. For example, the V-bind directive is used to update HTML attributes in response:
<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script SRC = "https://unpkg.com/vue@next" > < / script > < / head > < body > < div id = "app" > < p > < a v - bind: href = "url" > test < / a > < / p > < / div > <script> const app = { data() { return { url: 'https://www.baidu.com' } } } Vue.createApp(app).mount('#app') </script> </body> </html>Copy the codeHere the href is the argument, telling the V-bind directive to bind the element’s href attribute to the value of the expression URL.
Another example is the V-ON directive, which listens for DOM events:
<! <a v-on:click="doSomething"> </a> <! < a@click ="doSomething">... </a> <! - the abbreviation of dynamic parameters (server +) - > < a @ [event] = "doSomething" >... </a>Copy the codeIn this case, the parameter is the name of the event to listen on.
The modifier
Modifiers are special suffixes indicated by semicontal periods., used to indicate that an instruction should be bound in a special way. For example, the.prevent modifier tells the V-ON directive to call event.preventDefault() for triggered events:
<form v-on:submit.prevent="onSubmit"></form>
Copy the codeUser input
In the input field we can use the V-model directive to implement two-way data binding:
<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> const app = { data() { return { message: 'baidu! ' } } } Vue.createApp(app).mount('#app') </script> </body> </html>Copy the codeThe V-model directive is used to create two-way data binding on input, SELECT, Textarea, checkbox, radio and other form control elements. The value of the bound element is automatically updated according to the value on the form.
Button events we can use V-ON to listen for events and respond to user input.
The following example reverses a string after the user clicks a button:
<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <button V-on :click="reverseMessage"> </button> </div> <script> const app = {data() {return {message: ' } }, methods: { reverseMessage() { this.message = this.message .split('') .reverse() .join('') } } } Vue.createApp(app).mount('#app') </script> </body> </html>Copy the codeabbreviations
V – short for bind
Vue.js provides special abbreviations for two of the most commonly used directives:
<! <a v-bind:href="url"></a> <! <a :href="url"></a>Copy the codeV – on abbreviation
<! <a v-on:click="doSomething"></a> <! <a @click="doSomething"></a>Copy the code