Vue常用指令

最新推荐文章于 2024-07-23 15:45:06 发布

天问一

最新推荐文章于 2024-07-23 15:45:06 发布

阅读量34

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_51929096/article/details/132304422

版权

一、指令修饰符

1.v-on 指令修饰符

作用：v-on 基于在 vue 程序中绑定事件
语法：<div v-on:事件名称="事件处理函数|js表达式"></div> 简写: 使用@代替v-on，@事件名称=“事件处理函数|js表达式”
修饰符： ---------- 事件.修饰符名称
- 语法:
  - @事件名.修饰符=“methods 里函数”
  - .stop - 阻止事件冒泡
  - .prevent - 阻止默认行为
  - .once - 程序运行期间, 只触发一次事件处理函数
按键修饰符：
- @keyup.enter-检测回车按钮
- @keyup.esc-检测返回按钮
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- 点击按钮的时候，修改isShow数据的值即可 -->
      <!-- v-on:事件名称="事件处理函数|js表达式" -->
      <!-- js表达式 -->
      <!-- <button v-on:click="isShow=!isShow">切换显示隐藏</button> -->
      <!-- 绑定函数 -->
      <!-- <button v-on:click="toggleShow">切换显示隐藏</button> -->
      <!-- v-on: 绑定事件略显麻烦，可以简写成@ -->
      <button @click="toggleShow">切换显示隐藏</button>
      <div v-show="isShow">我是一个div</div>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          isShow: true,
        },
        methods: {
          // 声明一个函数
          toggleShow() {
            this.isShow = !this.isShow;
          },
        },
      });
    </script>
  </body>
</html>

2.v-bind 指令修饰符

作用：动态绑定属性值
语法：<div v-bind:标签属性名称="数据名称|js表达式"></div>

简写：使用 :代替v-bind，:属性名="数据名称|js表达式"
修饰符：
- .sync 对 props 进行双向绑定，不能和表达式一起使用v-bind:属性名称.sync，Vue3 中移除
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- v-bind:标签属性名称="数据名称|js表达式" -->
      <!-- <div v-bind:title="title">我是一个DIV</div> -->
      <div :title="title">我是一个DIV</div>
      <button @click="fn">改title</button>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          title: "abcd",
        },
        methods: {
          fn() {
            this.title = "1234";
          },
        },
      });
    </script>
  </body>
</html>

3.v-model 指令修饰符

作用：给表单元素扩展双向数据绑定功能
语法：<div v-model="数据变量"></div>
修饰符：v-model.修饰符 = "数据变量"
- v-model.number以 parseFloat 转为数字类型
- v-model.trim去除首尾空白字符
- v-model.lazy在 change 时触发而非 input
代码：

<div id="app">
  <input v-model="name" type="text" />
  {{name}}
</div>

<script>
  const vm = new vue({
    el: "#app",
    data: {
      name: "xxx",
    },
  });
</script>

二、常用指令

1.v-bind

语法：v-bind:xxx="xxx"
简写：:xxx="xxx"
作用：单项数据绑定（为标签属性绑定动态值）

2.v-for

语法：v-for="(item,index) in xxx" :key="item.di"
- key 唯一值
作用：遍历列表进行渲染

3.v-on

语法：v-on:事件名名称="事件回调函数"
简写：@事件名称="事件回调函数"
作用：绑定事件

4.v-if/e-else-if/v-else

语法：v-if="xxx"
作用：条件判断渲染（让元素显示或隐藏）
在 vue3 中 v-if 和 v-fot 相比优先级更高，可以一起使用。在 vue2 中 v-for 更高，实际不能一起使用

5.v-show

语法：v-show="xxx"
作用：条件渲染（让元素显示或隐藏）
v-if 和 v-show 区别：
- v-if 隐藏时会销毁元素
- v-show 是通过修改样式 display:none 进行隐藏

6.v-model

语法：v-model="xxx"
作用：进行双向数据绑定

7.v-slot

语法：v-slot:xxx
简写：#xxx
作用：父子组件进行通信，通信标签数据

天问一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue常用指令

在 vue3 中 v-if 和 v-fot 相比优先级更高，可以一起使用。在 vue2 中 v-for 更高，实际不能一起使用。：v-on 基于在 vue 程序中绑定事件。： ---------- 事件.修饰符名称。：v-model.修饰符 = "数据变量"作用：单项数据绑定（为标签属性绑定动态值）@keyup.enter-检测回车按钮。以 parseFloat 转为数字类型。作用：条件判断渲染（让元素显示或隐藏）@keyup.esc-检测返回按钮。简写：@事件名称="事件回调函数"
复制链接

扫一扫