vue之基础指令及事件入门

最新推荐文章于 2024-06-05 16:31:26 发布
最新推荐文章于 2024-06-05 16:31:26 发布
阅读量105 收藏
点赞数
分类专栏： web之Vue 文章标签： vue 前端 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hi__web/article/details/106901853
版权

您可以直接将以下代码c,v到编辑器打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你好vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        /* 解决差值表达式的闪动问题 */
        
        [v-cloak] {
            display: none;
        }
        
        .num {
            font-size: 30px;
            color: pink;
        }
    </style>
</head>

<body>
    <!-- MVVM设计思想M:数据,V:页面视图,VM:vue实例 -->
    <!-- 渐进式的js框架 声明式渲染 组件系统 客户端路由 集中式状态管理系统 项目 -->
    <!-- 根元素 -->
    <div id="app">
        <!-- 差值表达式 -->
        <div>
            <div v-cloak> {{msg}}</div>
            <div v-cloak class="num">{{num}}</div>
            <!-- 支持计算 -->
            <div v-cloak>{{msg+222}}</div>
            <!-- 原文输出 -->
            <div v-pre>{{msg2}}</div>
            <!-- 只编译一次 -->
            <div v-once>{{info}}</div>
            <!-- 代替差值表达式 -->
            <div v-text="msg"></div>
            <!-- 解析html片段 -->
            <div v-html="msg1"></div>
        </div>
        <hr>
        <!-- 双向数据绑定常用于表单-->
        <div>
            <input type="text" v-model="msg">
        </div>
        <hr>
        <!-- 事件绑定 -->
        <div>
            <button v-on:click="num++">点击加1</button>
            <button @click="num--">点击减1</button>
            <!-- 1.直接函数名调用,不加()默认携带事件对象 -->
            <button @click="jian">点击加5</button>
            <!-- 2.函数名加()调用 -->
            <button @click="jian5()">点击减5</button>
            <!-- 事件传参 -->
            <button @click="chuancan(123)">点击加123</button>
            <!-- 事件对象$event固定写法 -->
            <button @click="duixiang(456,$event)">点击减456</button>
            <!-- 事件修饰符之stop阻止冒泡-->
            <a href="#" @click.stop="jian">stop阻止冒泡</a>
            <!-- 事件修饰符之prevent阻止默认行为-->
            <a href="https://www.baidu.com" @click="jian">去往百度</a>
            <a href="https://www.baidu.com" @click.prevent="jian">prevent阻止默认行为</a>
            <!-- 按键修饰符之回车 -->
            <input type="text" @keyup.enter="huiche" value="回车乘2">
            <!-- 自定义按键修饰符 -->
            <input type="text" @keyup.f1="huiche" value="回车乘2">
        </div>
        <hr>
        <!-- 属性绑定 -->
        <div>
            <div>
                <a v-bind:href="url">京东</a>
                <a :href="url">京东</a>
            </div>
        </div>
        <hr>
    </div>

    <script type="text/javascript">
        // 自定义按键修饰符13是按键回车的固定的唯一标识,f1自定义名
        Vue.config.keyCodes.f1 = 13;


        var vm = new Vue({
            // 实例挂载位置
            el: '#app',
            // 实例所需数据
            data: {
                msg: 'nihao vu',
                msg1: ' <h1>nihao </h1>',
                info: '改变无效',
                num: 1,
                url: 'https://www.jd.com'
            },
            // 定义事件
            methods: {
                // 通过this可以访问vue实例对象,
                jian: function(event) {
                    this.num += 5
                        // 得到事件绑定元素
                    console.log(event.target.tagName, 111111111);
                },
                jian5: function() {
                    this.num -= 5
                },
                // 事件传参
                chuancan: function(i) {
                    this.num += i
                },
                // 事件对象
                duixiang: function(i, event) {
                    this.num -= i
                        // 得到事件绑定元素
                    console.log(event.target.tagName, 2222222222222);
                    // 得到事件绑定内容
                    console.log(event.target.innerHTML, 3333333);

                },
                // 按键修饰符
                huiche: function() {
                    this.num *= 2
                        //  得到事件绑定按键码
                    console.log(event.keyCode, 44444444);
                }
            }
        })
    </script>

</body>

</html>

遇见即是缘分,不吝望请赐教

hi__web
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础3-实例中的数据，事件和方法
jianjian_5201314的博客
10-22 868
1.数据 Vue实例，data属性，在里面可以配置任意的数据名字 示例：data配置任意数据名字 注意插值表达值的用法：两个花括号开始，两个花括号结束，意思是把number的值插入到h1之中 除了这种写法，还有其他几种写法 1.v-text指令 它的意思是h1的内容，由number这个变量决定； v-text是vue之中的一个指令，指令跟的东西是一个变量，它告诉h1, 你要显示的内容是number这个变量。 2.v-html指令 范例：d...
Vue 2.0入门基础知识之内部指令详解
08-29
主要介绍了Vue 2.0入门基础知识之内部指令知识，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下
Vue基础事件
qq_35801979的博客
05-23 222
事件 指令v-on 格式 v-on:eventType = “事件处理程序名称” 简写 @eventType = ‘事件处理程序名称’ 参数 如果参数中需要事件对象，在方法调用的时候，使用一个叫做 $event的作为实际参数 事件修饰符 修饰符 事件的修饰符 格式： v-on:click.xxx = ‘handler’ xxx指的是修饰符的名称 问题： 修饰符使用有什么好处...
Vue之基础事件
chaofei_liang的博客
09-24 344
1.基础事件，先弹框试试 window.onload=function(){ new Vue({ el:'#box', data:{ //数据 arr:['
Vue的基本事件处理
dragoned_123的博客
01-08 688
Vue学习-事件处理 事件修饰符 @click.prevent阻止事件默认行为 @click.stop阻止事件冒泡 @click.once事件只触发一次 @click.capture使用事件的捕获模式 @click.self只有event.target是当前操作的元素才是触发事件 @click.passive事件的默认行为立即执行，无需等待回调执行完毕 <div id="root"> <h1>hello,{{name}}</h1> <!-- 阻止默认事
七、【VUE基础】事件处理
天行健，君子以自强不息
07-30 235
事件处理
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue常用指令及用法（入门篇）
小宇，要努力敲代码
10-19 1725
vue的内置指令有：v-bind指令、v-on指令、v-model指令、v-for指令、v-text指令、v-html指令、v-pre指令、v-cloak指令、v-if指令、v-else-if指令、v-else指令、v-show指令、v-once指令、v-slot指令。v-bind可以接受一个参数，用于响应式更新HTML的属性的属性值，v-bind：可以缩写为： v-on可以用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用来绑定Vue中met
vue基础入门
weixin_58470558的博客
05-13 5724
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
Vue指令学习 | 零基础入门
wei_shuo的博客
10-01 1657
Vue.js是用于构建交互式的 Web 界面的库，提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API
Vue.JS入门教程之自定义指令
10-20
主要为大家详细介绍了Vue.JS入门教程之自定义指令,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
浏览器阻止屏幕息屏,js阻止浏览器息屏,Web网页阻止息屏
lianmindiandi
06-04 173
比如打开一个浏览器页面(比如大屏),想让它一直显示着,而不是过几分钟不操作就屏幕黑了.(电脑有设置电脑不操作就会多长时间就会息屏睡眠,如果要求每个客户都去操作一下电脑设置一下从不睡眠,这很不友好和现实.而且我也只想客户在大屏的时候才这样,其他页面就正常,按电脑设定走)如果想看看效果,可以试试,最好把电脑息屏改成1分钟,要不然等太久了, 累啊…(除非等待时间玩把手游😁)这是看了前端css大佬张鑫旭写的一波文章,观后有感😄,如果大家不认识,百度一波。是不是很简单,但是这里面还有一些注意点,
Typescript高级: 深入理解extends keyof语法
Wang的专栏
06-02 827
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
NSSCTF WEB 题解（一）
2301_81105268的博客
06-04 1024
题目提示：F12下发环境，打开网址，进入网页后点击F12查看源代码直接查找flag可以得到flag。
区块链部署笔记（Centos7）包含fisco bcos与webase！
weixin_74163644的博客
06-03 1001
使用已有链时需配置# 已有链的路径，start_all.sh脚本所在路径# 路径下要存在sdk目录（sdk目录中包含了SSL所需的证书，即ca.crt、sdk.crt、sdk.key和gm目录（包含国密SSL证书，gmca.crt、gmsdk.crt、gmsdk.key、gmensdk.crt和gmensdk.key）最后一步是关键，要么开放mysql使用的（默认3306）端口，要么关闭windows防火墙（比赛时推荐），不然很可能访问不了，在控制面板设置即可，开放端口的话，需要配置一个入站规则；
java 使用WebClient发送https请求
IM507的博客
06-05 289
使用createWebClient()方法来构建WebClient进行SDK调用
vue2的element的table组件使用form校验
最新发布
wzp20092009的博客
06-05 304
vue2有时候做自增表格el-table，希望能够带一些校验，但又不想手搓校验逻辑，可以借用el-form的校验逻辑。
vue3入门基础教程
09-06
Vue 3 是一款流行的 JavaScript 框架，用于构建...这只是一个简单的入门教程，Vue 3 还有很多其他功能和概念，例如组件、指令、事件处理等。你可以查阅 Vue 3 的官方文档以获得更详细的了解和学习资源。祝你学习愉快！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值