vue指令

v-bind

<template>
  <div>
    <!-- vue指令-v-bind -->
    <!-- v-bind:属性名="vue变量" -->
    <a v-bind:href="url">跳转到百度</a>
    <!-- 简写：:属性名="vue变量" -->
    <a :href="url">跳转到百度</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "http://baidu.com",
    };
  },
};
</script>

<style scoped>
</style>

v-on

<template>
  <div>
    <p>要买的商品数:{{ count }}</p>
    <!-- v-on -->
    <!-- v-on:事件名="要执行的==少量代码==" -->
    <button v-on:click="count = count + 1">增加1</button>
    <!-- v-on:事件名="methods中的函数" -->
    <button v-on:click="addFun">增加1</button>
    <!-- v-on:事件名="methods中的函数(实参)" -->
    <button v-on:click="addFunc(5)">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    addFun() {
      // this代表export default后面的组件对象(下属有data里return出来的属性)
      this.count++;
    },
    addFunc(num) {
      this.count += num;
    },
  },
};
</script>

<style scoped>
</style>

@事件名.修饰符="methods里函数

<template>
  <div @click="faFn">
    <!--@事件名.修饰符="methods里函数  -->
    <!--.stop - 阻止事件冒泡  -->
    <button @click.stop="btn">组织事件冒泡</button>
    <!-- .prevent - 阻止默认行为 -->
    <a href="http://baidu.com" @click.prevent="btn">阻止默认行为</a>
    <!-- .once - 程序运行期间, 只触发一次事件处理函数 -->
    <a href="http://baidu.com" @click.once="btn2">只执行一次</a>
  </div>
</template>

<script>
export default {
  methods: {
    faFn() {
      console.log("1");
    },
    btn() {
      console.log("2");
    },
    btn2() {
      console.log("3");
    },
  },
};
</script>

<style scoped>
</style>

v-on按键修饰符

<template>
  <div>
    <!-- v-on按键修饰符 -->
    <!-- @keyup.enter  -  监测回车按键 -->
    <input type="text" @keydown.enter="enterFn" />
    <!-- @keyup.esc     -   监测返回按键 -->
    <input type="text" @keyup.esc="enterFnc" />
  </div>
</template>

<script>
export default {
  methods: {
    enterFn() {
      console.log("1");
    },
    enterFnc() {
      console.log("2");
    },
  },
};
</script>

翻转案例（message报错）

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="btn">翻转</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "hello,world",
    };
  },
  methods: {
    btn() {
      // 拆分成字母
      const arr = this.message.split("");
      console.log(arr);
      // 翻转
      const arrRe = arr.reverse();
      console.log(arrRe);
      // 空字符串拼接
      message = arrRe.join(" ");
      console.log(message);
    },
  },
};
</script>

<style scoped>
</style>

v-model(看视频)

<template>
  <div @click="touch">
    <div>
      <!-- v-model 
 把value属性和vue数据变量, 双向绑定到一起 
v-model="vue数据变量" -->
      <span>来自：</span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="form">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
      </select>
    </div>
    <div>
      <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
      <span>爱好：</span>
      <input type="checkbox" v-model="hobby" value="抽烟" />抽烟
      <input type="checkbox" v-model="hobby" value="喝酒" />喝酒
      <input type="checkbox" v-model="hobby" value="烫头" />烫头
    </div>
    <!-- 
      .number   以parseFloat转成数字类型
      .trim          去除首尾空白字符
      .lazy           在change时触发而非inupt时
     -->
    <div>
      <span>年龄:</span>
      <input type="text" v-model.number="age" />
    </div>
    <div>
      <span>人生格言:</span>
      <input type="text" v-model.trim="motto" />
    </div>
    <div>
      <span>自我介绍:</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: "1",
      hobby: [],
      age: "",
      motto: "",
      intro: "",
    };
  },
  methods: {
    touch() {
      console.log("1");
    },
  },
};
</script>

<style scoped>
</style>

v-text和v-html

<template>
  <!--v-text和v-html
v-text="vue数据变量"
v-html="vue数据变量"
会覆盖插值表达式
  -->
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "<span>我是一个标签</span> ",
    };
  },
};
</script>

<style>
</style>

v-show和v-if（看视频）

<template>
  <!--v-show和v-if
v-show="vue变量"   
v-show 用的display:none隐藏   (频繁切换使用)
  -->
  <div>
    <h1 v-show="str">v-show</h1>
    <!-- 
      v-if="vue变量" 
      v-if  直接从DOM树上移除
     -->
    <h1 v-if="str">v-if</h1>
    <!-- v-else使用 -->
    <div>
      <p v-if="age > 18">v-if</p>
      <p v-else></p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: true,
      age: 15,
    };
  },
};
</script>

<style>
</style>

折叠面板案例

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span class="btn" @click="isshow = !isshow">
          {{ isshow ? "收起" : "展开" }}
        </span>
      </div>
      <div class="container" v-show="isshow">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isshow: false,
    };
  },
};
</script>

<style lang="less">
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
  }
}
</style>

v-for

<template>
  <div>
    <!-- 
      v-for
      v-for="(值, 索引) in 目标结构"
目标结构:可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
v-for的临时变量名不能用到v-for范围外
     -->
    <div>
      <p>学生姓名</p>
      <ul>
        <li v-for="(item, index) in arr" :key="item">{{ index }}-{{ item }}</li>
      </ul>
      <p>学生详细信息</p>
      <ul>
        <li v-for="obj in stuArr" :key="obj.id">
          <span>{{ obj.name }} </span>
          <span>{{ obj.sex }} </span>
          <span>{{ obj.hobby }} </span>
        </li>
      </ul>
    </div>
    <!-- v-for="值 in 目标结构" -->
    <p>序号</p>
    <div v-for="i in count" :key="i">{{ i }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小红", "小兰", "小绿"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      count: 10,
    };
  },
};
</script>

<style>
</style>