Instruction is a very important function in the Vue, the Vue project is essential. The official website describes instructions (Directives) is a special property with v- prefix. Duty instruction that also affect when the value of the expression, which is produced responsively acting DOM.
E.g:
<p v-if="seen">现在你看到我了</p> Shown above: wherein, v- Vue identification is, if a command ID, yes is expression. MVVM is yes in the ViewModel VM i.e., when its value changes, will trigger command to change the display view View.
expression may also be used inline mode, dependent upon any property changes will trigger execution of the instruction. E.g:
<p v-if="'seen '+ user.name + ', ' + time"></p> Here we talk about common commands
Data rendering v-text, v-html, v-model, {{}}
1、v-text
v-text plain text for the operation, it will override the value displayed on the corresponding data object. When the value of the data object bound to change, the content will be updated at the interpolation. Note: This is a one-way binding, changes in the value of the data object, interpolation will change; but when the interpolation change does not affect the value of the data object. Where: v-text can be abbreviated as {} {}, and support logic operations. E.g:
<div id="app">
{{ message }}
</div>
var app = new Vue({
el : '#app',
data : {
message : 'hello world' } }) NOTE: vue has called the v-once instruction may be bonded via v-once with v-text, performing only one-time interpolation to achieve
<span v-once>这个将不会随msg属性的改变而改变: {{ msg }}</span> 2, v-html
v-html for outputting html, it v-text except that the v-text output is a plain text, the browser will not html parsing them further, but v-html html tags will be resolved when its output.
<div id="app">
<p v-html="html"></p> </div> var app = new Vue({ el: "#app", data: { html: "<b style='color:red'>v-html</b>" } }); 3, in the model
v-model commonly used to form binding components, e.g. input, select the like. It differs in that v-text form bi-component binding its implementation, if the label for control other than the form is of no use.
<div id="app">
<input v-model="message " /> </div> var app = new Vue({ el : '#app', data : { message : 'hello world' } }) 4、{{}}
{{}} Is a short form of v-text
The control module Show / Hide v-if, v-show
v-if "real" conditions rendering, because it will ensure that the event listener and sub-components within the conditional block is destroyed and rebuilt properly in the handover process.
v-show much simpler - no matter what the initial conditions, the elements will always be rendered, and simply based on the CSS switch.
In general, v-if higher switching overhead, and v-show a higher initial cost of rendering.
Therefore, if the switching is very frequently used is preferably v-show; if at runtime condition is unlikely to change, then using v-if preferred.
<template>
<div id="app"> <div v-if="isIf"> if </div> <div v-show="ifShow"> show </div> <button @click="toggleShow">toggle</button> </div> </template> <script> export default { name: 'app', data() { return { isIf : true, ifShow : true, loginType : "username" } }, methods: { toggleShow : function(){ this.ifShow = this.ifShow ? false : true; this.isIf = this.isIf ? false : true; } } } </script> Render list of v-for circulation
v-for instruction is a loop, it is generally combined with the array, for example:
<p id="wantuizhijia">
<ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </p> <script> new Vue({ el: '#wantuizhijia', data: { sites: [ { name: '网推之家' }, { name: '谷歌' }, { name: '淘宝' } ] } }) </script> We can also use the v-for in the template:
<p id="wantuizhijia">
<ul> <template v-for="place in places"> <li>{{ place.name }}</li> <li>--------------</li> </template> </ul> </p> <script> new Vue({ el: '#wantuizhijia', data: { places: [ { name: '厦门' }, { name: '漳州' }, { name: '福州' } ] } }) </script> v-for iteration may be a property of the data object by:
<p id="wangtuizhijia">
<ul> <li v-for="value in object"> {{ value }} </li> </ul> </p> <script> new Vue({ el: '#wangtuizhijia', data: { object: { name: '汇票盟', url: 'http://www.pjmeng.com', slogan: '美好生活，等待你的开创！' } } }) </script> v-for to iterate through the data attribute of an object can be provided as the second parameter keys:
<p id="wangtuizhijia">
<ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </p> <script> new Vue({ el: '#wangtuizhijia', data: { object: { name: '汇票盟', url: 'http://www.pjmeng.com', slogan: '美好生活，等待你的开创！' } } }) </script> v-for data to iterate through the properties of an object, the third parameter is the index:
<p id="wangtuizhijia">
<ul> <li v-for="(value, key, index) in object"> {{ index }} {{ key }}:{{ value }} </li> </ul> </p> <script> new Vue({ el: '#wangtuizhijia', data: { object: { name: '脚本之家', url: 'www.jb51.net', slogan: '美好生活，等待你的开创！' } } }) </script> v-for loop may be an integer
<p id=”wangtuizhijia”>
<ul> <li v-for=”n in 10″> {{ n }} </li> </ul> </p> <script> new Vue({ el: ‘#wangtuizhijia' }) </script> </body> Event binding v-on
1, listen for DOM events, typical is the v-on: click, on the methods of approach to property in default pass a parameter.
<button @click="test">点击</button>
methods: {
test: function (evt) {
console.log(evt);
}
}
Evt here is the standard mouse click events, similar to jquery click event callback function parameters.
You can find the data in the value of the property by this, for example:
data: {
items: "test"
},
methods: {
test: function (evt) { console.log(this.items); console.log(evt); } } Here this.items, this variable is the data of the items.
2, the statement associated processor
to v-on event pass a fixed parameter
<button @click="test('a')">点击搜索age</button> When this time, the first parameter of the function is not a mouse click event, but rather a string
test: function (mes) {
console.log(mes);
}
mes value is 'A'
$ event
if you need to give him a mouse click event as above, then use the $ event as a parameter (the default mouse and he does not pass the event object parameters are the same).
Vue instance variables used, if desired a data transfer properties in the value of the attribute name is placed directly
example:
<div id="app">
<a href="http://www.baidu.com" @click="test(items, $event)">点击搜索age</a> </div> <script> var test = {name: "test"}; var vm = new Vue({ el: '#app', data: { items: "test" }, methods: { test: function (msg, evt) { console.log(msg); evt.preventDefault();//阻止默认动作，比如这里是页面跳转 } } }) </script> Output: test and BUTTON
These are the instructions Vue common usage, we want to help.