vue技术

最新推荐文章于 2024-03-15 09:20:51 发布
最新推荐文章于 2024-03-15 09:20:51 发布
阅读量130 收藏
点赞数
分类专栏： 笔记 学习 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53950248/article/details/121188601
版权
本文详细探讨了Vue中的事件修饰符，包括prevent、stop、once、capture、self和passive，以及如何阻止默认行为和事件冒泡。接着介绍了键盘事件处理，如按键别名、系统修饰键的使用以及自定义按键别名的方法。同时，通过姓名案例展示了计算属性的定义、原理，以及在何时执行get函数，并强调了计算属性相对于methods的效率优势和使用场景。
摘要由CSDN通过智能技术生成

目录

事件修饰符

代码实现

运行效果

 键盘事件

代码实现

运行结果

 姓名案例

插值语法实现

代码实现

运行结果

methods实现

 代码实现

运行结果

 计算属性

代码实现

运行效果

 计算属性_简写

代码实现

运行结果

事件修饰符

        Vue中的事件修饰符：

            1.prevent:阻止默认事件（常用）

            2.stop:阻止事件冒泡(常用)

            3.once:事件只触发一次(常用)

            4.capture:使用事件的捕获模式

            5.self:只有event.target是当前操作的元素是才触发事件

            6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕

代码实现

<!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>事件修饰符</title>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
        .box1{
            padding: 5px;
            background-color: skyblue;
        }
        .box2{
            padding: 5px;
            background-color: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- 
        Vue中的事件修饰符：
            1.prevent:阻止默认事件（常用）
            2.stop:阻止事件冒泡(常用)
            3.once:事件只触发一次(常用)
            4.capture:使用事件的捕获模式
            5.self:只有event.target是当前操作的元素是才触发事件
            6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 阻止默认事件（常用） -->
        <a href="http://www/atguigu.com"@click.prevent="showInfo">点我提示信息</a>
        <!--阻止事件冒泡(常用)  -->
        <div class="demo1"@click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
        <!--事件只触发一次(常用)  -->
        <button @click.once="showInfo">点我提示信息</button>
        <!--使用事件的捕获模式  -->
        <div class="box1"@click.capture="showMsg(1)"> 
            div1
            <div class="box2"@click="showMsg(2)">
                div2
            </div>
        </div>
        <!-- 只有event.target是当前操作的元素是才触发事件 -->
        <div class="demo1"@click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>
            <!-- passive:事件的默认行为立即执行，无需等待事件回调执行完毕 -->
            <ul @wheel.passive="demo" class="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>

    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            name:'尚硅谷'
        },
        methods:{
            showInfo(e){
                e.stopPropagation()
                alert('同学你好!')
            },
            showMsg(msg){
                console.log(msg)
            },
            demo(){
                for(let i=0;i<100000;i++){
                    console.log("#")
                }
                console.log('累坏了')
            }
        }
    })
</script>
</html>

运行效果

 键盘事件

        1.Vue中常用的按键别名:

            回车=>enter

            删除=>delete（捕获"删除"和"退格"键）

            退出=>esc

            空格=>space

            换行=>tab

            上=>up

            下=>down

            左=>left

            右=>right

        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)

        3.系统修饰键(用法特殊):ctrl、alt、alt、shift、meta

            (1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键。事件才被触发

            (2)配合keydown使用，正常触发事件

        4.也可以使用keyCode去指定具体的按键(不推荐)

        5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

代码实现

<!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>键盘事件</title>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        1.Vue中常用的按键别名:
            回车=>enter
            删除=>delete（捕获"删除"和"退格"键）
            退出=>esc
            空格=>space
            换行=>tab
            上=>up
            下=>down
            左=>left
            右=>right

        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)

        3.系统修饰键(用法特殊):ctrl、alt、alt、shift、meta
            (1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键。事件才被触发
            (2)配合keydown使用，正常触发事件

        4.也可以使用keyCode去指定具体的按键(不推荐)

        5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text"placeolder="按下回车提示输入"@keydown.enter="showInfo">
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    Vue.config.productionTip=13//定义了一个别名
    new Vue({
        el:'#root',
        data:{
            name:'尚硅谷'
        },
        methods:{
            showInfo(e){                
              // console.log(e.key,e.keyCode) 
              console.log(e.target.value)
            }           
        },
    })
</script>
</html>

运行结果

 姓名案例

插值语法实现

代码实现

<!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>姓名案例_插值语法实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓:<input type="text"v-model="firstName"><br/><br/>
        名:<input type="text"v-model="lastName"><br/><br/>
        姓名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        }
    })
</script>
</html>

运行结果

methods实现

 代码实现

<!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>姓名案例_methods实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓:<input type="text"v-model="firstName"><br/><br/>
        名:<input type="text"v-model="lastName"><br/><br/>
        姓名:<span>{{fullName()}}</span>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        methods:{
            fullName(){
                return this.firstName+'-'+this.lastName
            }
        },
    })
</script>
</html>

运行结果

 计算属性

    计算属性

        1.定义:要用的属性不存在，要通过已有属性计算得来

        2.原理：底层借助了Object.defineproperty方法提供的getter和setter

        3.get函数什么时候执行

            (1)初次读取时会执行一次

            (2)当依赖的数据发生改变时会被再次调用

        4.优势：与methods实现相比，内部有缓存机制（复用）,效率更高

        5.备注:

            1.计算属性最终会出现在vm上，直接读取使用即可

            2.如果计算属性要被修改，那必须写set函数去相应修改，且set中要引起计算时依赖的数据发生改变

代码实现

<!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>姓名案例_计算属性实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 
    计算属性
        1.定义:要用的属性不存在，要通过已有属性计算得来
        2.原理：底层借助了Object.defineproperty方法提供的getter和setter
        3.get函数什么时候执行
            (1)初次读取时会执行一次
            (2)当依赖的数据发生改变时会被再次调用
        4.优势：与methods实现相比，内部有缓存机制（复用）,效率更高
        5.备注:
            1.计算属性最终会出现在vm上，直接读取使用即可
            2.如果计算属性要被修改，那必须写set函数去相应修改，且set中要引起计算时依赖的数据发生改变
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        姓:<input type="text"v-model="firstName"><br/><br/>
        名:<input type="text"v-model="lastName"><br/><br/>
        姓名:<span>{{fullName}}</span><br/><br/>
        姓名:<span>{{fullName}}</span><br/><br/>
        姓名:<span>{{fullName}}</span><br/><br/>
        姓名:<span>{{fullName}}</span>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

    const vm=new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
            x:'你好'
        },
        methods:{
            demo(){

            }
        },
        computed:{
            fullName:{
                //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用?1.初次读取fullName时 2.所依赖的数据发生变化时
                get(){
                    console.log('get被调用了')
                    console.log(this)
                    return this.firstName+'-'+this.lastName
                },
                //get什么时候调用？当fullName被修改时
                set(value){
                    console.log('set',value)
                    const arr=value.split('-')
                    this.firstName=arr[0]
                    this.lastName=arr[1]
                }
            }
        }
    })
</script>
</html>

运行效果

 计算属性_简写

代码实现

<!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>姓名案例_计算属性实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓:<input type="text"v-model="firstName"><br/><br/>
        名:<input type="text"v-model="lastName"><br/><br/>
        姓名:<span>{{fullName}}</span><br/><br/>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

    const vm=new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        },
        computed:{
 /*           fullName:{
                get(){
                    console.log('get被调用了')
                    console.log(this)
                    return this.firstName+'-'+this.lastName
                },
            }*/
            //简写
            fullName:function(){
                console.log('get被调用了')
                return this.firstName+'-'+this.lastName  
            }
        }
    })
</script>
</html>

运行结果

 

画个圈圈诅咒你 yebo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PcVue技术白皮书-开放充电协议标准（OCPP）
11-20
PcVue技术白皮书-开放充电协议标准（OCPP） 开放充电协议标准（OCPP）是一种开放的、基于XML的充电站管理协议，旨在实现充电站之间的互操作性和互通性。OCPP protocol由荷兰公司ElaadNL开发，并于2012年发布了第一...
vue技术要点.dps
11-04
vue技术要点.dps
Vue.config.productionTip = false
01-07
开发模式：npm run dev是前端自己开发用的 生产模式：npm run build 打包之后给后端放在服务端上用的 Vue.config.productionTip = false 上面这行代码的意思 是阻止显示生产模式的消息。 如果没有这行代码，或者设置为true，控制台就会多出这么一段代码。 You are running Vue in development mode. Make sure to turn on production mode when deploying for production. 大概意思就是： 你运行的Vu是开发模式。为生产部署时，请确保启用生产模式。
Vue.config.productionTip
cc蒲公英的博客
06-30 686
Vue.config.productionTip
Vue项目main.js中的Vue.config.productionTip作用
wangatong的博客
04-16 931
//阻止显示生产模式的消息 Vue.config.productionTip = false 如果没有这行代码，或者设置为true，控制台就会多出这么一段代码。 You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html 意思是：您正在开发
Vue.config.productionTip = false 可以阻止 vue 在启动时生成生产提示
qq_36825145的博客
07-05 537
开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。Vue.config.productionTip = false 可以阻止 vue 在启动时生成生产提示。productionTip = fasle时，就没有了红框内的提示信息。productionTip = true （默认）写在main.js里面。
基于微信小程序+springboot+vue技术构建的商城平台
04-28
基于 微信小程序 + springboot + vue 技术构建 ，支持单店铺，多店铺入驻的商城平台。项目包含 微信小程序，管理后台。基于java后台语言，已功能闭环，且达到商用标准的一套项目体系。 基于 微信小程序 + ...
基于Vue技术实现的购物网站（含设计报告）
06-30
本项目适用于课程设计，利用Vue实现的一个模仿antd官网的购物网站。项目功能如下所示。 1）前端功能 商品分类展示; 商品详情 商品搜索 订单详情(购物车) 登录与注册 注意：注册用户可以购买商品，非注册用户仅可以...
Vue.config.productionTip=false
one-way or another
08-07 1146
对于开发版本，会默认向控制台打印： 设置为false就不会提示了 Vue.config.productionTip = false;
解决Vue中的生产提示
最新发布
m0_64081601的博客
03-15 447
当我们在代码页面上引入Vue.js(开发版本)时，运行代码会出现以下提示，这句话的意思是：您正在开发模式下运行Vue，在进行生产部署时，请确保打开生产模式。
Vue.config.productionTip的作用
热门推荐
yjy_191的博客
07-22 3万+
Vue.config.productionTip的作用 productionTip 值为 true 与 为 false 时的区别 productionTip = true （默认） productionTip = fasle productionTip设置为 false ，可以阻止 vue 在启动时生成生产提示 开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以
Vue.config.productionTip = false为什么不起作用？如何解决？
DIUDIUjiang的博客
09-22 7007
Vue.config.productionTip = false为什么不起作用？如何解决？
Vue.config.productionTip = false这设置有什么用？
TangMonk的博客
09-23 990
Vue.config.productionTip` 是Vue.js中的一个全局配置选项，用于控制在生产环境中是否显示一些开发环境中的提示和警告信息。
理解vue2.x版本中productionTip=false设置无效的原因
King的博客
12-14 2599
首先，我们看到vue官网中关于productionTip的API使用
初始Vue：为什么Vue.config.productionTip=false修改了，网页上的提示还在？
weixin_46232506的博客
04-08 952
阻止vue在启动时生成生产提示，网页控制台便不再显示。初学Vue的时候跟着尚硅谷学习，出现了将。，那我们也可以直接注释掉这一句，加上。，网页控制台仍然出现了提示。，也可以解决这个问题。
Vue.config.productionTip = false 不起作用时的解决方案
weixin_44566194的博客
11-03 1860
把刚下载下来的 Vue.js 文件打开，大概在代码第362行处有 “productionTip: true” ，这段代码意思是（是否开启生产提示：是），我们直接将 true 修改成 flase 保存即可，再次打开 HTML 按F12键，可以发现提示没了。第一段提示是要求去下载Vue的开发者工具(浏览器插件)，尚硅谷的视频里提供的资料里的插件不知道为什么不能拖动到浏览器上添加，我后面自己翻墙去谷歌浏览器应用商店添加了。如果能用尚硅谷提供的插件最好，毕竟国内是不能直接访问谷歌浏览器应用商店的。
Vue技术入门与实战精华
总结起来，Vue操作不仅涉及前端开发的最佳实践，还包括了如何利用Vue技术提高企业软件开发团队的能力和效率。通过汉智成的专业培训，企业可以快速提升员工的Vue技能，进而提升项目的质量和开发速度。无论是个人学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值