Mustache, simple instructions, v-bind, compute properties
1 Interpolate Mustache
The syntax of {{}} is mustache syntax
<body> <!--mustache You can write simple expressions--> <div id="app">{{message}} <h2>{{first +' '+ second}}</h2> <h2>{{counter*3}}</h2> <!--6--> </div> </body> <script> const app=new Vue({ el:'#app', data:{ message:'Hello', first:"123", second:"aaa", counter:2 } }) </script>
2 Interpolation related simple instructions (Understanding)
2.1 v-once
Adding the element of v-once, the content called through mustache is not responsive.
<div id="app" v-once>{{message}}</div>
When the page opens, the content displayed on the page remains unchanged when the message in the corresponding vue object data changes.
2.2 v-html
<div id="app"> <h2 v-html="url"></h2> </div> </body> <script src="js/vue.js"></script> <script> const app=new Vue({ el:'#app', data:{ url:"<a href='http://Www.baidu.com'>Baidu Baidu once</a>" } }) </script>
Sometimes the data returned by the server is an HTML element, and we want to display it on a page and parse it using v-html.
2.3 v-text
<h2 v-text="message"></h2>
Similar to {{message}}, but the contents of the v-text overwrite the original text content of the element.
2.4 v-pre
<div id="app" v-pre>{{message}}</div> <!--Displayed as{{message}}-->
V-precauses the contents of an element to appear without parsing
2.5 v-cloak
If the js section executes slowly, the mustache expression on the page is displayed on the page without parsing, and the user sees {{message}} as such.If you don't want this to happen, use v-cloak.
The v-cloak attribute is special, and it exists before parsing and disappears after parsing.
Use this feature to use attribute selectors for style control.
<style> /*v-cloak The attributes are special, they exist before parsing and disappear after parsing.*/ [v-cloak]{ display: none; } </style> <body> <div id="app" v-cloak>{{message}}</div> </body> <script src="js/vue.js"></script> <script> setTimeout(function () { const app=new Vue({ el:'#app', data:{ message:'Hello' } }) },2000) </script>
3. v-bind
3.1 Simple use
Used for binding properties
<body> <!--Not available in element attributes mustache grammar--> <div id="app"> <img v-bind:src="imgURL" alt=""> <a :href="aHref">Use Baidu Search</a> </div> </body> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:'#app', data:{ imgURL:"https://tse1-mm.cn.bing.net/th/id/OIP.IikXywhLteyZSd8rc2ByLAHaEo?w=172&h=108&c=7&o=5&dpr=1.25&pid=1.7", aHref:"http://www.baidu.com" } }) </script>
Many of the pictures and links in development are not written to death but come back from the server.
v-bind is abbreviated as a colon':'
3.2 class Assignment Example
You can use objects to assign values when Binding class properties with v-bind, for example
:class="{active:isActive,line:isLine}
The element class attribute contains active when the isActive value in the data corresponding to the vue object is true.When the isLine attribute value is true, the element class attribute contains line.
Classes bound with v-bind and self-defined class es can be merged
<style> [class="active"]{ color: red; } [class="line"]{ color: blue; } </style> <body> <div id="app"> <!-- title Values will remain--> <h2 :class="{active:isActive,line:isLine}" class="title">How do you do</h2> <button @click="colorToggle">Button</button> </div> </body> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:'#app', data:{ message:'Hello', isActive:true, isLine:false }, methods:{ colorToggle:function () { this.isActive=!this.isActive; this.isLine=!this.isLine; } } }) </script>
v-bind supports function binding if the bound object is too long
Define function in methods, return value of bind function
getClasses:function () {
return {active:this.isActive,line:this.isLine}
}
<h2 :class="getClasses()">How do you do</h2>3.3 class example 2
Requirements: Display an array with li, click which turns red, and restore the other lis.The first Li is red in initial state
Key section: "{active:index==currentIndex}"
<style> [class="active"]{ color: red; } </style> <body> <div id="app"> <ul> <li v-for="(m,index) in movies" :class="{active:index==currentIndex}" @click="change(index)" >{{m}}</li> </ul> </div> </body> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:'#app', data:{ movies:["The ghost is coming","Naruto",'One Piece','The attacking J517Titan'], currentIndex:0 }, methods:{ change:function (index) { this.currentIndex=index; } } }) </script>
3.4 v-bind and style
Two grammars: object grammar and array grammar.
Why do you want to bind styles? Because different people need different styles to use the same component for component-based development, they can't write to death.
<!--key value is the attribute name and value of css. The attribute name can be a slash bar connection or a hump. It has been tested that he does not know the slash bar-->
<!--:style="{fontSize:'50px'} Without single quotation marks, he treats 50px as a variable in data--><div id="app"> <h2 :style="{fontSize:'50px'}">{{message}}</h2> </div> </body> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: "123" } }) </script>
Array syntax
:style="[{color:'red'},{fontSize:'50px'}
4 Computing attributes
4.1 Basic Use
Calculating attributes themselves is also attributes, and functions like this are actually written on their get methods
Computing attributes is more efficient than methods
<div id="app"> <h2>{{FullName}}</h2> </div> </body> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { firstName: 'Tom', lastName: "Jerry", }, methods: { getFullName() { return this.firstName + " " + this.lastName }, //Computing attributes computed: { FullName: function () { return this.firstName + " " + this.lastName } } } }) </script>
4.2 Example
Get the price of the book list array and
<body> <div id="app">{{totalPrice}}</div> </body> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:'#app', data:{ books:[ {id:110,name:"The Da Vinci Code",price:130}, {id:110,name:"Code Complete",price:120}, {id:110,name:"Deep understanding of Computer Principles",price:110}, {id:110,name:"Modern Operating System",price:100} ] }, computed:{ totalPrice:function () { return this.books.reduce(function (pre,cur,index){ return (pre.price||pre)+cur.price; }) } } }) </script>
4.3 setter and getter
A complete computational property should have both set and get attributes, since only the get method is generally implemented, this is the case
testComputed:{ set:function () { }, get:function () { } }
The set method is called automatically when you assign a calculated property
4.4 Cache of computed properties
There is a cache inside the calculated property, and the calculated result will not be called if it remains unchanged.Methods writes are computed separately, so when there are many duplicate elements, the computed attributes are faster than methods.
<div id="app"> <h2>{{getNum()}}</h2> <h2>{{getNum()}}</h2> <h2>{{getNum()}}</h2> <h2>{{getNum()}}</h2> <h3>{{Num}}</h3> <h3>{{Num}}</h3> <h3>{{Num}}</h3> <h3>{{Num}}</h3> </div> </body> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:'#app', data:{ message:'Hello' }, methods:{ getNum:function () { console.log("Method"); return 3; } }, computed:{ Num:function () { console.log("Computing attributes"); return 2; } } }) </script>
You can see that the computed attribute was executed only once, and the method was executed more than once.
