Vue指令介绍及使用

目录

一、什么是指令

二、插值表达式 

三、vue中常用 v-指令

1.v-bind 

2.v-on 

 3.v-model

 4. v-text 与 v-html

 5.v-show 和 v-if

---

一、什么是指令

        在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头 。

二、插值表达式 

        在dom标签中直接插入内容，又叫声明式渲染/文本插值。

        语法：{{ 表达式 }}

        注意：dom中插值表达式赋值, vue的变量必须在data里声明

三、vue中常用 v-指令

1.v-bind 

• 作用：给标签属性设置vue变量的值。
• 语法：v-bind:属性名="vue变量"  或  :属性名="vue变量"

• <!-- vue指令-v-bind属性动态赋值 -->
  <a v-bind:href="url">我是a标签</a>
  <img :src="imgSrc">

2.v-on 

• 作用：给标签绑定事件
• 语法：v-on:事件名='要执行的代码(少量)'
             v-on:事件名='methods方法中的函数'
             v-on:事件名='methods方法中的函数(实参)'
          简写： @事件名='methods函数

• <p>{{ count }}</p>
  <button v-on:click="fn(5)">+5</button>
  
  <script>
  export default {
      data(){
          return {
              count:1
          }
      }
      methods: {
              fn(num){
                  this.count += num
              },
          }
      }
  </script>

• v-on修饰符
  在事件后面.修饰符名 - 给事件带来其他功能
  语法：@事件名.修饰符='methods函数'
          .stop --- 阻止事件冒泡
          .prevent --- 阻止默认行为
          .once --- 程序运行期间，只触发一次事件处理函数
• 按键修饰符
  语法：
          @keyup.enter --- 检测回车按键
          @keyup.esc --- 监测退出按键
  更多：事件处理 — Vue.js

 3.v-model

• 作用：双向数据绑定，数据变化与视图同步，视图变化与数据同步
• 语法：v-model='变量'

• <select v-model="from">
   <option value="北京市">北京</option>
   <option value="南京市">南京</option>
   <option value="天津市">天津</option>
  </select>
  
  <script>
  export default {
      return {
        from='',
    }
  }
  </script>

  注意：在 input 的多选框中，变量为数组则绑定的是value属性里的值，为非数组则绑定的是checked属性(true/false)

• v-model修饰符
  语法：v-model.修饰符=‘变量’
          .number 以parseFloat形式转成数字型
          .trim 去除首尾空白字符
          .lazy 在change时触发而不是在input时

 4. v-text 与 v-html

• 作用：更新DOM对象的innerText/innerHTML
• 语法：
          v-text='变量'
          v-html='变量'
  注意：会覆盖插值表达式
• 区别：v-text把值当成普通字符串显示, v-html把值当做html解析

• <template>
    <div>
      <p v-text="str"></p>
      <p v-html="str"></p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        str: "<span>我是一个span标签</span>"
      }
    }
  }
  </script>

 5.v-show 和 v-if

• 作用：
  v-show 用display:none方式隐藏dom (频繁切换使用)
  v-if 直接从DOM树上移除
• 语法：
  v-show="变量"
  v-if="变量"
• v-if 可以跟 v-else-if 和 v-else 配合使用

• <template>
    <div>
      <h1 v-show="show">v-show的盒子</h1>
      <h1 v-if="show">v-if的盒子</h1>
  
      <div>
        <p v-if="age > 18">成年</p>
        <p v-else>还没成年</p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        show: true,
        age: 15
      }
    }
  }
  </script>

6. v-for（最常用）

• 作用：渲染列表，按照数据循环生成所在标签的结构
• 语法：
          .v-for='(值,索引) in 目标数据'
          .v-for='值 in 目标数据'
• 目标数据：可以遍历数组，对象，数字，字符串（能遍历结构）
• 注意：v-for 的临时变量名不能用到v-for范围外
• 口诀：让谁循环就把v-for放在谁身上

• <template>
    <div id="app">
      <div id="app">
        <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>
  
        <!-- v-for遍历对象(了解) -->
        <p>老师信息</p>
        <div v-for="(value, key) in tObj" :key="value">
          {{ key }} -- {{ value }}
        </div>
  
        <!-- v-for遍历整数(了解) - 从1开始 -->
        <p>序号</p>
        <div v-for="i in count" :key="i">{{ i }}</div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        arr: ["小黑", "小红", "大黄"],
        stuArr: [
          {
            id: 1001,
            name: "小陈",
            sex: "男",
            hobby: "吃饭",
          },
          {
            id: 1002,
            name: "小健",
            sex: "男",
            hobby: "追媳妇",
          },
        ],
        tObj: {
          name: "小辉",
          age: 18,
          class: "8班",
        },
        count: 10,
      };
    },
  };
  </script>