vue常用指令

目录

1、插值表达式

2、绑定数据和元素属性 v-bind

3、v-on绑定事件

4、处理时间对象e

5、v-on事件修饰符

6、v-on按键修饰符

7、v-model 双向事件绑定

8、v-model的修饰符

9、v-text和v-html

10、v-show和v-if

11、v-for

12、v-for更新检测

13、动态class

14、动态style

15、过滤器

16、计算属性 computed

17、侦听器

18、侦听器深度执行和立即执行

---

1、插值表达式

• 案例：在dom标签中，直接插入vue数据变量，将vue数据变量直接显示在标签内
• 又称：声明式渲染/文本插值
• 语法：{{表达式}}
• msg和obj是vue数据变量
• 要在js中data函数里声明

<template>
    <div>
        <h1>{{ msg }}</h1> // 可以写普通变量
        <h2>{{ obj.name }}</h2> // 也可以写对象
        <h3>{{ obj.age >18 ?'成年':'未成年'}}</h3> // 也可以写判断条件
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                msg: "hello vue",
                obj: {
                    name: "小vue",
                    age: 5
                }
            }
        }
    }
</script>

2、绑定数据和元素属性 v-bind

作用：给标签属性设置Vue变量的值

v-bind语法和简写：

• 语法：v-bind:属性名="vue变量"
• 简写：:属性名="vue变量"

我是a标签

<template>
    <div>
        <!-- 语法：v-bind:原生属性名="vue变量" -->
        <a v-bind:href="url"></a>
        <!-- 语法：:原生属性名="vue变量" -->
        <img :src="imgUrl">
    </div>
</template>
 
<script>
    export default{
        // 准备变量
        data(){
            return{
                url: 'http://www.baidu.com',
                imgUrl: 'http://www.baidutupian.com'
            }
        }
    }
</script>

3、v-on绑定事件

语法：

• v-on:事件名="要执行的少量代码"
• v-on:事件名="methods中的函数名"
• v-on:事件名="methods中的函数名（实参）"

<p>你要买商品的数量：{{count}}</p>
<button v-on:click="count = count + 1">增加1</button>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5个</button>

 v-on也可以简写成@

语法：

• @事件名= "methods中的函数"

4、处理时间对象e

语法:

• 无传参，通过形参直接接收
• 传参，通过$event指代时间对象传给时间处理函数

<template>
    <div>
        <a @click="one" href="http://www.baidu.com">阻止百度</a>
        <hr>
        <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
    </div>
</template>
 
<script>
    export default{
        methods:{
            one(e){
                e.preventDafault()
            },
            two(num,e){
                e.preventDafault()
            }
        }
    }
</script>

5、v-on事件修饰符

语法：

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

修饰符列表：

• .stop ：阻止事件冒泡
• .prevent ：阻止默认行为
• .once ：程序运行期间，只触发一次时间处理函数

<template>
    <div @click="fatherFn">
        <!-- vue对事件进行了修饰符设置，在事件后面.修饰符名即可使用更多的功能 -->
        <button @click.stop="btn">.stop阻止事件冒泡</button>
        <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
        <button @click.once="btn">.once程序运行期间，只触发一次事件处理函数</button>
    </div>
</template>

6、v-on按键修饰符

语法：

• @keyup.enter：监测回车按键
• @keyup.esc：监测返回按键

<template>
    <div>
       <input type="text" @keydown.enter="enterFn">
       <hr>
       <input type="text" @keydown.esc="escFn">
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                msg: "hello vue",
                obj: {
                    name: "小vue",
                    age: 20
                }
            }
        },
        methods:{
          enterFn(){
            console.log("用户按下了回车键")
          },
          escFn(){
            console.log("用户按下了返回键")
          }
        }
    }
</script>

7、v-model 双向事件绑定

语法：

• v-model="Vue数据变量"

双向数据绑定：

• 变量变化->视图自动同步
• 视图变化->变量自动同步

例：注册表单，了解v-model在各种表单标签如何使用

<template>
    <div>
      <span>用户名:</span>
      <input type="text" v-model="username">
      <br>
      <span>密码:</span>
      <input type="password" v-model="password">
      <br>
      <!-- 下拉菜单，v-model需要写在select标签上 -->
      <span>来自于:</span>
      <select v-model="from">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
      </select>
      <br>
      <!-- 
        遇到复选框,v-model的变量值
        非数组:关联的是复选框的checked属性
        数组:关联的是复选框的value属性
      -->
      <span>爱好:</span>
      <input type="checkbox" value="篮球" v-model="hobby">篮球
      <input type="checkbox" value="足球" v-model="hobby">足球
      <input type="checkbox" value="羽毛球" v-model="hobby">羽毛球
      <br>
      <span>性别:</span>
      <input type="radio" value="男" name="sex" v-model="gender">男
      <input type="radio" value="女" name="sex" v-model="gender">女
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                username: "",
                password: "",
                from: "",
                // 如果是非数组hobby:""，则关联的是checked属性 false或者true
                hobby: [],
                gender:""
            }
        }
    }
</script>

 注意点：

• v-model是写在select，value在option上
• v-model用在复选框时，非数组关联的是checkd属性，数组关联的是value属性
• vue变量初始值会影响表单的默认状态，因为双向数据绑定是互相影响的

8、v-model的修饰符

语法：v-model.修饰符 = "Vue数据变量"

• .number：以parseFloat抓成数字类型候，把值赋予给Vue数据变量
• .trim：去除首尾空白字符后，把值赋予给Vue数据变量
• .lazy：在change时触发而非input时，等表单失去焦点时把值赋予给Vue数据变量

<template>
  <div>
    <!-- .trim修饰符，会去掉首尾空白字符 -->
    <span>姓名:</span>
    <input type="text" v-model.trim="name">
    <br>
    <!-- .number修饰符，以parseFloat抓成数字类型 -->
    <span>年龄:</span>
    <input type="text" v-model.number ="age">
    <br>
    <!-- .lazy修饰符在change时触发而非input时，
          在此处表现为失去焦点时把内容同步给v-model的变量 -->
    <span>个人介绍:</span>
    <input type="text" v-model.lazy ="intro">
  </div>
</template>
 
<script>
export default {
    data(){
      return{
        name:"",
        age:"",
        intro:""
      }
    }
}
</script>

9、v-text和v-html

语法：

• v-text="Vue数据变量"
• v-html="Vue数据变量"

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str">{{10 + 20}}</p>
    <!-- 注意：v-text或v-html会覆盖插值表达式 -->
  </div>
</template>
 
<script>
export default {
  data(){
    return{
      str:"我是一个span标签"
    }
  }
}
</script>

 注意点：

• v-text或v-html会覆盖插值表达式

10、v-show和v-if

作用：控制标签的隐藏和出现

语法：

• v-show="Vue变量"
• v-if="Vue变量"

原理：

• v-show用的display:none隐藏（频繁切换使用）
• v-if直接从DOM树上移除

高级：

• v-else的使用

<template>
  <div>
    <!-- 
      v-show隐藏：采用display:none  // 频繁切换
      v-if隐藏：采用从DOM树直接移除  // 移除
     -->
    <h1 v-show="isShow">我是h1</h1>
    <h2 v-if="isIf">我是h2</h2>
 
     <!-- v-if和v-else的使用 -->
     <p v-if="age >= 18">成年了</p>
     <p v-else>未成年</p>
  </div>
</template>
 
<script>
export default {
  data(){
    return{
      isShow:false,
      isIf:false,
      age:16
    }
  }
}
</script>

11、v-for

作用：列表渲染，所在标签结构，按照数据数量，循环生成

语法：

• v-for="(值变量,索引变量)in 目标结构"
• v-for="值变量 in 目标结构"

目标结构：

• 可以遍历数组/对象/数字

<template>
  <div>
      <ul>
        
        <li v-for="(item,index) in arr" :key=index>
          {{item}}
        li>
      ul>
  div>
template>
 
<script>
export default {
  data(){
    return{
      arr:["小明","小刚","小亮","小杰"]
    }
  }
}
script>

12、v-for更新检测

情况1：数组翻转

情况2：数组截取

情况3：更新值

口诀：

• 数组变更方法，就会导致v-for更新，页面更新（比如：push，pop，shift，unshift，splice，sort，reverse）
• 数组非变更方法，返回新数组，就不会导致v-for更新，可采用覆盖数组或this.$set（比如：filter，concat，slice）

<template>
  <div>
    <ul>
      <li v-for="(val,index) in arr" :key=index>
          {{val}}
      </li>
    </ul>
    <button @click="revBtn">数组翻转</button><br>
    <button @click="sliceBtn">截取前3个字符（1）</button><br>
    <button @click="updateBtn">更新第1个值（1）</button><br>
    <button @click="fugaiBtn">截取前3个字符（2）</button><br>
	<button @click="thisSetBtn">更新第1个值（2）</button><br>
  </div>
</template>
 
<script>
export default {
    data(){
      return{
        arr:[1,2,3,4,5]
      }
    },
    methods:{
      revBtn(){
        // 1.数组翻转可以让v-for更新
        this.arr.reverse()
      },
      sliceBtn(){
        // 2.数组slice方法不会造成v-for更新
        this.arr.slice(0,3)
      },
      updateBtn(){
        // 3.更新某个值的时候，v-for是检测不到的
        this.arr[0] = 1000
      },
      // 数组非变更方法如果想要返回新数组，使得v-for更新，可采用覆盖数组或this.$set
      fugaiBtn(){
        // 解决v-for更新 - 覆盖原始数组
       let newArr = this.arr.slice(0,3)
       this.arr = newArr
      },
      thisSetBtn(){
        // 解决v-for更新 - this.$set()
        // 参数1：更新目标结构
        // 参数2：更新位置
        // 参数3：更新值
        this.$set(this.arr, 0, 1000)
      }
    }
}
</script>

13、动态class

作用：给标签class设置动态的值

语法：

• :class="{类名:布尔值}"   // true使用，false不使用

<template>
  <div>
    <!-- 
      语法：:class="{类名:布尔值}"
      使用场景：vue变量控制标签是否应该有类名
     -->
     <p :class="{red_str: bool}">动态class</p>
  </div>
</template>
 
<script>
export default {
    data(){
      return{
        bool: true
      }
    }
}
</script>
 
<style>
  .red_str{
    color: red;
  }
</style>

14、动态style

作用：给标签动态设置style的值

语法：

• :style="{css属性名:值}"

<template>
  <div>
    <!-- 
      动态style语法：
      :style="{css属性名:值}"
     -->
    <p :style="{color: textColor}">动态style</p>
  </div>
</template>
 
<script>
export default {
  data(){
    return{
      textColor :'red'
    }
  }
}
</script>

15、过滤器

作用：转换格式，过滤器就是一个函数，传入值返回处理后的值
使用场景：

• 字符串翻转，输入“hello,world”，输出“dlrow,olleh”
• 字母转大写，输入“hello”，输出“HELLO”

语法：

• Vue.filter("过滤器名", (值) => {return "返回处理后的值"})
• filter:{过滤器名: (值) => {return "返回处理后的值"}}

（1）全局过滤器

main.js

import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
 
// 方式1：全局过滤器
// 任意的.vue文件内“直接”使用
// 语法：Vue.filter("过滤器名": 值 => 处理结果)
Vue.filter("reverse" , val => val.split("").reverse().join(""))
 
new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div>
    <p>原来的样子{{msg}}p>
    
    <p>翻转后的样子:{{ msg | reverse}}p>
  div>
template>
 
<script>
export default {
    data(){
      return{
        msg : "hello,world"
      }
    }
}
script>
 
<style>
style>

（2）局部过滤器 

<template>
  <div>
    <p>原来的样子{{msg}}</p>
    <!-- 2. 过滤器的使用
    语法：{{ 值 | 过滤器名字 }} 
    -->
    <p>翻转后的样子:{{ msg | reverse}}</p>
    <p :title="msg | toUp">鼠标长停</p>
  </div>
</template>
 
<script>
export default {
    data(){
      return{
        msg : "hello,world"
      }
    },
    methods:{},
    // 方式2：局部过滤器
    // 只能在vue文件中使用
    /*
      语法：
      filter: {
        过滤器名字 (val) {
          return 处理后的值
        }
      }
    */
    filters: {
      toUp(val) {
        return val.toUpperCase
      }
    }
};
</script>
 
<style>
 
</style>

（3）多过滤器

作用：可同时使用多个过滤器，或者给过滤器传参

语法：

• 过滤器传参：vue变量 | 过滤器(实参)
• 多个过滤器：vue变量 | 过滤器1 | 过滤器2

<template>
  <div>
    
    <p>使用翻转过滤器：{{msg | reverse('-')}}p>
    
    <p :title="msg | toUp | reverse('-')">鼠标长停p>
  div>
template>

16、计算属性 computed

（1）简单写法

使用场景：一个变量的值，依赖另外一些数据计算而来的结果

语法：

computed: {

"计算属性名" (){

return "值"

    }

}

<template>
  <div>
    <p>和为：{{ num }}</p>
  </div>
</template>
 
<script>
export default {
  data(){
    return{
      a:10,
      b:20
    }
  },
  // 计算属性：
  // 场景：一个变量，需要用另外的变量计算而来
  /*
    语法：
    computed:{
      计算属性名(){
      return 值
    }
  }
  */
  // 注意：计算属性和data属性都是变量-不能重名  
  computed:{
    num(){
      return this.a + this.b
    }
  }
}
</script>

 注意点：

• 计算属性和data属性都是变量-不能重名
• 计算属性是有缓存的，只要依赖项不变，都直接从缓存中取。依赖项改变函数自动执行并重新缓存

（2）完整写法

17、侦听器

作用：可以侦听data/computed属性值的改变

语法：

watch: {

"被侦听的属性名" (newVal, oldVal) {

    }

}

例：侦听输入框中输入的内容

<template>
  <div>
    <input type="text" v-model = "name">
  </div>
</template>
 
<script>
export default {
    data(){
      return{
        name:""
      }
    },
    // 侦听到name值的改变
    /* 语法：
      watch:{
        name(newVal, oldVal){
        // 变量名对应值改变这里自动触发
      }
    }
    */
    watch:{
      name(newVal, oldVal){
        console.log(newVal, oldVal)
      }
    }
}
</script>

18、侦听器深度执行和立即执行

作用：侦听复杂类型，或者立即执行侦听函数

语法：

watch: {

"要侦听的属性名"：{

immediate: true, // 立即执行

deep: true, // 深度侦听复杂类型内变化

handler(newVal, oldVal) {

            }

       }

}

<template>
  <div>
      <input type="text" v-model="user.name">
      <input type="text" v-model="user.age">
  </div>
</template>
 
<script>
export default {
    data(){
      return{
        user:{
          name:"",
          age:""
        }
      }
    },
    watch:{
      user:{
        immediate: true, // 深度侦听（对象里的值改变）
        deep: true,  // 立即正厅（网页打开时hanler就执行一次）
        handler(newVal, oldVal) {
          // user里的对象
          console.log(newVal, oldVal)
        }
      }
    }
}
</script>