指令语法 & 计算监视属性

常用指令

概念：vue 会根据不同的指令，针对标签（即 <> 里面的内容）实现不同的功能

v-html

• 作用：设置元素的 innerHTML

• 示例代码如下：

<div id="app">
    <div v-html="msg"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: `
                <a href="http://www.baidu.com">
                百度
                </a>
            `
        }
    })
</script>

v-if

• 作用：控制元素显示隐藏
• 特点：不展示的 DOM 元素直接被移除

v-show

• 作用：控制元素显示隐藏
• 特点：不展示的 DOM 元素未被移除，仅仅是使用样式隐藏
• 示例代码如下：

<div id="app">
  <div v-show="flag" class="box">我是v-show控制的盒子</div>
  <div v-if="flag" class="box">我是v-if控制的盒子</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      flag: false
    }
  })
</script>

v-eles

需要紧挨着 v-if 一起使用，示例代码如下：

<div id="app">
  <p v-if="gender === 1">性别：♂ 男</p>
  <p v-else>性别：♀ 女</p>
  <hr>
  <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
  <p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p>
  <p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
  <p v-else>成绩评定D：惩罚一周不能玩手机</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      gender: 2,
      score: 95
    }
  })
</script>

v-on

• 作用：注册事件，并提供处理逻辑
• 语法：
  • v-on:事件名 = "内联语句"
  • v-on:事件名 = "methods 中的函数名"
• 简写：v-on:事件名 可以简写为 @事件名
• @click="demo($event)，$event 代表事件对象
• 示例代码如下：

<div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>

    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">程序员校花</h1>

    <button @click="buy(10)">咖啡10元</button>
    <button @click="buy(8)">牛奶8元</button>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            count: 100,
            isShow: true
        },
        methods: {
            fn() {
                // this 指向 Vue 实例
                console.log(this === app) // true
                this.isShow = !this.isShow
            },
            buy(price) {

            }
        }
    })
</script>

知识加油站 ⛽

ES 6 的对象方法简写，用于在对象中定义方法的一种简化写法，可以在对象字面量中，直接使用函数名来定义方法，而无需写冒号和 function 关键字，示例代码如下：

// 在 ES5 及之前的版本中，我们定义对象方法的常规写法是：
const obj = {
  methodName: function() {
    // 方法体
  }
}

// --------------------------

//而在 ES6+ 中，对象方法简写让我们可以更简洁地定义对象的方法，只需写函数名即可：
const obj = {
  methodName() {
    // 方法体
  }
}

v-for

• 作用：用于循环渲染元素，可遍历数组、对象、字符串（用的很少）
• 遍历数组语法：v-for = "(item, index) in 数组"
  • item：每一项
  • index（可选）：下标
• key 作用：给元素添加唯一标识，便于 Vue 进行列表项的正确排序

示例代码如下：

<div id="app">
    <h3>小黑的书架</h3>
    <ul>
        <li v-for="(item, index) in booksList" :key="item.id">
            <span> {{item.name}} </span>
            <span> {{item.author}} </span>
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            booksList: [
                {id: 1, name: '《红楼梦》', author: '曹雪芹'},
                {id: 2, name: '《西游记》', author: '吴承恩'},
                {id: 3, name: '《水浒传》', author: '施耐庵'},
                {id: 4, name: '《三国演义》', author: '罗贯中'}
            ]
        },
        methods: {
            del(id) {
                this.booksList = this.booksList.filter(i => i.id !== id)
            }
        }
    })
</script>

v-bind

绑定属性值

• 作用： 动态的设置 html 的标签属性值，例如 src、url、title
• 语法： v-bind:属性名="表达式"，可简写为 :属性名="表达式"
• 单向绑定：数据只能从 Vue 实例流向视图，而无法从视图反向影响 Vue 实例中的数据

示例代码如下：

<div id="app">
  <!-- v-bind:src   =>   :src -->
  <img v-bind:src="imgUrl" v-bind:title="msg" alt="aa">
  <img :src="imgUrl" :title="msg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      imgUrl: './imgs/10-02.png',
      msg: 'hello 波仔'
    }
  })

</script>

绑定样式

• v-bind 可以以对 class 类名 和 style 行内样式 进行控制
• class 类名
  • 语法：:class = "对象/数组"
    • 对象：键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类
    • 数组：数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
• style 行内样式
  • 语法：:style = "样式对象"
  • 例如：<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

示例代码如下：

<style>
  .box {
    width: 200px;
    height: 200px;
    border: 3px solid #000;
    font-size: 30px;
    margin-top: 10px;
  }

  .pink {
    background-color: pink;
  }

  .big {
    width: 300px;
    height: 300px;
  }
</style>
<div id="app">
  <div class="box" :class="{pink: true, big: true}">程序员校花</div>
  <div class="box" :class="['pink', 'big']">程序员校花</div>

  <div class="box" :style="{width: '100px', height: '100px'}">程序员校花</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

v-model

• 作用：给表单元素使用，实现双向数据绑定，可以快速 获取 或 设置 表单元素内容
  • 数据变化 → 视图自动更新
  • 视图变化 → 数据自动更新
• 示例代码如下：

<div id="app">
  账户：<input type="text" v-model="username"> <br><br>
  密码：<input type="password" v-model="password"> <br><br>
  <button @click="login">登录</button>
  <button @click="reset">重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      username: '',
      password: ''
    },
    methods: {
      login () {
        console.log(this.username, this.password)
      },
      reset () {
        this.username = ''
        this.password = ''
      }
    }
  })
</script>

其它表单

• 常见的表单元素都可以用 v-model 绑定关联，用于快速 获取 或 设置 表单元素的值，它会自动识别表单元素
  • 输入框 input:text → value
  • 文本域 textarea → value
  • 复选框 input:checkbox → checked
  • 单选框 input:radio → checked
  • 下拉菜单 select → value
• 示例代码如下：

<div id="app">
    <h3>小黑学习网</h3>

    姓名：
    <input type="text" v-model="username">
    <br><br>

    是否单身：
    <input type="checkbox" v-model="isSingle">
    <br><br>

    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别:
    <input v-model="gender" type="radio" name="gender" value="1">男
    <input v-model="gender" type="radio" name="gender" value="2">女
    <br><br>

    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
    <select v-model="cityId">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">成都</option>
        <option value="104">南京</option>
    </select>
    <br><br>

    自我描述：
    <textarea v-model="desc"></textarea>

    <button>立即注册</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '',
            isSingle: true,
            gender: 3,
            cityId: 102,
            desc: '',
        }
    })
</script>

指令修饰符

通过 . 指明一些指令后缀，不同后缀封装了不同的处理操作，用来简化代码，例如：

• 键盘事件修饰符
  • @keyup.enter：键盘回车监听
• v-model 修饰符
  • v-model.trim：去除首尾空格
  • v-model.number：转数字
• 事件修饰符
  • @事件名.stop：阻止冒泡
  • @事件名.prevent：阻止默认行为

示例代码如下：

<div id="app">
    <h3>v-model修饰符 .trim .number</h3>
    姓名：<input v-model.trim="username" type="text"><br>
    年纪：<input v-model.number="age" type="text"><br>


    <h3>@事件名.stop → 阻止冒泡</h3>
    <div @click="fatherFn" class="father">
        <div @click.stop="sonFn" class="son">儿子</div>
    </div>

    <h3>@事件名.prevent → 阻止默认行为，下面是阻止跳转超链接</h3>
    <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '',
            age: '',
        },
        methods: {
            fatherFn() {
                alert('老父亲被点击了')
            },
            sonFn() {
                alert('儿子被点击了')
            }
        }
    })
</script>

计算属性

基本使用

• 属性：data 中的叫做属性
• 语法：声明在 computed 配置项中，配合插值表达式使用
• 示例代码如下：

<div id="app">
    <h3>小黑的礼物清单</h3>
    <table>
        <tr>
            <th>名字</th>
            <th>数量</th>
        </tr>
        <tr v-for="(item, index) in list" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.num }}个</td>
        </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{totalCount}} 个</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            // 现有的数据
            list: [
                {id: 1, name: '篮球', num: 1},
                {id: 2, name: '玩具', num: 2},
                {id: 3, name: '铅笔', num: 5},
            ]
        },
        computed: {
            totalCount() {
                // 数组求和函数
                return this.list.reduce(
                    (sum, item) => sum + item.num, 0
                )
            }
        }
    })
</script>

完整写法

只读不改时可以用简写写法，也就是只有 get() 没有 set(value) 时，要修改的话需要使用完整写法，示例代码如下：

<div id="app">
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    <p>姓名：{{fullName}}</p>
    <button @click="changeName">修改姓名</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstName: '程序员',
            lastName: '校花',

        },
        computed: {
            fullName: {
                get() {
                    return this.firstName + this.lastName
                },
                set(value) {
                    // 当 fullName 被修改赋值时执行
                    console.log(value) // 吕小布
                    this.firstName = value.slice(0, 1)
                    this.lastName = value.slice(1)
                }
            }
        },
        methods: {
            changeName() {
                this.fullName = '吕小布'
            }
        }
    })
</script>

VS methods

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，性能比 methods 高，适用于封装对数据的处理，返回一个结果

监视器

基本使用

• 作用：监视数据变化，执行一些业务逻辑或异步操作
• 语法：声明在 watch 配置项中
• 示例代码如下：

        data: {
            words: '苹果',
            obj: {
                words: '苹果'
            }
        },

        watch: {
            // 该方法会在数据变化时，触发执行
            数据属性名(newValue, oldValue) {
                // 一些业务逻辑 或 异步操作。 
            },
            '对象.属性名'(newValue, oldValue) {
                // 一些业务逻辑 或 异步操作。 
            }
        }

完整写法

完整写法需要添加额外的配置项：

• deep:true：对复杂类型进行深度监听
• immdiate:true：初始化，立刻执行一次

示例代码如下：

data: {
  obj: {
    words: '苹果',
    lang: 'italy'
  },
},

watch: { // watch 完整写法
  对象: {
    deep: true, // 深度监视
    immdiate:true,// 立即执行 handler 函数
    handler (newValue) {
      console.log(newValue)
    }
  }
}