4.vue的指令和基础知识

119 阅读1分钟

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:()=>({

  }),