当前位置： 首页 > news >正文

Vue常用指令及自定义指令

news 来源：原创 2024/5/19 8:04:56

一、常用指令

1. v-bind

固定绑定与动态绑定：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <!-- v-bind动态属性数据绑定 -->

    <!-- 固定 -->
    <!-- <img src="http://www.mobiletrain.org/images_index/right-fixed-face.png" alt=""> -->
    
    <!-- src属性中的数据它是通过data数据源中得到的 -- 动态 -->
    <!-- 
      语法：
        标准语法：v-bind:属性="动态数据"
        简写语法：:属性="动态数拓"
     -->
    <img v-bind:src="src" alt="">
    <img :src="src" alt="">

  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        src: 'http://www.mobiletrain.org/images_index/right-fixed-face.png'
      }
    })
  </script>

</body>

</html>

2. v-for

概述：

根据一组数组或对象的选项列表进行渲染。

v-for指令需要使用 (item,index) in 数组或对象 形式的特殊语法，同时还需要指定key值,key的作用在vue进行新旧数据比对渲染页面里，如果有key值会提升比对性能，加快渲染，key使用唯一的值来赋值。

循环 v-for vue中对于v-for进行了增强，它可以用 for in/of 都可以，而且两者都可以进行对象的迭代

语法：

vue2中小括号可以写，也可以不写，在vue3中一定要写小括号

注意：

  1. vue2中如果一个标签中同时有v-if和v-for，则v-for的优先级高于v-if，所以在vue2中不推荐两者在一个标签中
  2. vue3中v-if优先级高于v-for
  3. v-for=“(元素,索引) in/of 数组”
  4. v-for=“(元素,键名,索引) in/of 对象”
  5. v-for，建议给循环项每个添加一个key来作标识，用于提升性能,key值，一定要唯一不重复的，不太建议使用循环的索引当作key值，一般在和后台请求数据时，要求后台提供一个唯一的id给我们
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <!-- <li v-for="(item,index) in user">{{index}} -- {{item}}</li> -->
    <!-- <li v-for="item,index in user">{{index}} -- {{item}}</li> -->
    <li v-for="item,index in user" :key="item.id">{{item.name}}</li>

    <!-- 循环对象 -->
    <!-- <div v-for="item,key,index in user" :key="key">{{index}} -- {{key}} -- {{item}}</div> -->

  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // user: ['张三', '李四', '王五']
        user: [{ id: 2, name: '李四' }, { id: 1, name: '张三' }]
        // user: { id: 1, name: '张三' } 
      }
    })
  </script>

</body>

</html>

3. v-on

3.1 v-on事件

语法：

v-on:事件名=“实现的方法[此方法定义在vue配置中的methods中]”

v-on使用很频繁 @事件名=“方法”

注意：

绑定的方法，它可以写小括号，也可以不写小括号

绑定的方法是可以写在data配置中，但是不建议，data中属性会进行劫持

methods中定义方法不用使用箭头函数，但是在方法体中建议使用箭头函数，用来保持this指向

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <!-- 
      v-on:事件名="实现的方法[此方法定义在vue配置中的methods中]"
      v-on使用很频繁 @事件名="方法"
      绑定的方法，它可以写小括号，也可以不写小括号
     -->
    <h3>{{num}}</h3>
    <!-- <button v-on:click="clickFn">点击事件</button> -->
    <button @click="clickFn">点击事件</button>

  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 绑定的方法是可以写在data配置中，但是不建议，data中属性会进行劫持
        // clickFn: function () {
        //   console.log('我是一个点击事件');
        // }
        num: 100
      },
      // 注：methods中定义方法不用使用箭头函数，但是在方法体中建议使用箭头函数，用来保持this指向
      methods: {
        // clickFn: function () {
        //   console.log('我是一个点击事件');
        // }
        // 简写
        clickFn() {
          // var _this = this
          setTimeout(() => {
            this.num++
            console.log('我是一个点击事件');
          }, 1000);
        }
        // 箭头函数 没有作用域，找父级
        // clickFn: () => {
        //   console.log(this);
        //   this.num++
        //   console.log('我是一个点击事件');
        // }
      }
    })
  </script>

</body>

</html>

3.2 v-on事件对象

概述：

  1. 绑定的方法，它可以写小括号，也可以不写小括号
  2. 如果你绑定方法时，没有写小括号，则vue在解析时，会自动给你映射一个event给绑定方法
  3. 如果你绑定方法时，有写小括号，则需要手动把event对象传过去 e v e n t , event, event,event可以传多个，但是建议只传一个，一般写在第1位或最后1位

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <h3>{{num}}</h3>
    <!-- 如果你绑定方法时，没有写小括号，则vue在解析时，会自动给你映射一个event给绑定方法 -->
    <!-- <button @click="clickFn">点击事件</button> -->
    <!-- 
      如果你绑定方法时，有写小括号，则需要手动把event对象传过去$event,$event可以传多个，但是建议只传一个，一般写在第1位或最后1位
    -->
    <button uname="李四" data-uname="张三" @click="clickFn($event)">点击事件</button>
    <input type="text" @keyup="onEnter">
  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        num: 100
      },
      methods: {
        // event可以用它来完成dom数据的获取
        clickFn(evt) {
          this.num++
          // 自定义的需要使用getAttribute方法，简写（evt.target.name）必须使用标签内置属性
          console.log(evt.target.getAttribute('uname'));
          console.log(evt.target.dataset.uname)
        },
        onEnter(evt) {
          // 回车键是13
          if (evt.keyCode === 13) {
            console.log(evt.target.value);
          }
        }
      }
    })
  </script>

</body>

</html>

4. todolist

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <input placeholder="请输入内容" type="text" @keyup="onEnter">
    <hr>
    <ul>
      <!-- 条件渲染 -->
      <li v-if="todos.length===0">无任务</li>
      <li v-else v-for="item,index in todos" :key="item.id">
        <span>{{item.title}}</span>
        <!-- <span @click="del(item.id)">删除</span> -->
        <span @click="del(index)">删除</span>
      </li>
    </ul>

  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        todos: []
      },
      methods: {
        onEnter(evt) {
          if (evt.keyCode === 13) {
            this.todos.push({
              // Date.now() 返回自1970年1月1日00:00:00 UTC以来经过的毫秒数
              id: Date.now(),
              title: evt.target.value.trim()
            })
            evt.target.value = ''
          }
        },
        // del(id) {
        //   // 删除
        //   this.todos = this.todos.filter(item => item.id != id)
        // }
        del(index) {
          // splice 可以用来替换/删除/添加数组内某一个值或几个值，该方法会改变初始数组。
          // 删除 它可以使用 vue中提供的变异方法splice来完成，用此方法它会触发视图更新
          this.todos.splice(index, 1)
        }
      }
    })
  </script>

</body>

</html>

5. 事件修饰符

多个修饰符，通过点来连接操作 用来处理事件的特定行为。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <!-- 事件修饰符 -->
    <!-- <input placeholder="请输入内容" type="text" @keyup.enter="onEnter" > -->
    <!-- 多个修饰符，通过点来连接操作 用来处理事件的特定行为 -->
    <!-- @keyup.alt.112：alt键+F1键 -->
    <input placeholder="请输入内容" type="text" @keyup.alt.112="onEnter" >
    <hr>
    <ul>
      <!-- 条件渲染 -->
      <li v-if="todos.length===0">无任务</li>
      <li v-else v-for="item,index in todos" :key="item.id">
        <!-- once事件只绑定一次 -->
        <a @click.prevent.once="showDetail" href="http://www.baidu.com">{{item.title}}</a>
        <!-- <span @click="del(item.id)">删除</span> -->
        <span @click="del(index)">删除</span>
      </li>
    </ul>

  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        todos: []
      },
      methods: {
        showDetail() {
          console.log(1111);
         },
        onEnter(evt) {
          this.todos.push({
            id: Date.now(),
            title: evt.target.value.trim()
          })
          evt.target.value = ''
        },
        // del(id) {
        //   // 删除
        //   this.todos = this.todos.filter(item => item.id != id)
        // }
        del(index) {
          // 删除 它可以使用 vue中提供的变异方法splice来完成，用此方法它会触发视图更新
          this.todos.splice(index, 1)
        }
      }
    })
  </script>

</body>

</html>

6. 动态样式

6.1 class

class样式的动态添加，分为对象和数组方式

注意：

  1. class和style都属于DOM属性，所以在vue中都用:class和:style表示
  2. 对象: {key它就是样式名称:布尔值【true生效，false不生效】} – 一般用于开关显示的样式,不太适合添加新的属性样式
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
  <style>
    .active {
      color: red;
    }

    .font30 {
      font-size: 30px;
    }
  </style>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <!-- 
      class样式的动态添加，对象和数组方式
      class和style都属于DOM属性，所以在vue中都用:class和:style表示
      对象: {key它就是样式名称:布尔值【true生效，false不生效】} -- 一般用于开关显示的样式,不太适合添加新的属性样式
     -->
    <!-- <div :class="titleClass">我是一个标题</div>
    <button @click="addClass">添加样式</button> -->

    <!-- 
      数组:[元素样式名称]
      一般对于追加新样式，使用数组
     -->
    <div :class="titleStyle">我是一个标题</div>

    <button @click="addStyle">添加样式</button>
  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        titleClass: { active: false },
        titleStyle: []
      },
      methods: {
        addClass() {
          // 点击切换
          // this.titleClass.active = !this.titleClass.active


          // this.titleClass.active = true//这里执行的时候会刷新数据，会顺带执行了下一句
          // this.titleClass.font30 = true//注意，把上一句注释，只执行这一句的时候，样式不会生效，因为这里是是新加的属性，并没有被劫持
          // console.log(this.$data);

          // Vue方法
          // 动态给对象添加成员属性（Vue中的方法）
          // this.$set(this.titleClass, 'font30', true)
          // let obj =  Object.assign(参数1地址和返回值地址是同一个地址)
        },
        addStyle() {
          // 给数组添加元素，元素就是样式名称，这样它会就追加样式
          // push unshift shift pop splice sort reverse 调用时都会让视图更新
          this.titleStyle.push('active')
          this.titleStyle.push('font30')
        }
      }
    })
  </script>

</body>

</html>

6.2 style

style样式的动态添加，分为对象和数组方式。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <!-- 
      style样式的动态添加，对象和数组方式
     -->
    <!-- 
      对象
    -->
    <div :style="{color:'blue',fontSize:'30px'}">我是一个标题</div>
    <!-- 
      数组
    -->
    <div :style="[{color:'blue'},{fontSize:'30px'}]">我是一个标题</div>

    <!-- <button @click="addStyle">添加样式</button> -->
  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
      },
      methods: {
      }
    })
  </script>

</body>

</html>

7. input表单

概述：

在没有使用v-model指令时，来通过data数据控制表单项中的值，还是麻烦的，绑定属性和事件来完成 – 受控组件
v-model它是一个语法糖，value和事件的综合体

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <div>

      <input type="text" v-model="username">
    </div>
  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      // methods: {
      //   setUsername(evt) {
      //     this.username = evt.target.value.trim()
      //   }
      // }
    })
  </script>

</body>

</html>

8. v-model修饰

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <!-- v-model修饰符 -->
    <!-- 延时更新数据源中的数据 光标移开才会改变数据 -->
    <!-- <input v-model.lazy="title"> -->
    <!-- 去空格 trim -->
    <!-- <input v-model.trim="title"> -->
    <!-- 转为数值 number -->
    <input type="number" v-model.number="n1">
    +
    <input type="number" v-model.number="n2">
    = {{n1+n2}}
  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        title: '',
        n1: 1,
        n2: 2
      }
    })
  </script>

</body>

</html>

二、自定义指令

相关文章：

  • Linux基础-网络配置
  • excel怎么设置选项按钮？
  • 商标查询接口
  • C#核心04——委托和事件
  • vue项目设置打包后的静态文件访问路径
  • 2021兴业数金Java笔试题面经
  • 【无标题】产品经理基础--08交互说明撰写方法
  • 2021-05-13 Redis面试题 Redis集群最大节点个数是多少？
  • word内容和纸张方向一起旋转的方法
  • 深入理解计算机系统 csapp datalab 详解(位操作，数据表示)
  • flink 实时计算与RockDB状态存取的猜想
  • 1.5-39:与7无关的数
  • linux中开始mysql中binlog日志
  • 树——二叉查找树 - 有删除动作
  • idea远程拉取新项目
  • ES6指北【2】—— 箭头函数
  • 【笔记】你不知道的JS读书笔记——Promise
  • CODING 缺陷管理功能正式开始公测
  • Docker 笔记（1）：介绍、镜像、容器及其基本操作
  • extract-text-webpack-plugin用法
  • MySQL几个简单SQL的优化
  • PyCharm搭建GO开发环境(GO语言学习第1课)
  • Spark in action on Kubernetes - Playground搭建与架构浅析
  • Spring-boot 启动时碰到的错误
  • Swoft 源码剖析 - 代码自动更新机制
  • 基于阿里云移动推送的移动应用推送模式最佳实践
  • 漂亮刷新控件-iOS
  • 日剧·日综资源集合（建议收藏）
  • 如何进阶一名有竞争力的程序员?
  • 为视图添加丝滑的水波纹
  • 一加3T解锁OEM、刷入TWRP、第三方ROM以及ROOT
  • MPAndroidChart 教程：Y轴 YAxis
  • 积累各种好的链接
  • ​Linux·i2c驱动架构​
  • (done) ROC曲线 和 AUC值 分别是什么？
  • （二）JAVA使用POI操作excel
  • （二）WCF的Binding模型
  • （一）spring cloud微服务分布式云架构 - Spring Cloud简介
  • (转)Groupon前传：从10个月的失败作品修改，1个月找到成功
  • .bat批处理（五）：遍历指定目录下资源文件并更新
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • .net framework profiles /.net framework 配置
  • .net refrector
  • @PreAuthorize注解
  • @德人合科技——天锐绿盾 | 图纸加密软件有哪些功能呢?
  • [ CTF ] WriteUp- 2022年第三届“网鼎杯”网络安全大赛（白虎组）
  • [BZOJ5125]小Q的书架(决策单调性+分治DP+树状数组)
  • [ComfyUI进阶教程] animatediff视频提示词书写要点
  • [Contest20180313]灵大会议
  • [CTO札记]如何测试用户接受度？
  • [C语言]——分支和循环（4）
  • [Git].gitignore失效的原因
  • [LeetCode] 626. 换座位
  • [Linux] Boot分区满了的处理方法　The volume boot has only 0 bytes disk space remaining
  • [Linux] 常用命令--版本信息/关机重启/目录/文件操作