1.v-bind 指令是绑定元素的属性,比方说img元素的src属性。如果是src属性不需要改变,那么就不需要使用v-bind去绑定,只有程序运行过程中需要改变数据更新img的时候,才需要使用v-bind。
具体使用如下:可以使用 v-bind:属性名 = “data里面定义的数据名称”,也可以简写成 :属性名 = “data里面定义的数据名称”
<div id="app">
<img :src="image" alt="" />
</div>
<script src="./vue.min.js"></script>
<script>
var vm = new Vue({
data: { image:"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2342083191,4139347491&fm=26&gp=0.jpg",
},
});
vm.$mount("#app");
</script>
2.v-for 用于循环数组,创建多个元素,需要注意的是为了提高效率,最好加上唯一的key,写法如下:
v-for="(item遍历的元素, i索引) in 数组" v-bind:key="唯一的key"
当然这里的v-bind可以省略掉不写,当然如果这里没有key,你用 :key = "i"也是可以的。
<ul>
<li v-for="(item, i) in products" :key="item.id">
{{item.name}}
<button @click="changeStock(item, item.stock-1)">-</button>
<span>{{item.stock > 0 ? item.stock : "无货"}}</span>
<button @click="item.stock++">+</button>
<button @click="deleteProduct(i)">删除</button>
</li>
</ul>
3.v-on 绑定事件 完整写法是 v-on:事件名称,比方说click事件,可以使用v-on:click,这里也有简写的方法,比方说 v-on:click 可以写成 @click,@click="可以是方法的代码,也可以是调用某个方法"。
4.data的写法,一共有下面两种
方式一
data() {
return {
index: 0, // 当前显示的是第几张轮播图
containerHeight: 0, // 整个容器的高度
switching: false, // 是否正在切换中
};
},
方式二
data:()=>({
}),