vue常用指令

已于 2022-10-09 22:14:59 修改
阅读量2.5k 收藏 6
点赞数 1
分类专栏： vue 文章标签： 前端 vue
于 2022-09-25 20:13:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70619994/article/details/127042056
版权

目录

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 v-bind:href="url">我是a标签</a>

<img :src="imgSrc">

<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>我是一个span标签</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>
        <!-- 
          v-for="(值变量,索引变量)in 目标结构
          口诀：想要谁遍历就放到谁身上
         -->
        <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>
    <!-- 2. 过滤器的使用
    语法：{{ 值 | 过滤器名字 }} 
    -->
    <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>
    <!-- 1.给过滤器传参 
      语法：vue变量 | 过滤器名(值)
    -->
    <p>使用翻转过滤器：{{msg | reverse('-')}}</p>
    <!-- 2. 多个过滤器使用
      语法：vue变量 | 过滤器1 | 过滤器2
     -->
    <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>

 

杰瘦瘦
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue常用指令代码实例总结
12-20
vue常用内置指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12_指令_内置指令</title> <style> [v-cloak] { display: none } </...
vue 修饰符 表单修饰符 .lazy .number .trim 事件修饰符
weixin_42448623的博客
08-11 429
文档 .lazy 默认情况下 v-model默认是在input事件中同步输入框的数据的 lazy可以让数据在失去焦点或者回车时才会更新 <!-- 在“change”时而非“input”时更新 --> <input type="text" name="" v-model.lazy="text">{{text}} .number 默认情况下 在输入框中无论我们输入的是字母还是数字,都会被当做数字处理。number可以让输入框中输入的内容自动转成数字类型 <input type="
Vue基本语法（二）
qq_45740578的博客
07-15 528
Vue基本语法（二） 动态属性：v-bind:class="a" ​ 可以简写 :class=“a” v-bind可以省略 节点上绑定事件： ​ v-on:click=“fn” 可简写：@click=“fn” ​ 事件方法写在methods中 v-on 监听事件 ​ v-on:click=“事件名” ​ 缩写@click=“事件名” v-model 数据绑定 ​ 可以在表单中使用v-model实现数据双向绑定 text类型中的文本都是字符串，v-model中的值相同 复选框 v-mode
Vue：表单修饰符（.lazy/.number/.trim）
qq_45820271的博客
03-12 679
本文介绍了VUE的三种表单修饰符.lazy，.number，.trim的作用和用法
Vue常用指令
qq_42839746的博客
04-24 4175
Vue常用指令是带有v-前缀的特殊属性，例如v-for、v-if、v-show、v-bind。作用是当表达式的值改变时 ，将其产生的连带影响 ，响应式的作用于DOM。
vue常用命令
qq_37196621的博客
08-20 911
node -v 查看node版本
Vue常用指令详解分析
10-18
给大家详细分析了关于VUE的常用的相关指令内容，对此有需要的朋友们可以学习下。
Vue常用的几个指令附完整案例
10-17
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下。感兴趣的朋友跟随小编一起看看吧
picoCTF-Web Exploitation-Web Gauntlet
huckers的博客
05-12 463
按照提示，需要用admin登录，查看filter.php，这应该是一个SQL注入题，提示我们可以使用无痕浏览器来以便cookie可以不用每次清除。中展示了sql过滤逻辑，可以回味一下，尝试用不同的关键字来注入。提示sql过滤or，我们使用。
前端Vue架构
weixin_45678402的博客
05-12 294
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
前端面试题日常练-day05 【面试题】
qq_44640575的博客
05-11 386
解释：在CSS中，使用`.`作为类选择器，可以选择所有具有指定class名称的元素。例如，如果想选择所有class为"my-class"的元素，可以使用`.my-class`选择器来实现。这样的选择器可以为元素添加特定的样式或者在JavaScript中进行处理。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 364
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
根据地址栏url上key获取值
wwf1225的博客
05-10 264
/ 根据url上key获取值，key为参数名字，例如token。
前端页面 贴边拖拽 盒子
m0_46512929的博客
05-13 218
vue 悬浮球(带自动吸附功能)_vue悬浮球-CSDN博客
Java Web开篇
2403_82385265的博客
05-13 169
这是前端和后端组成的系统的框架结构。
JavaScript基础(六)
2401_82863547的博客
05-11 508
console.log('对折了'+i+'次，高度达到了'+paper+'超过了珠峰');当你不知道循环执行多少次，可以写个死循环，然后在循环体内判断，满足条件后break终止即可。依次输入三个弹窗，第一个输入数字，第二个输入运算符，第三个输入数字，然后给出结果。score = prompt('请输入第'+i+'局的成绩')var num2 = prompt('请输入运算符+-*/');但是，这种写法不好，用变量接收输出的写法是最好的，更好维护。或满足一边就行，用ΙΙ对不对，那同时满足用&&，复习一下。
vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期
最新发布
Dnn01的博客
05-14 264
vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期
【UniApp踩坑记录】在subNvue页面中使用Map，添加marker后不显示
Alan_Walker688的博客
05-11 1104
uniapp subNvue页面中使用 map 后发现 marker 不显示的问题及解决
vue常用指令修饰符
08-29
Vue常用的指令修饰符有以下几种： 1. `.prevent`：阻止默认事件的触发。例如，`@click.prevent`会阻止点击事件的默认行为。 2. `.stop`：停止事件冒泡。它会阻止事件进一步传播到父元素。例如，`@click.stop`会...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值