VUE指令v-bind 动态属性、v-on 事件绑定、v-on 获取事件对象、v-on 修饰符、v-on 按键修饰符、v

一、v-bind 动态属性

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

    <img v-bind:src="imgSrc">
    <img :src="imgSrc">

v-bind动态属性作用于图片时尤其需要注意，v-bind会直接将资源路径认定为字符串，解决方法为：直接在v-bind动态属性后面传递实际的资源。

    <template>
      <div>
         <img v-bind:src="imgUrl1" alt="">
         <img :src="imgUrl2" alt="">
         <img :src="imgUrl3" alt="">
      </div>
    </template>
    <script>
    // 通过import引入资源文件，在data中进行定义，最后再动态属性中使用
    import img from '../assets/gqwytx.jpg'
    export default {
        name: 'Picture',
        data() {
            return {
                imgUrl1:"../assets/gqwytx.jpg",
                imgUrl2: img,
                // require 引入资源文件，直接在动态属性中使用
                // 优势：require引入资源的方式是按需的，这样一来，页面初始更新效率会更高
                imgUrl3: require('../assets/gqwytx.jpg')
            }
        },
    }
    </script>

二、v-on 事件绑定

作用： 给标签绑定事件
语法：
- v-on:事件名="methods中的函数"
- v-on:事件名="methods中的函数(实参)"
- v-on:事件名="少量代码” (不推荐)
简写： @事件名="methods中的函数(实参)"

    <button v-on:click="addFn">点我+1</button>              // v-on:事件名="methods中的函数"
    <button v-on:click="addCountFn(2)">点我+2</button>      // v-on:事件名="methods中的函数(实参)"
    <button v-on:click="count = count + 1">点我+1</button>  // v-on:事件名="少量代码"    
    <button @click="subFn()">点我减少1</button>             // @事件名="methods中的函数(实参)"

三、v-on 获取事件对象

作用： vue事件处理函数中, 拿到事件对象
语法：
- 如果没有传参，则通过形参直接接收，在定义方法时默认的事件对象在第一个形参上。
- 如果传参，则通过$event指代事件对象传给事件处理函数，使用时，对应实参位置设置新参即可使用。

    <a @click="goUrl" href="http://www.baidu.com">百度</a>
    <a @click="goUrl($event)" href="http://www.taobao.com">淘宝</a>

只要在使用方法时打上小括号，就会覆盖原本vue默认设置在第一个形参上的事件对象参数。

四、v-on 修饰符

语法： @事件名.修饰符="methods里函数"
- .stop - 阻止事件冒泡
- .prevent - 阻止默认行为
- .once - 程序运行期间, 只触发一次事件处理函数

    <div @click="fatherFn">
        <button @click.stop="oneFn">阻止事件冒泡</button>
        <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>
        <button @click.once="twoFn">事件处理函数触发一次</button>
    </div>

五、v-on 按键修饰符

作用： 给键盘事件, 添加修饰符
语法：
- @keyup.enter - 监测回车按键，按下回车触发绑定
- @keyup.esc - 监测返回按键，按下返回触发绑定

    <!-- .enter-回车 -->
    <input type="text" @keydown.enter="enterFn">
    <!-- .esc修饰符 - 取消键 -->
    <input type="text" @keyup.esc="escFn">

六、v-model

作用： 把value属性和vue数据变量, 双向绑定到一起

当数据改变时，视图自动同步；当视图改变时，数据自动同步。
语法： v-model="vue数据变量"

    <input type="radio" value="男" v-model="sex" /> 男
    <input type="radio" value="女" v-model="sex" /> 女

6.1 v-model 的修饰符

语法： v-model.修饰符="vue数据变量"
- .number - 将输入框中的值以parseFloat的形式转化为数字类型 (常用)，会自动清除后续非数字部分，如果第一个字符就不是数字时，.number修饰符就失效了。
- .trim - 去除收尾空格字符 (常用)。
- .lazy - 将 input 输入时触发的实时更新数据操作转移到失焦、回车时触发。

    <!-- 转化数字 -->       
    <input type="text" v-model.number="newNumber" />
    <!-- 取消前后空格 -->
    <input type="text" v-model.trim="newTrim" />
    <!-- 懒更新 -->
    <input type="text" v-model.lazy="newLazy" />

七、v-text 和 v-html

作用： 更新DOM对象的 innerText / innerHTML
语法：
- v-text="vue数据变量"
- v-html="vue数据变量"

    <p v-text="str"></p>
    <p v-html="str"></p>

v-text使用时不允许当前标签内有任何子元素，因为本来当前元素中的内容就会被v-text中的内容覆盖，所以当前标签中的子元素显得毫无意义甚至影响页面的渲染效率。

八、v-show 和 v-if

作用： 控制标签的显示和隐藏
语法：
- v-show="vue变量" - 给当前标签设置一个display: none;来进行隐藏操
  
  作，原来的这个标签元素还存在于dom数中。
- v-if="vue变量" - 直接将需要隐藏的元素从dom树中删除。
使用场景： 选择v-show和v-if的直接条件：如果当前元素及内部子元素全是静态数据，那么使用v-show，除此以外全用v-if。

    <template>
      <div>
        <div v-show="flag1">v-show</div>
        <div v-if="flag1">{{ msg }}</div>

        <div v-if="flag2 === 0">显示为0</div>
        <div v-else-if="flag2 === 1">显示为1</div>
        <div v-else>显示为其他</div>
     </div>
    </template>
            
    <script>
        export default {
            name: "Display",
                data() {
                return {
                    flag1: true,
                    msg: "动态",
                    flag2: 3,
                }
            }
        }
    </script>

九、v-for

作用： 渲染列表数据时，直接在标签结构中进行数组遍历
语法：
- v-for="(值, 索引) in 目标结构"
- v-for="值 in 目标结构"
目标结构： 数组 / 对象 / 数字 / 字符串 (可遍历结构)

<template>
  <div>     
        <!-- 1. 循环简单数组 -->
    <div>
        <p v-for="(value, index) in arr" :key ="index">
            {{ value }} ----- {{ index }}
        </p>
    </div>

    <!-- 2. 循环复杂数组 => 数组对象 -->
    <div>
        <p v-for="value in arr2" :key ="value.id">
            {{ value.name }} ----- {{ value.age }}
        </p>
    </div>

    <!-- 3. 循环对象 => 循环的就是对象的属性名和属性值
        参数1：属性值
        参数2：属性名
    -->
    <div>
        <p v-for="(value, key) in obj" :key ="key">
            {{ value }} ----- {{ key }}
        </p>
    </div>

    <!-- 4. 循环数字
        参数1： 从1开始计数到最后的自然数
        参数2： 下标索引从0开始计数
    -->
    <div>
        <p v-for="(value, index) in 10" :key ="index">
            {{ value }} ----- {{ index }}
        </p>
    </div>

    <!-- 5. 循环字符串
        参数1：字符串的每一个字符
        参数2：字符串所在的下标索引，从0开始计数
    -->
    <div>
        <p v-for="(value, index) in abcdefg" :key ="index">
            {{ value }} ----- {{ index }}
        </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Circulation",
  data() {
    return {
      arr: [1, 2, 3, 4, 5, 6],
      arr2: [
        { name: 'Lisa', age: 7, id: 1},
        { name: 'Betty', age: 21, id: 2},
      ],
      obj: {
        name: 'Betty',
        age: 21,
        sex: 'female'
      }
    }
  },
}
</script>