Vue指令学习

最新推荐文章于 2023-08-18 16:57:00 发布
最新推荐文章于 2023-08-18 16:57:00 发布
阅读量270 收藏 1
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lTeAmol/article/details/128861396
版权

六类指令

  1. 内容渲染指令：
    1）v-text：作为属性使用，但会覆盖元素内部原有的内容；
    2）{{}}插值表达式：实际开发中用的最多，只是内容的占位符，不覆盖原有的，但不能渲染带标签的数据，只能用在内容节点，不能用在属性节点；
    3）v-html：可以把带有标签的字符串，渲染成真正的HTML内容。
<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <p v-text="username">姓名：</p>
        <p v-text="gender">性别：</p>
        <hr>
        <p>姓名：{{username}}</p>
        <p>性别：{{gender}}</p>
        <hr>
        <div v-text="info"></div>
        <div>{{info}}</div>
        <div v-html="info"></div>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                username:'张三',
                gender:'女',
                info:'<h4 style="coler:red;font-weight:bold">欢迎！</h4>'
            }
        })
    </script>
</body>
  1. 属性绑定指令：
    1）v-bind：可使用v-bind:指令为元素属性动态绑定值，简写：，若绑定内容需要动态拼接，则字符串外面需包裹单引号，比如：<div :title="'box'+index">这是一个div</div>；
<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <input type="text" v-bind:placeholder="tips">
        <hr>
        <img :src="photo" alt="" style="width:150px">
        <hr>
        <div>1+2结果是：{{1+2}}</div>
        <div>{{tips}}反转的结果是：{{tips.split('').reverse().join('')}}</div>
        <div :title="'box'+index">这是一个div</div>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                tips:'请输入用户名',
                photo:'https://v2.cn.vuejs.org/images/logo.svg',
                index:3
            }
        })
    </script>
</body>
  1. 事件绑定指令：
    1）v-on：使用v-on:指令为元素绑定事件，可以通过()传递参数，简写@，
<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <p>count的值是：{{count}}</p>
        <!-- 在绑定事件处理函数时可以通过()传递参数 -->
        <button v-on:click="add(2)">+1</button>
        <button @click="sub">-1</button>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                count:0
            },
            // 定义事件的处理函数
            methods: {
                add:function(n){
                    // alert(1)
                    // console.log(vm === this)
                    vm.count += n
                },
                // ES6中可以省略：function
                sub(){
                    // alert(2)
                    this.count -= 1
                }
            },
        })
    </script>
</body>

在事件处理函数绑定时没有传参，methods中函数会自动接收一个事件，但想要传参时事件就被覆盖了， 所以提供了内置变量，$event，原生DOM的事件对象e

<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <p>count的值是：{{count}}</p>
        <!-- 需求：如果count值是偶数，则按钮背景颜色变红，否则取消颜色 -->
        <!-- 在事件处理函数绑定时没有传参，methods中函数会自动接收一个事件，但想要传参时事件就被覆盖了
        所以提供了内置变量，$event，原生DOM的事件对象e -->
        <button @click="add(1,$event)">+n</button>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                count:0
            },
            // 定义事件的处理函数
            methods: {
                add(n,e){
                    this.count += 1
                    // 判断值是否为偶数
                    if(this.count % 2 ===0){
                        // 偶数
                        e.target.style.backgroundColor = 'red'
                    }else{
                        // 奇数
                        e.target.style.backgroundColor = ''
                    }
                },
                
            },
        })
    </script>
</body>

（1）事件修饰符.prevent：阻止事件默认行为
（2）事件修饰符.stop:阻止冒泡行为

<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <!-- 在方法中通过操作e来阻止链接跳转太麻烦，可以使用修饰符.prevent实现阻止事件默认行为 -->
        <a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>
        <hr>
        <div @click="divHandler" style="height: 150px;background-color:antiquewhite;padding-left:100px;line-height:150px;">
            <!-- 阻止向外冒泡修饰符.stop -->
            <button @click.stop="btnHandler">按钮</button>
        </div>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            methods: {
                show(){
                    // 此时控制台打印后，页面跳转，跳转后打印内容就不见了，为了避免，可以使用
                    // e.preventDefault()来阻止事件的默认行为，即不进行跳转
                    // e.preventDefault()
                    console.log('点击了链接')
                },
                btnHandler(){
                    console.log('btnHandler')
                },
                divHandler(){
                    console.log('divHandler')
                }
            },
        })
    </script>
</body>

（3）按键修饰符@keyup.esc：按esc键触发事件

<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <input type="text" @keyup.esc="clearInput">
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                
            },
            methods: {
                clearInput(e){
                    console.log('触发了clearInput事件')
                    e.target.value=''
                }
            },
        })
    </script>
</body>
  1. 双向绑定指令：
    1）v-model：只能在表单元素中有意义（个人理解是双向交互的），比如:
    （1）input输入框：type=“radio"或"checkbox"或"XXXX”
    （2）textarea
    （3）select
<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <p>用户的名字是：{{username}}</p>
        <input type="text" v-model="username">
        <hr>
        <input type="text" :value="username">
        <hr>
        <select  v-model="city">
            <option value="">请选择城市</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                username:'张三',
                city:'2'
            }
        })
    </script>
</body>

2）专用修饰符
（1）.number：自动进行数值转换(有点点疑问。。。)
（2）.trim：自动过滤首尾空格
（3）.lazy：在"change"时而非"input"时更新，比如在焦点在输入框时不更新数据，失去焦点时在更新

<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <!-- v-model.number=""可以解决直接将数据转换为数值计算 -->
        <input type="text" v-model.number="n1">+<input type="text" v-model.number="n2">={{n1 + n2}}
        <hr>
        <input type="text" v-model="number">
        <button @click="getData">打印输入数据</button>
        <hr>
        <input type="text" v-model.trim="number2">
        <button @click="getData2">打印去掉前后空格的数据</button>
        <hr>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                n1:11,
                n2:2,
                number:'',
                number2:''
            },
            methods: {
                getData(){
                    console.log(this.number)
                },
                getData2(){
                    console.log(this.number2)
                }
            },
        })
    </script>
</body>
  1. 条件渲染指令
    1）v-if：原理是每次动态创建或移除元素，实现元素的显示和隐藏
    2）v-show：原理是动态为元素添加或移除display:none样式，来实现元素的显示和隐藏
    注：如果要频繁的切换元素显示状态，用v-show性能会更好，若刚进入页面时，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好
  2. 列表渲染指令
    1）v-for,只要用到了，就需要在后面绑定key属性，且尽量把id作为key的值，key的值只能是字符串或数字类型，key的值是不能重复的，要与值是唯一对应的那种
lTeAmol
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3 的 回车（enter）事件
News777的博客
09-02 8942
Vue3 的 回车（enter）事件
[vue] Vue键盘事件
qq_14993591的博客
11-02 1162
1.Vue中常用的按键别名： @keydown 键盘按下时触发 @keypress 键盘按住时触发 @keyup 键盘弹起 @keyup.13 按回车键 @keyup.enter 回车 @keyup.up 上键 @keyup.down 下键 @keyup.left 左键 @keyup.right 右键 @keyup.delete 删除键 获取按键的键码 e.keyCode <div id="root"> <h2>欢迎来到{
Vue3基础（1）——基本使用步骤、基础指令与过滤器
SongD1114的博客
04-06 1620
Vue3.0基本使用步骤、基础指令与过滤器
Vue的各种keyup键盘点击事件
周瑞的博客
03-22 1455
Vue的各种keyup键盘点击事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
Vue 键盘事件（keyup、keydown）
雨声学java
03-29 1万+
介绍：keyup表示键盘按键抬起事件，keydown表示键盘按下事件 用法：利用 v-on/ @ 来绑定事件 在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。 ​ 注意：但是，如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用到.native修饰符了，如： <el-input v-model="inputName" placeholder="搜索你的文件" @keyup....
简单学习vue指令directive
09-01
主要和大家一起简单学习一下vue指令，directive,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue.js自定义指令学习使用详解
12-13
自定义指令 自定义指令的注册方法和组件很像，也分全局注册和局部注册，比如注册一个v-focus指令用于在<input>、<textarea>元素初始化时自动获得焦点，共有两种写法： //全局注册 Vue.directive('focus...
Vue学习之常用指令实例详解
12-29
本文实例讲述了Vue常用指令。分享给大家供大家参考，具体如下： 1、创建一个vue实例 vue的一个特点就是数据驱动界面，一旦对js中的数据进行修改，界面中用到数据的地方也会立马做出更改。为了对界面进行操纵，需要先...
vue 的指令
热门推荐
青蛙king的博客
10-27 1万+
一、vue 的指令 指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。 vue的14个指令： v-text v-html（不建议使用） v-show v-if v-else-if v-else v-for v-on v-bind v-model v-slot v-pre（使用频率很低） v-once（使用频率很低） v-cloak（使用频率极低，不细介绍） 1、v-text v-text 指令，会把该元素下面的所有内.
vue中的@keyup事件
qq_43654065的博客
12-29 4449
1. @keyup事件 @keyup事件是当按键松开时，绑定的事件就会被触发。 事件代码 事件描述 @keyup.enter 回车键松开触发 @keyup.left 左键松开触发 @keyup.right 右键松开触发 @keyup.up 上键松开触发 @keyup.down 下键松开触发 @keyup.delet 删除键键松开触发 2. @keyup使用场景 登录页输入账号、密码可以直接使用enter键登录，提高用户体验。 3. @keyup在element-ui中
vue指令
fake_8的博客
12-09 2531
vue指令
vue3中的改变
bbt953的博客
07-07 265
vue3中的一些改变
怎样监听 ESC 键 完成一个弹框关闭
weixin_47353884的博客
03-02 2925
按下Esc键时，将会触发keyup.esc事件，也可以使用v-on指令监听该事件并做出相应的处理。方法来监听键盘事件，然后在检测到ESC键按下时，调用关闭弹框的方法来实现关闭弹框的功能。在Vue中，可以通过监听窗口上的键盘事件来实现ESC键关闭弹框的功能。例如，可以在组件的mounted() 钩子函数中使用。
vue指令大全
qq_43235503的博客
04-13 1556
vue指令大全
前端对应数字表 vue keyup
qq_45715615的博客
02-21 511
键盘对应数字表
【Vue 学习】常用指令
不谷的博客
03-15 794
【Vue 学习】常用指令
VUE中@keyup.enter无法触发没有效果
IU
09-16 3629
@click 和 @keyup.enter不能一起使用 可以将@keyup.enter绑定到input框上
Vue常用指令+用法举例 详解
最新发布
m0_69287579的博客
08-18 3012
有：v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。可以单独使用，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-if和v-show有同样的效果，不同在于。v-for可用来遍历数组、对象、字符串。
8个非常实用的Vue自定义指令
04-20 1084
在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过方式注册全局指令。然后在入口文件中进行Vue.use()调用。批量注册指令，新建文件在main.js引入并调用下面分享几个实用的 Vue 自定义指令v-copyv-debouncev-emojiv-LazyLoad。
Vue实例学习
05-30
学习Vue实例需要掌握以下几个方面： 1. 创建Vue实例：在Vue应用中，我们需要先创建Vue实例。可以使用Vue构造函数来创建一个新的Vue实例，如下所示： ``` var vm = new Vue({ // 选项 }) ``` 在创建Vue实例时，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值