Vue的指令综合案例

最新推荐文章于 2023-01-10 18:13:16 发布
最新推荐文章于 2023-01-10 18:13:16 发布
阅读量182 收藏
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45938852/article/details/111600921
版权

登录按键事件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <p>{{massage}}</p>
        <label for="username" v-model="username">用户名：</label>
        <input type="text" v-model="username" id="username">

        <label for="password" v-model="password">密码：</label>
        <input type="password" v-model="password" id="password" @keyup.enter="keyEnter(event)">

        <input type="submit" @click="keyEnter(event)">
        <p>{{names}}</p>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                massage:'云课堂',
                username:'',
                password:'',
                names:'',
            },
            methods:{
                keyEnter(event){
                   this.names = '姓名:' + this.username + ' 密码:' + this.password;
                   return this.names;
                },
                
            }
        })
    </script>
</body>

</html>

事件处理综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <p>{{massage}}</p>
        <input type="button" value="点击" @click="handClick">
      
      
            <h5>请选择爱好:</h5>
            <select @change="handChange">
                <option value="音乐">音乐</option>
                <option value="读书">读书</option>
                <option value="锻炼">锻炼</option>
            </select>
        
     <br><br>

            <label>
                <input type="checkbox" @click="handDisabled">同意本站协议 <br><br>
            </label>

        <input type="submit" value="提交" :disabled=" isDisabled" @click="Clicks">
    </div>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                massage:'注册账户',
                isDisabled:true,
            },
            methods:{

                handClick(){
                    console.log("btn is clicked");
                },

                handChange(){
                    console.log('选择了' + event.target.value);
                },

                //复选框勾选后提交可用
                handDisabled(event){
                    console.log(event.target.checkbox);
                    if(event.target.checkbox == true){
                        this.isDisabled = true;
                    }else{
                        this.isDisabled = false;
                    }
                },
                Clicks(){
                    console.log("提交成功");
                }
            }
        })
    </script>
</body>
</html>

事件修饰符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{massage}}</p>

        <div @click.capture="doThat">
            <!-- 冒泡事件  当.prevent被点击时，调用event.preventDefault()， -->
            <a href="http://www.baidu.com" @click.prevent="doThis">百度一下</a>
        </div>

        <!-- click事件默认的页面跳转会被阻止 -->
        <a href="http://www.baidu.com" @click.prevent="doThis">百度一下</a>

        <!-- submit事件不再刷新页面 -->
        <form action="" @submit.prevent="onSubmit"></form>

        <!-- 修饰符可以链式使用 -->
        <a @click.stop.prevent="doThat">123</a>

        <!-- 在添加事件监听器时使用capture模式 -->
        <div @click.capture="doThis">...</div>

        <!-- 只有当event.taget是元素本身时，才会调用事件处理器 -->
        <!-- 如event.taget是子元素，那么doThat不会被调用-->
        <div @click.self="doThat">...</div>

        <!-- 只有当键码为13时 才调用 -->
        <input @keyup.13="submit">  

        <!--  -->
        <input @keyup.enter="submit">
    </div>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                massage:'holle Vue.js',
                name:'name-tome'
            },
            methods:{
                doThis(){
                    alert("鼠标事件发生了变化");
                },
                doThat(){
                    alert('父元素发生了变化');
                }
            }
        })
    </script>
</body>

</html>
.你别皱眉
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
举例详解：VUE常用指令
Gobiggerr的博客
12-03 715
VUE常用指令 一、v-model
Vue基础指令与案例演示
winkooxx
03-21 211
Vue基础指令与案例演示 1.v-text与v-html v-text只会发数据渲染到标签，不会对html标签进行解析、 v-html会对html标签进行解析 <div id="box"> <!-- vue的指令：vue提供的一种行间属性，你可以加在标签上，对这个DOM元素应用一些行为。 --> <h1>{{msg}}</h1> <!-- v-text 把数据渲染到标签 --> <h1 v-text="num">
vue的基础指令演示代码及简单案例
CHEN的博客笔记
01-10 1538
主要是通过演示不同指令在代码中的使用来增进我们对知识点的理解，该篇文章仅供学习参考
【Vue系列2】—— Vue常用指令和简单案例
路漫漫其修远兮，吾将上下而求索
03-09 247
点赞多大胆，就有多大产！开源促使进步，献给每一位技术使用者和爱好者！ 干货满满，摆好姿势，点赞发车 路漫漫其修远兮，吾将上下而求索 前言 本章节咱们来说一下Vue中常用的指令，不废话直接上干货 v-show 作用 根据表达值的真假，切换元素的显示和隐藏 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script s.
vue 指令 合集 案例中学习指令 超详细
qq_48823919的博客
07-07 191
插值表达式的用法 指令合集 v-cloak ： 解决闪动问题 v-html：可解析标签,相当于innerhtml v-text： 填充纯文本相当于innertext v-once：只渲染一次 v-bind；class和style的样式绑定 v-on：绑定事件 v-if： 循环指令 与下面两个配合使用 v-else v-else-if v-for ： 循环指令 v-model ：实现表单元素的双向绑定
Vue 自定义指令功能完整实例
10-16
主要介绍了Vue 自定义指令功能,结合完整实例形式分析了vue.js自定义指令相关实现与使用操作技巧,需要的朋友可以参考下
Vue_综合案例
qq_44509920的博客
09-24 643
文章目录1.1 案例需求1.2 数据库设计与表结构1.3 服务器端1.3.1 创建SpringBoot项目1.3.2 导入jar包1.3.3 配置文件（application.properties）1.3.4 创建springboot引导类1.3.5 创建实体1.3.6 创建Dao1.3.7 创建Service1.3.8 创建Controller1.4 浏览器端1.4.1 user.html1.4.2 查询所有1.4.2.1 UserService1.4.2.2 UserController1.4.2.3
Vue指令综合案例——汽车品牌管理（项目实战）
09-07
使用实现【汽车品牌管理系统】 本资源适合零基础小白进行学习； 包含博主博客【前端知识】【vue学习】中的汽车品牌管理实战...Vue自定义指令 自定义指令v-focus光标聚焦、v-color指定文本颜色、v- fontSize指定字体大小
VUE&Element&综合案例1
08-03
VUE&Element 综合案例1 本文档将详细介绍 VUE 框架的基础知识，包括 VUE 概述、快速入门、条件判断指令等内容。同时，文章还将介绍 VUE 中的双向绑定思想、MVVM 模式、插值表达式、指令作用等重要概念。 VUE 概述 ...
vue组件编写之todolist组件实例详解
08-28
并使用了 `v-for` 指令来遍历列表中的数据，并将其显示出来。 总结 本文主要介绍了 Vue 组件编写之 TodoList 组件的实例讲解，包括组件注册、模板编写、样式设计、事件处理和组件功能等方面的知识点。通过阅读本文...
Vue常用的几个指令附完整案例
01-19
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下，做个demo演示。 指令 v-text v-html v-bind v-on v-model v-for 代码 学习技术最好还是要看下代码是什么样的。 v-text 解释：更新DOM对象的 textContent <h1 v-text=msg></h1> v-html 解释：更新DOM对象的 innerHTML <h1 v-html=msg></h1> v-bind 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 语法： v-bind:title=msg // 简写：:tit
vue内部指令实例，大家快来学习吧
07-22
vue内置指令实例，刚入坑的小伙伴们快来试一下吧。老流氓吴喷
vue大纲.docx
05-11
通过购物车和地址管理的案例，实践Vue.js、Vue-router和Vuex的综合运用，包括用户交互、状态管理、路由跳转、组件通信等实际开发流程。 以上内容涵盖了Vue的基础语法、API、路由管理和状态管理，以及实际项目中的...
vue实现学生录入系统之添加删除功能
12-12
vue指令综合案例</title> <style> #app{ margin: 50px auto; width: 620px; } fieldset{ border: 2px solid plum; margin-bottom: 20px; } fieldset input{ width: 200px; height: 30px; ...
VUE购物车小案例—vue指令的综合应用
weixin_45603043的博客
10-27 411
需求： 运用Vue基础指令知识实现小小购物车： 涉及到的指令有：v-for、v-model 、v-on、v-text 1.能够显示商品名，价格，以及当前商品在购物车的数量 2. 点击 加+ 减- 可以更改购物车中产品数量，如果数量小于0 则移除 3.根据产品价格和数量统计出总金额。 话不多说，直接上代码：（无css样式） <!DOCTYPE html> <html&...
Vue入门（二）——本地应用
木瓜有益健康的博客
07-15 295
Vue进阶——本地应用一、Vue指令1.1 内容绑定，事件绑定1.2 显示切换，属性绑定1.3 列表循环，表单元素绑定 一、Vue指令 el：挂载点 data：数据 methods：方法 1.1 内容绑定，事件绑定 （1）v-text 设置标签的内容，只解析文本。需要部分替换，使用插值表达式{{}}的方式 <h2 v-text="message+'!'"><h2> <h2>{{ message+"!" }}?</h2> （2）v-html 设置元素的inn
hammer.js自定义vue指令的简单例子
阿友的专栏
11-20 3794
因为vue没有触摸事件的指令所以自己写一个简单的例子 function vueTouch(el,type,binding){ this.el = el; this.type = type; this.binding = binding; var hammertime = new Hammer(this.el);
Vue学习笔记（1）
魔法革1996
11-17 630
学习准备： 浏览器插件 Vue.js devtools VS Code插件 自动补全标签 Auto Close Tag Auto Complete Tag Auto Rename Tag 开启一个服务器浏览HTML网页，第一次使用需要Ctrl + Shift + p输入 live server选择open Live Server 路径自动补全 ...
三一、vue笔记--新（一）
梅某某
05-18 404
1.4.3 Vue常用系统指令 插值表达式{{}}： 数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值 例如：span>Message: {{ msg }}span> Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。 无论何时，绑定的数据对
vue综合案例注意事项
最新发布
06-09
在开发vue综合案例时，需要注意以下几： 1. 规划项目目结构：合理的录结构可以提代码的可读性和可维护性，建议采用模块化的方式织代码。 2. 设计数据结构：设计数据结构时，需要考虑到数据的层次结构、数据的关联...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值