Vue2之常用指令

最新推荐文章于 2024-06-25 13:35:46 发布
最新推荐文章于 2024-06-25 13:35:46 发布
阅读量638 收藏 16
点赞数 19
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73339471/article/details/136094871
版权

何为Vue指令？

带有【v-】这一前缀的特殊【属性】，不同属性【对应】不同的功能

常用Vue指令

v-html

语法：v-html=“表达式”

用途：动态设置元素 innerHTML

案例

<div id="app">
     <div v-html="msg"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
       el: '#app',
       data: {
          msg: `
             <a href="https://www.bilibili.com">
                 哔哩哔哩
             </a>
          `
       }
     })
</script>

结果展示

v-show

语法：v-show = “表达式”      表达式值 true表示显示，false表示隐藏

作用：控制元素显示隐藏

底层原理

切换 css 的 display: none 来控制显示隐藏

应用场景：频繁进行切换显示隐藏的地方

案例

<div id="app">
    <div v-show="msg">v-show盒子</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: true 		//true表示显示
        }
    })
</script>

结果展示

true显示

<div id="app">
    <div v-show="msg">v-show盒子</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
   const app = new Vue({
       el: '#app',
       data: {
          msg: false		//false表示隐藏
       }
   })
</script>

结果展示

false隐藏

v-if

语法：v-if = “表达式”      表达式值 true表示存在，false表示不存在

作用：控制元素存在与否

底层原理

根据 判断条件 控制元素的 创建(存在) 和 移除(不存在) 元素节点

应用场景：不频繁进行切换的场景，即：要么存在，要么不存在

案例

<div id="app">
    <div v-if="msg">v-if盒子</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: true
        }
    })
</script>

结果展示

true存在

<div id="app">
    <div v-if="msg">v-if盒子</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: false
        }
    })
</script>

结果展示

false不存在

v-if  v-else-if  v-else

作用：进行判断渲染的作用

案例

<div id="app">
    <div v-if="gender === 1">性别：男</div>
    <div v-else>性别：女</div>

    <div v-if="rank === 'A' ">名次A</div>
    <div v-else-if="rank === 'B' ">名次B</div>
    <div v-else>名次C</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            gender: 1,
            rank: 'B'
        }
    })
</script>

结果展示

v-on

用途：事件绑定

语法

完整写法：
	1.v-on:事件名="内联语法"
	2.v-on:事件名="methods中的函数名"
简写：✔
	1.@事件名="内联语法"
	2.@事件名="methods中的函数名"

说明

1.事件名：
	点击：click
	鼠标经过：mouseenter
	获得焦点：focus
	...

2.this：指的是当前案例

数字加减案例

<div id="app">
    <button @click="number--">-</button>
    <span>{{ number }}</span>
    <button @click="number++">+</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            number: 100
        }
    })
</script>

买东西案例

<div id="app">
    <div @click="fun">
        <button @click="buy(3)">牛奶3元</button>
        <button @click="buy(6)">面包6元</button>
        <button @click="buy(4)">巧克力4元</button>
    </div>
    <div>剩余: {{ money }} 元</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            money: 100
        },
        methods: {
            buy(price){
                this.money -= price
            },
            fun(){
                alert('恭喜你购买成功')
            }
        }
    })
</script>

v-bind

用途：动态设置html中的标签属性，如src，href，title…

语法

完整写法：
	v-bind:属性名="表达式"
简写：✔
	:属性名="表达式"

案例

<div id="app">
    <button v-show="index > 0" @click="index--">上一页</button>
    <img :src="list[index]">
    <button v-show="index < list.length-1" @click="index++">下一页</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            index: 0,
            list: [
                './imgs/01.png',
                './imgs/02.png',
                './imgs/03.jpg'
            ]
        }
    })
</script>

v-bind增强练习

京东tab栏
<style>
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    display: flex;
    border-bottom: 2px solid #e01222;
    padding: 0 10px;
  }
  li {
    width: 100px;
    height: 50px;
    line-height: 50px;
    list-style: none;
    text-align: center;
  }
  li a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: #333333;
  }
  li a.active {
    background-color: #e01222;
    color: #fff;
  }
</style>

<div id="app">
  <ul>
    <li v-for="(item,index) in list" :key="item.id" @click="activeIndex = index">
      <a :class="{active: index === activeIndex}" href="#">{{ item.name }}</a>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      activeIndex: 0, //记录高亮
      list: [
        { id: 1, name: '京东秒杀' },
        { id: 2, name: '每日特价' },
        { id: 3, name: '品类秒杀' }
      ]
    }
  })
</script>

效果展示

进度条
<style>
  .progress {
    height: 25px;
    width: 400px;
    border-radius: 15px;
    background-color: #272425;
    border: 3px solid #272425;
    box-sizing: border-box;
    margin-bottom: 30px;
  }
  .inner {
    width: 50%;
    height: 20px;
    border-radius: 10px;
    text-align: right;
    position: relative;
    background-color: #409eff;
    background-size: 20px 20px;
    box-sizing: border-box;
    transition: all 1s;
  }
  .inner span {
    position: absolute;
    right: -20px;
    bottom: -25px;
  }
</style>

<div id="app">
  <!-- 外层盒子底色（黑色） -->
  <div class="progress">
    <!-- 内部盒子：进度条（蓝色） -->
    <div class="inner" :style="{ width: percent + '%' }">
      <span>{{ percent }}%</span>
    </div>
  </div>
  <button @click="percent=25">设置25%</button>
  <button @click="percent=50">设置50%</button>
  <button @click="percent=75">设置75%</button>
  <button @click="percent=100">设置100%</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      percent: 0
    }
  })
</script>

效果展示

v-for

作用：多次渲染整个元素，可以是数组，对象，数字…

语法

v-for="(item,index) in 数组"

注意：item是每一项，index是下标

图书案例

<div id="app">
    <h2>图书</h2>
    <ul>
        <li v-for="(item,index) in list" :key="item.id">
            <span>{{ item.name }}</span>
            <span>{{ item.author }}</span>
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            list: [
                {id:1,name:'《鲁滨逊漂流记》',author: '笛福'},
                {id:2,name: '《红楼梦》',author: '曹雪芹'},
                {id:3,name: '《西游记》',author: '吴承恩'},
                {id:4,name: '《罗密欧与朱丽叶》',author: '莎士比亚'}
            ]
        },
        methods: {
            del(id){
                this.list = this.list.filter(item => item.id !== id)
            }
        }
    })
</script>

结果展示

追加说明：v-for中的key

<li v-for="(item,index) in list" :key="item.id">
     <span>{{ item.name }}</span>
     <span>{{ item.author }}</span>
     <button @click="del(index)">删除</button>
</li>

语法：:key=“唯一标识”

**用途：**便于Vue进行列表项的正确排序复用

注意点

1.key只能是 字符串类型 或 数字类型
2.具有唯一性，通常使用 id 作为 key，不推荐index作为key（会发生变化，无法对应）

v-model

语法：v-model=“变量”

作用：可以让数据和视图进行双向数据绑定

何为双向数据绑定？
（1）数据改变，视图自动更新
（2）视图改变，数据自动更新

目的：可以快速【获取】和【设置】表单元素的内容

记事本案例

<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
  <header class="header">
    <h1>记事本</h1>
    <input v-model="addName" placeholder="请输入内容" class="new-todo" />
    <!-- 添加功能 -->
    <button @click="add" class="add">添加内容</button>
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item,index) in list" :key="item.id">
        <div class="view">
          <span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label>
          <!-- 删除功能 -->
          <button class="destroy" @click="del(item.id)"></button>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空 -> 如果没有任务，底部需要隐藏 -->
  <footer class="footer" v-show="list.length > 0">
    <!-- 统计 -->
    <span class="todo-count">合 计:<strong> {{ list.length }} </strong></span>
    <!-- 清空 -->
    <button class="clear-completed" @click="clear">
      清空任务
    </button>
  </footer>
</section>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      addName: '',
      list: [
        {id: 1,name: '跑步五公里'},
        {id:2,name:'跳绳100个'}
      ]
    },
    methods: {
      // 删除功能
      del(id){
        // 删除功能代码
        this.list=this.list.filter(item => item.id !== id)
      },

      // 添加功能
      add(){
        // 空内容报错
        if(this.addName.trim() === ''){
          alert("请输入内容")
          return
        }
        // 添加功能代码
        this.list.unshift({
          id: +new Date(),
          name: this.addName
        })
        // 内容清空
        this.addName = ''
      },

      // 清空功能
      clear(){
        this.list=[]
      }
    }
  })
</script>

指令修饰符

（1）按键修饰符
		@keyup.enter="表达式"		键盘回车监听
（2）v-model修饰符
		v-model.trim="表达式"		去除首位空格
		v-model.number="表达式"	转为数字
（3）事件修饰符
		@事件名.stop="表达式"		  阻止冒泡
		@事件名.prevent			阻止默认行为

键盘回车监听案例

<div id="app">
    <input @keyup.enter="add" placeholder="请输入内容"/>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        methods: {
            add(){
                console.log("监听键盘回车事件")
            }
        }
    })
</script>

v-model修饰符案例

<div id="app">
    姓名<input type="text" v-model.trim="username"><br>
    年龄<input type="password" v-model.number="age">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '',
            age: '' 
        },
        methods: {
            add(){
                console.log("监听键盘回车事件")
            }
        }
    })
</script>

阻止冒泡案例

若不阻止，点击子盒子时，弹窗会同时弹出“父盒子”。而我们想要的效果是：点击子盒子时，只弹出“子盒子”。因此，代码如下：

<style>
    .father{
        height: 360px;
        width: 360px;
        background-color: antiquewhite;
    }
    .son{
        height: 200px;
        width: 200px;
        background-color: aqua;
    }
</style>
<div id="app">
    <div class="father" @click="faFn">
    	<!-- 阻止冒泡 -->
        <div class="son" @click.stop="sonFn">son</div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        methods: {
            faFn(){
                alert("父盒子")
            },
            sonFn(){
                alert("子盒子")
            }
        }
    })
</script>

阻止默认行为案例

<div id="app">
    <a @click.prevent href="https://www.bilibili.com">哔哩哔哩</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app'
    })
</script>
袖清暮雨
关注
  • 19
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue常用指令
qq_42839746的博客
04-24 4210
Vue常用指令是带有v-前缀的特殊属性，例如v-for、v-if、v-show、v-bind。作用是当表达式的值改变时 ，将其产生的连带影响 ，响应式的作用于DOM。
Vue学习之常用指令实例详解
10-15
本文将深入探讨Vue的常用指令及其应用。 1. **创建Vue实例**： Vue实例是Vue应用的基础，它连接了JavaScript数据和DOM元素。创建一个Vue实例需要指定一个挂载的目标元素（通过`el`选项），以及数据对象（通过`data...
Vue2常用指令
Tcscsdn的博客
11-07 1104
具名插槽：父组件里面元素给上slot属性并且跟上属性值，子组件里面通过slot标签里面的name属性等于父组件里面的属性值这就是具名插槽。v-modle：只局限于input，select 标签，能将页面控件上输入的值同步到相关绑定的data属性上。编译过程：v-if切换有一个局部的编译卸载过程，切换过程中会适当的销毁和重建内部的监听事件和子组件。v-pre：阻止预编译，如果想要输出原样的纯文本文档，可以使用v-pre阻止预编译。编译条件：v-show不管什么条件都会编译，然后被缓存，而且DOM元素保留。
Vue2-常用指令
helloyuanye的博客
06-27 1387
Vue2常用指令
vue常用指令
热门推荐
jayLog的博客
01-29 2万+
vue2.x的常用指令。篇幅简短，易懂
【Vue 学习】常用指令
不谷的博客
03-15 813
【Vue 学习】常用指令
Vue入门之常用指令
桐花思雨
02-10 1295
目录`Vue` 常用指令`v-html` 指令 Vue 常用指令 Vue 指令是以 v- 开头的，作用在 HTML 上将指令绑定在元素上时，会给绑定的元素添加一些特殊行为，可将指令视作特殊的 HTML 属性 attribute 下面将介绍 Vue 中常用的几个内置指令。当然，Vue 除了内置指令，也可以根据需求自定义指令 v-html 指令 v-html：能识别 HTML 标签 <!DOCTYPE html> <html> <head> <meta chars
vue2 vue中的常用指令
小钟不想敲代码
08-24 2万+
vue中的常用指令
VUE2的自定义指令
m0_66051368的博客
05-01 4305
自定义指令
vue-cli常用命令
newsxy的专栏
05-25 1180
1、安装命令 npm config set registry https://registry.npm.taobao.org // 使用淘宝镜像服务器下载 npm install -g @vue/cli 2、卸载命令 npm uninstall -g vue-cli
总结vue中的常用指令
Xwz的博客
04-10 1290
1.v-model 指令用于表单输入，实现表单控件和数据的双向绑定。一般在 <input>、<select>、<textarea>、组件中使用。 <body> <div id="app"> <div>val的值:{{val}}</div> <input v-model="val"> </div> </body> <script&g
vue指令之常用指令介绍.md
03-02
我们都知道，vue是一个非常好用的框架，他给我们封装了很多好用的指令，自我体验是非常不错的，我们只要写少量代码，就能实现很理想的功能，这是因为vue在背后偷偷的帮我们做了很多操作，当然vue也不仅仅只有指令给...
vue常用指令代码实例总结
12-20
vue常用内置指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12_指令_内置指令</title> <style> [v-cloak] { display: none } </...
Vue常用的几个指令附完整案例
10-17
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下。感兴趣的朋友跟随小编一起看看吧
Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio
m0_73179389的博客
06-19 652
前端页面使用的elment-plus的el-upload组件。当上传文件后，会调用handleChange 方法，可以在这里进行文件相关的操作。计算文件的MD5值。
vue node nvm管理工具
qq_41820986的博客
06-21 365
nvm是Node.js的版本切换器，也就是说你的电脑可以不止一个node版本，并且可以随时切换。简单说一下这个是干什么用的，你安装完nvm后，下载对应node如果没有添加下面两段代码的话，你是只有node，没有npm的，所以必须要加上这两段代码。完成上面操作后，你的nvm就安装完成了，输入nvm -v就版本号就没问题了，剩下的就是下载对应node版本，切换node版本。准备工作：安装nvm需要卸载你之前的node，卸载的话，就直接打开电脑的控制面板，在里面找到node然后右击选择卸载即可。
Vue下载接口返回流的处理
最新发布
qq_42753983的博客
06-25 202
2.可以写公共方法处理。3-2 不需要带日期。
vue+echarts ----中国地图 下拉选择省份地图中的省份区域高亮显示以及飞线图的效果
heavenz19的博客
06-21 401
vue+echarts ----中国地图 下拉选择省份地图中的省份区域高亮显示以及飞线图的效果 用到的中国地图数据的网址： 下面上代码： 1、父组件核心代码： <template> <div class="center"> <div class="digital"> <el-select popper-class="selectz" v-model="
vue如何引入图标
qq_45398535的博客
06-24 202
方法1：iconify/vue。
总结vue2的常用指令的作用以及使用方法
03-23
Vue2 常用指令包括： 1. v-bind：绑定数据到 HTML 属性上，例如 v-bind:href="url" 可以将 url 数据绑定到 href 属性上。 2. v-model：双向绑定表单元素和数据，例如 v-model="message" 可以将 message 数据绑定到...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值