A, vue instructions
(1) v-if // 条件判断 如果条件成立就在页面上生成一个标签并显示出来
(2) v-show //DOM中都存在只是显示与否
(3) v-for //注意 v-bind:key=数据唯一值 、优先级高
例:
<ul>
<li v-for="(item, index) in fruit" v-bind:key="index">
<input type="number" v-model.number="item.num">
- {{ item.name }}
<span style="color: red" v-if="item.num == 0">卖完啦！</span>
<button v-on:click="add(index)">+1</button>
</li>
</ul>
methods:{
add(index){}
}
(4) v-bind(可以简写成冒号 :) // 将标签的某个属性与Vue实例里的数据属性绑定
<a :href="url"></a>
(5) v-on(可简写成 @) // 绑定事件
<a @click="doSomething"></a>
例:
<button v-on:click="add(index)">+1</button>
methods: {
add(index){
this.fruit[index].num += 1;
}
}
(6) v-model // 双向数据绑定 获取用户输入的标签 <==> Vue实例里的数据属性
修饰符:v-model.number.lazy =>number强制转换为数字,lazy光标失去焦点后执行
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
(7) 阻止默认事件
<!--通过form中默认回车提交,但还需要清除掉form的默认的提交事件;
调用自定义的addThing事件-->
<form action="" v-on:submit.prevent="addThing"></form>
(8) 数组删除元素 splice
// 根据索引删除数组中的数据splice(元素索引,删除几个)=>1,
// 则删除当前元素;不写则删除当前元素及后面的所有
delThing(index) {
this.things.splice(index, 1)
},
(9) v-text 文本
(10) v-html // 输出html代码Second, the difference place
The difference between 1. v-if's and v-show
In general, v-if higher switching consumption v-show higher initial rendering consumption. So, if you need frequent switching v-show is better, if the conditions are unlikely to change at runtime v-if better.
2. Calculate the difference between the properties and methods
Results computed attribute data has not changed directly before use; the method is performed each time
is computed based on its dependency cache, will be re-evaluated only if its dependencies change. The use of methods, re-rendering, the function will always be re-called.
3. Calculate the difference between the listener properties and
Listener applies to those when a value is changed, I'm going to do something this scenario; other scenarios are used to calculate property on it
4. v-on of modifier
(1) stop - stop the event bubbling
Example: A button to add not stop, B button to add a stop. A click on the button, the console will appear in two 1. B Click the button, the console appears only a 1.
<div id="app">
<div style="width: 100px;height: 100px;background-color: #008000;"
v-on:click="show">
<button v-on:click="show">A</button>
<button v-on:click.stop="show">B</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
methods:{
show(){
console.log("1")
}
}
})
</script>(2) prevent - prevent the default event
Example: A link to the default event is to jump to baidu.com, adds prevent, click A, the default event is invalid. B is also a default event links to jump to baidu.com, after adding with prevent the expression, click B, jump event is invalid, but show an effective method to manually add the console display 1, because the show is not a default event.
<div id="app">
<a href="http://www.baidu.com/" v-on:click.prevent>A</a>
<br />
<a href="http://www.baidu.com/" v-on:click.prevent="show">B</a>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
methods:{
show(){
console.log("1")
}
}
})
</script>(3) native - a native event listener components of the root element
<div id="app">
<mycomponent v-on:click.native="myfn"></mycomponent>
</div>
<script type="text/javascript">
Vue.component('mycomponent',{
template:`<a href="#">点我</a>`
})
var vm = new Vue({
el: '#app',
methods:{
myfn(){
console.log(1);
}
}
});
</script>