Vue指令

1.1 什么是指令？

vue指令是指标签上的 v-* 模式的属性，可以实现很多数据遍历、渲染、事件绑定等等功能

1.2 v-text 和 v-html

v-text 相当于.innerText，将数据作为普通文本添加到标签中

v-html 相当于.innerHTML，将数据作为html标签添加到标签中，可以渲染标签效果

1.3 v-show和v-if

v-show 根据数据决定是否显示标签，显示隐藏通过css的display实现

v-if 根据数据决定是否创建标签，条件满足就创建标签，条件不满足就不创建标签

<h1 v-show="age>=18">可以找女朋友了</h1>
<h1 v-if="age>=18">可以找男朋友了</h1>

1.4 v-if 和 v-else-if 和 v-else

v-if 根据数据决定是否创建标签，条件满足就创建标签，条件不满足就不创建标签

v-else-if 多分支语句

v-else if的否则部分

<h1 v-if="score>=90">优秀</h1>
<h1 v-else-if="score>=80">良好</h1>
<h1 v-else-if="score>=70">中等</h1>
<h1 v-else-if="score>=60">及格</h1>
<h1 v-else>不及格</h1>

1.5 v-for【重点】

v-for 用于遍历数组和对象

<!-- 用法一：只遍历数据值 -->
<h1 v-for="v in arr" :key="v">姓名：{{v}}</h1>

<!-- 用法二：遍历数组值和索引【常用】 -->
<h1 v-for="(v,i) in arr" :key="i">{{i}} - {{v}}</h1>

<!-- 用法三：遍历对象的属性值, 索引, 属性名 -->
<h1 v-for="(v, k, i) in obj" :key="v">{{v}} - {{k}} - {{i}}</h1>

1.6 v-model【重点】

v-model 用于实现数据双向绑定，主要应用于表单元素 input select textarea

html部分：

<p>用户名：<input type="text" v-model="username"/></p>
<p>密码：<input type="password" v-model="pwd"/></p>

js部分：

export default {
  data(){
    return {
      username:'李四',
      pwd:'123456',
    }
  },
}

1.7 v-on绑定事件【重点】

v-on 用于绑定事件

html部分：

<!-- 绑定事件 -->
<h1 v-on:click="changeMsg">{{msg}}</h1>

<!-- 绑定事件，缩写 @ -->
<h1 @click="changeMsg">{{msg}}</h1>

js部分：

export default {
    data(){
        return {
            msg:'今天星期二',
        }
    },

    // 方法和函数
    methods:{
        //修改消息的事件处理函数
        changeMsg(n){
            this.msg='明天星期三';
            console.log(n);
        }
    }
}

1.8 Mustach胡须表达式

定义数据:

export default {
    data(){
        return {
            msg:'今天星期二'
        }
    }
}

渲染数据:

<template>
    <h1>{{msg}}</h1>
</template>