vue指令

最新推荐文章于 2024-06-11 09:38:15 发布
最新推荐文章于 2024-06-11 09:38:15 发布
阅读量226 收藏
点赞数
分类专栏： vue2 前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/idiot_MAN/article/details/126923415
版权
前端 同时被 2 个专栏收录
67 篇文章 2 订阅
订阅专栏
vue2
20 篇文章 1 订阅
订阅专栏

vue指令

文章目录

v-bind

属性绑定

<标签名 v-bind:属性名=“属性值” /> <标签名 :属性名=“属性值” />

v-html/v-text

<标签名 v-html=“数据变量” /> <标签名 v-text=“数据变量” />

v-on

给标签绑定事件

语法

  • v-on:事件名=“要执行的少量的代码”
  • v-on:事件名=“methods中的函数”
  • v-on:事件名=“methods中的函数(实参)”

简写 @事件名=“methods中的函数(实参)”

v-on事件对象

vue处理函数中，拿到事件对象

语法:

  • 无传参: 通过形参直接接收
  • 传参: 通过$event指定事件对象传给事件处理函数
<body>
    <div id="app">
      <a @click="fn" href="http://www.baidu.com">阻止百度</a>
      <hr />
      <a @click="eveFn(10,$event)" href="http://www.baidu.com"
        >阻止跳转到百度</a
      >
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        fn(e) {
          // 阻止默认行为
          e.preventDefault()
        },
        eveFn(num, e) {
          e.preventDefault()
        },
      },
    })
  </script>
v-on修饰符

在事件后面.修饰符名,给事件带来更强大的功能

修饰符是由点开头的指令后缀来表示的

语法：

  • @事件名.修饰符 =“methods函数”
    • .stop 阻止事件冒泡
    • .prevent 阻止默认行为
    • .once 程序运行期间，只触发一次事件处理函数
    • .self 只当在 event.target 是当前元素自身时触发处理函数
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
      .main {
        width: 400px;
        height: 200px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div @click="fn1">
        <button @click.stop="btnFn">stop阻止事件冒泡</button>
        <a @click.prevent.stop="aFn" href="http://www.baidu.com"
          >prevent阻止默认行为</a
        >
        <button @click.once="onceFn">once触发一次</button>
      </div>

      <!--.self  只当在 event.target 是当前元素自身时触发处理函数  -->
      <div @click.self="fn1" class="main">
        <button @click="btnFn">stop阻止事件冒泡</button>
        <a @click.prevent="aFn" href="http://www.baidu.com"
          >prevent阻止默认行为</a
        >
        <button @click.once="onceFn">once触发一次</button>
      </div>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        fn1() {
          alert('fn1')
        },
        btnFn() {
          alert('btnFn')
        },
        aFn() {
          alert('aFn')
        },
        onceFn() {
          alert('onceFn')
        },
      },
    })
  </script>
v-on按键修饰符

给键盘事件添加修饰符

语法

  • @keyup.enter 监听回车按键
  • @keyup.esc 监听返回按键
<body>
    <div id="app">
      <input type="text" @keyup.enter="enterFn" />
      <br />
      <input type="text" @keyup.esc="escFn" />
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        enterFn() {
          alert('enterFn')
        },
        escFn() {
          alert('escFn')
        },
      },
    })
  </script>
v-model

主要用于表单元素,把value属性和vue数据变量，双向绑定到一起

语法:

v-model=“vue数据变量”

  • 双向数据绑定(vue内部采用MVVM设计模式)
    • 数据变化–>视图自动同步
    • 视图变化–>数据自动同步
<body>
    <div id="app">
      <!-- v-model:实现vue变量和表单标签value属性，双向绑定的指令 -->
      <div>
        <span>用户名</span>
        <input type="text" v-model="username" />
      </div>
      <div>
        <span>密码</span>
        <input type="password" v-model="pass" />
      </div>
      <div>
        <span> 来自于</span>
        <!-- 下拉菜单要绑定在select上 -->
        <select v-model="city">
          <option value="北京市">北京</option>
          <option value="南京市">南京</option>
          <option value="天津市">天津</option>
        </select>
      </div>

      <div>
        <span>性别</span>
        <input type="radio" value="男" v-model="gender" />男
        <input type="radio" value="女" v-model="gender" />女
      </div>

      <!-- 
遇到复选框  v-model的变量值
数组     关联的是复选框的value值
非数组     关联的是复选框的checked属性
       -->
      <div>
        <span>爱好</span>
        <input type="checkbox" v-model="hobby" value="抽烟" />抽烟
        <input type="checkbox" v-model="hobby" value="喝酒" />喝酒
        <input type="checkbox" v-model="hobby" value="打游戏" />打游戏
      </div>

      <div>
        <span>全选</span>
        <input type="checkbox" v-model="checkall" />
      </div>

      <div>
        <span>自我评价</span>
        <textarea v-model="content"></textarea>
      </div>

      <hr />
      <div>{{username}}</div>
      <div>{{pass}}</div>
      <div>{{city}}</div>
      <div>{{gender}}</div>
      <div>{{hobby}}</div>
      <div>{{checkall}}</div>
      <div>{{content}}</div>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        username: '用户名',
        pass: '',

        city: '南京市',
        gender: '男',
        hobby: ['打游戏'],
        checkall: true,
        content: '',
      },
      methods: {},
    })
  </script>
v-model修饰符

让v-model拥有更强大的功能

语法:

  • v-model.修饰符=“vue数据变量”

    • .number 以parseFloat转成数字类型
    • .trim 去除首尾空白字符
    • .lazy change时触发而非input
 <body>
    <div id="app">
      <div>
        <span>年龄</span>
        <input type="text" v-model.number="age" />
      </div>

      <div>
        <span>人生格言</span>
        <input type="text" v-model.trim="motto" />
      </div>

      <div>
        <span>自我介绍</span>
        <textarea v-model.lazy="content"></textarea>
      </div>
      {{content}}
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        age: 0,
        motto: '',
        content: '',
      },
      methods: {},
    })
  </script>
v-show和v-if

控制标签的显示隐藏

语法:

  • v-show=“vue变量”
  • v-if=“vue变量”

原理:

  • v-show用的是display:none控制标签的显示隐藏 （频繁切换）

  • v-if 用的是插入和删除节点来控制标签的显示隐藏

  • v-else

<body>
    <div id="app">
      <h1 v-show="isOk">v-show的盒子</h1>
      <h1 v-if="isOk">v-if的盒子</h1>

      <div>
        <!-- v-if和v-else的两个标签必须紧挨着   -->
        <p v-if="age>15">我成年了</p>
        <p v-else>未成年</p>
      </div>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isOk: true,
        age: 15,
      },
      methods: {},
    })
  </script>
</html>
v-for

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

语法：

  • v-for=“(值,索引) in 目标结构”

  • v-for=“值 in 目标结构”

目标结构

  • 可以遍历数组/对象/数字/字符串
<body>
    <div id="app">
      <ul>
        <li v-for="(item,index) in arr">{{index}} ---{{item}}</li>
      </ul>
      <hr />
      <ul>
        <li v-for="obj in stuArr">
          {{obj.name}}---{{obj.sex}}---{{obj.hobby}}
        </li>
      </ul>
      <hr />
      <div v-for="(value,key) in tObj">{{key}}---{{value}}</div>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        arr: ['aaa', 'bbb', 'ccc', 'ddd'],
        stuArr: [
          {
            id: 1001,
            name: '孙悟空',
            sex: '男',
            hobby: '唱歌',
          },
          {
            id: 1002,
            name: '猪八戒',
            sex: '男',
            hobby: '背媳妇',
          },
        ],
        tObj: {
          name: '小妞',
          age: 12,
          class: '1班',
        },
      },
      methods: {},
    })
  </script>
</html>
idiot_MAN
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue指令的钩子函数使用方法
08-31
主要为大家详细介绍了Vue指令的钩子函数使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue自定义指令写法与个人理解
01-19
什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
Vue指令介绍及使用
AI_huihui的博客
11-06 2163
一、什么是指令 在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头。 二、插值表达式 在dom标签中直接插入内容，又叫声明式渲染/文本插值。 语法：{{ 表达式 }} 注意：dom中插值表达式赋值, vue的变量必须在data里声明 三、vue中常用 v-...
vue指令大全
qq_43235503的博客
04-13 1556
vue指令大全
vue 指令
ajdhakj6的博客
08-22 1383
vue 常用指令
Vue指令之自定义指令
interstingh的博客
03-29 1491
自定义指令 在每个vue组件中，可以在directives节点下声明私有自定义指令 钩子函数 bind：只调用一次，指令第一次绑定到元素时调用。在这里进行一次性的初始化设置 inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档，因为DOM节点插入是异步的） update：所在组件的VNode更新时调用，但是可能发生VNode更新之前。 指令的值可能发生了改变，也可能没有 但是可以通过比较更新前后的值来忽略不必要的模版更新 先触发update再触发componentU
Vue指令学习文档
流楚丶格念的博客
03-09 4078
文章目录Vue指令插值表达式Vue基本指令Vue指令之`v-bind`的三种用法Vue指令使用综合案例Vue指令之`v-on`和`跑马灯效果`跑马灯效果跑马灯完整代码Vue指令之`v-on的缩写`和`事件修饰符`事件修饰符：Vue指令之`v-model`实现`双向数据绑定`双向数据绑定案例Vue指令之`v-for`和`key`属性1. 迭代数组案例：循环遍历普通数组案例 ：循环遍历对象数组2. 迭代对象中的属性案例：遍历对象中属性3. 迭代数字案例：迭代数字输出4.for循环中key的使用Vue指令之`v-
Vue指令大全
qq_45479398的博客
02-25 3337
Vue指令大全 对于一些刚接触Vue的小伙伴来说，可能都记不清楚Vue有哪些指令 现在，我开始隆重介绍一下Vue有哪些指令。 v-on v-on 是事件绑定，可以缩写为@,如果需要event就在函数里面传参;例如@click=“btn($event)”； 常用的修饰符也有很多： 比如 .stop用来取消冒泡事件； . prevent阻止默认事件； .once只执行一次；当然还有许多。 v-model v-model 是双向绑定，一般用于文本框、单选、复选、下拉； 常用的修饰符有 .lazy - 取代 in
vue指令实现埋点
weixin_43837268的博客
04-26 2281
1. 自定义指令 import Vue from 'vue' // 自定义埋点指令 Vue.directive('track', { //钩子函数，只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 /* * el:指令所绑定的元素，可以用来直接操作 DOM * binding：一个对象，包含以下 property: * name：指令名，不包括 v- 前缀。 * value：指令的绑定值，例如：v-my-directive="1 + 1" ...
使用Vue指令实现下拉菜单效果
yuhaowen的博客
03-19 7248
使用Vue指令实现下拉菜单效果 模仿重庆红岩历史革命博物馆官网的导航栏内容和效果，使用Vue实现。 官网地址如下：https://www.hongyan.info/ 官网效果 效果图片展示 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
vue常用指令
热门推荐
jayLog的博客
01-29 2万+
vue2.x的常用指令。篇幅简短，易懂
Vue 指令实现按钮级别权限管理功能
10-17
主要介绍了Vue 指令实现按钮级别权限管理功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue指令指令大全
01-19
为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。 <div v-html=rawHtml></div> 这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。 3. v-pre v-pre主要用来跳过这个元素和它的子...
简单学习vue指令directive
09-01
主要和大家一起简单学习一下vue指令，directive,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 321
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 515
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 195
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
【Echarts系列】平滑折线面积图
最新发布
kk爱闹
06-11 318
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
vue指令和用法
05-30
以下是常见的Vue指令及其用法： 1. v-bind: 绑定数据到DOM元素的属性上，例如绑定src属性、href属性等。 2. v-if: 根据条件表达式来控制DOM元素的显示与隐藏。 3. v-for: 遍历数组或对象，生成相应的DOM元素。 4...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值