Vue.js基本语法，事件 指令简单使用

其他 2020-04-19 14:21:46 阅读次数: 0

文章目录

引入vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

vue实例组件

通过vue提供的构造函数：Vue实例化一个组件对象，作为整个应用的根组件

let app=new Vue(options)

通过 options配置来创建组件所必须的一些数据

options

el

type:string| Element

提供一个在页面上已经存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是一个HTMLElement实例。

template

type: string

组件的模板结构(HTML),如果没有提供，则会把el的内容(outerHTML)作为模板，模板解析后的内容将替换el及其子元素(需要理解) 注意这里是替换，完全替换而不是追加 ，有模板template存在，已template为准。

template模板中有且只有一个根节点。(多了会报错，通俗来讲就是一个父元素包裹多个子级元素。不能出现多个同级元素)

参考代码1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            template:`
                <div>VueVue</div>
            `
        })
    </script>
</body>
</html>
data

组件内部使用的数据，data是一个对象，data中的值可以从模板中直接访问。

模板语法

vue使用了基于html的模板语法，使用声明式的方式把实例中的数据与DOM进行绑定。需要理解

也可以使用可选的JSX语法配合render函数进行渲染。

Mustache(双大括号，大胡子)语法

在vue中，我们是通过一对双大括号吧实例中的数据渲染到模板中

插值表达式

在{{}}中，我们可以放置表达式

vue指令

表达式的值可以出现内容中，也可以使用在其他位置。比如：属性。但是不能使用{{}}语法，而是需要指令。在vue中，指令是一个带有v-前缀的属性，与普通属性不一样的地方在于，指令的之是引号括起来的表达式，不同的指令有不同的作用，vue内置里一些常用的指令，后期我们可以自定义属于自己的指令。

内容输出

通过{{}}可以很方便的从模板中输出数据，但是这种方式会有一个问题，当页面家在渲染比较慢的时候，页面会出现{{}}，vue提供了几个指令来解决这个问题。指令中的表达式不需要使用{{}}

  • v-text
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <p>title:{{title}}</p> -->
        <p v-text="title"></p> 
         <!-- vue框架 -->
        <p v-text="'title:'+title"></p>
        <!--  title:vue框架-->
        
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                title:'vue框架'
            }
        })
    </script>
</body>
</html>

弊端: v-text 会填充整个innerHTML

  • v-cloak (需要结合style样式使用)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    [v-cloak]{
        display: none;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <p>title:{{title}}</p> -->
        
        <p v-cloak>title:{{title}}</p>
        <!--  title:vue框架-->
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                title:'vue框架'
            }
        })
    </script>
</body>
</html>
  • v-html

为了防止xss攻击，默认情况下输出是不会作为html解析的，通过v-html可以让内容作为html进行解析。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    [v-cloak]{
        display: none;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       
        <p>{{content}}</p>
        <p v-html="content"></p>
        <!-- v-once只渲染一次 -->
       
        
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                title:'vue框架',
                content:'<button>按钮</button>'
            }
        })
    </script>
</body>
</html>

效果如下
image.png

  • v-once

只渲染元素和组件一次，后期的更新不再渲染

<p v-once>{{title}}</p>
  • v-pre

忽略这个元素和它子元素内容的编译

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
   
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       
        <!--不再编译这个元素的内容  -->
        <p v-pre> vue使用双大括号来输出内容 比如{{title}}</p>
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                title:'vue框架',
                content:'<button>按钮</button>'
            }
        })
    </script>
</body>
</html>

效果如下：
image.png

逻辑处理

  • v-show

根据表达式的值(布尔值)，切换元素的显示与隐藏(display属性) 适用于状态切换比较频繁的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    [v-cloak]{
        display: none;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <p>title:{{title}}</p> -->
        <p  v-show="true">可以给你看见</p>
        <!-- <p v-show="false">你看不见</p> -->
        <p v-show="isShow">可以给你看见</p>
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                title:'vue框架',
                content:'<button>按钮</button>',
                isShow:true
            }
        })
    </script>
</body>
</html>
  • v-if

根据表达式的值(布尔值),创建或销毁元素 适用于状态切换不频繁的情况。

  • v-else / v-else-if

与v-else 配合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    [v-cloak]{
        display: none;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <p>title:{{title}}</p> -->
        <p  v-show="true">可以给你看见</p>
        <!-- <p v-show="false">你看不见</p> -->
        <p v-show="isShow">可以给你看见</p>
        <hr>
        <p v-if="isShow">可以给你看见</p>
        <hr>
        <!-- 登录状态 模拟-->
        <div v-if="isLogin">
            <a href="">kay</a>
            <span> | </span>
            <a href=""> 退出</a>
        </div>
        <div v-else>
            <a href="">注册</a>
            <span> | </span>
            <a href=""> 登录</a>
        </div>
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                title:'vue框架',
                content:'<button>按钮</button>',
                isShow:true,
                //登录状态
                isLogin:true  //false 则为不可及
            }
        })
    </script>
</body>
</html>

循环与列表

  • v-for

根据数据循环渲染v-for指令所在的元素及其子元素. 可以循环的数据 Array | Object | number | string | Iterable（2.6新增）
v-for中也可以使用of语法,在vue中两者没有区别。

  • :key

默认情况下，在渲染DOM过程中使用原地复用，这样一般情况下会比较高效，但是对于循环列表，特别是以来某种状态的列表，会有一些问题，我们可以通过 :key 属性，来给每个循环节点添加一个标识。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    [v-cloak]{
        display: none;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!-- item in/of array/ object  都可以 -->
            <!-- index 是下标 -->
            <li :key="index" v-for="(item,index) in users">
               {{index}}----- {{item.username}}
            </li>
        </ul>
        <dl>
            <dt>测试</dt>
            <dt v-for="(val,key,index) of userInfo">
                {{val}}----{{key}}---{{index}}
            </dt>
        </dl>
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                users:[
                    {id:1,username:"aaa"},
                    {id:2,username:"bbb"},
                    {id:3,username:"ccc"}
                ],
                userInfo:{
                    id:1,
                    username:"ddd",
                    gender:"男"
                }
            }
        })
    </script>
</body>
</html>

效果如下
image.png

属性绑定

  • v-bind

绑定数据(表达式)到指定的属性上， <div v-bind:参数="值/表达式"></div> , 这里的参数就是指定的属性名称。

  • 缩写

有的一些常用指令会有对应的缩写,v-bind对应的缩写为 :
<div :id="myId"></div>

  • 样式

针对样式属性，v-bind 值有一些特殊的写法

style 写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    [v-cloak]{
        display: none;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-bind:id="myId"></div>
        <div :id="myId2"></div>
        <!-- 样式写法(style ) -->
        <div style="width:100px;height:100px;background:red"></div>
        <!-- 单引号括起来表示表达式 -->
        <div :style="'width:100px;height:100px;background:red'"></div>
        <!-- style1 是个数据 -->
        <div :style="style1"></div>
        <!-- 数组写法 -->
        <div :style="[style1,style2]"></div>
        <hr>
        <!-- 类的写法(class) -->
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                myId:"test",
                myId2:"test2",
                style1:{
                    width:'100px',
                    height:'100px',
                    background:'green'
                },
                style2:{
                    border:'1px solid black'
                }
            }
        })
    </script>
</body>
</html>

效果如下

image.png

class写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width:100px;
        height:100px;
        background:green;
    }
    .box2{
        border:1px solid black;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-bind:id="myId"></div>
        <div :id="myId2"></div>
        
        <hr>
        <!-- 类的写法(class) -->
        <div class="box1 box2"></div>
        <div :class="'box1 box2'"></div>
            <!-- 数组写法 -->
        <div :class="['box1','box2']"></div>
            <!--对象写法  有宽高 无边框  -->
            <!-- 使用对象写法，可以根据值(boolean)动态添加对应的class -->
        <div :class="{'box1':isActive, 'box2': isChecked}"></div>    
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                myId:"test",
                myId2:"test2",
                
                isActive:true,
                isChecked:false
            }
        })
    </script>
</body>
</html>

效果如下

image.png

单向数据流

当数据更新的时候，页面的视图就会更新，但是页面视图中绑定的元素更新的时候，对应的数据是不会更新的。

<input type="text" :value="title">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width:100px;
        height:100px;
        background:green;
    }
    .box2{
        border:1px solid black;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
         <input type="text" :value="title">
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                title:"vue框架"
            }
        })
    </script>
</body>
</html>

我们称为单向数据流 数据---->视图

image.png

  • v-model

<input type="text" :v-model="title">

数据 title 更新,视图中 input 的 value 就会更新.同时，当 input 中的 value 更新的时候，数据 title 也会更新。这就是我们说的 **数据双向绑定 **

**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width:100px;
        height:100px;
        background:green;
    }
    .box2{
        border:1px solid black;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 单向数据流 -->
         <input type="text" :value="title">
         <hr>
         <!-- 数据双向数据绑定 -->
         <input type="text" v-model="title">
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                title:"vue框架"
            }
        })
    </script>
</body>
</html>

image.png

指令修饰符

一个指令可以包含的内容包括:

1.指令名称
2.指令值
3.指令参数
4.指令修饰符
<组件 指令:参数,修饰符1,修饰符2="值">

  • .lazy

取代input监听change事件 滞后加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width:100px;
        height:100px;
        background:green;
    }
    .box2{
        border:1px solid black;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        
         <!-- 数据双向数据绑定 -->
         <input type="text" v-model.lazy="title">
         {{title}}
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                title:"vue框架"
            }
        })
    </script>
</body>
</html>

image.png

  • .number

输入字符串转为有效的数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width:100px;
        height:100px;
        background:green;
    }
    .box2{
        border:1px solid black;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        
         <!-- 数据双向数据绑定 -->
         <input type="text" v-model.lazy="title">
         
         {{title}}
         <hr>
         <input type="text" v-model.number="val">
         {{val}}
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                title:"vue框架",
                val:1
            }
        })
    </script>
</body>
</html>

image.png

image.png

  • .trim

输入首尾空格过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width:100px;
        height:100px;
        background:green;
    }
    .box2{
        border:1px solid black;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        
         <!-- 数据双向数据绑定 -->
         <input type="text" v-model.lazy="title">
         
         {{title}}
         <hr>
         <input type="text" v-model.number.trim="val">
         {{val}}
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                title:"vue框架",
                val:1
            }
        })
    </script>
</body>
</html>

image.png

vue事件

在vue中，事件通过指令v-on进行绑定， v-on 缩写

<组件 v-on:事件名称=”表达式“/>
<组件 @事件名称='表达式'/>

组件的methods选项

在组件选项中，提供了一个methods选项，用来存放组件中使用的函数方法,且存放在methods中的函数方法可以通过组件实例(this)进行访问

通过内联方式绑定事件处理函数

  • 事件绑定函数中的this指向组件实例
  • 事件绑定函数中的第一个参数默认为event对象
  • 也可以在事件绑定中直接调用函数(并不会立即执行，也是通过事件触发执行的)
  • 事件对象需要手动传入,名称$event
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width:100px;
        height:100px;
        background:green;
    }
    .box2{
        border:1px solid black;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 累加val  表达式-->
        <hr>
        <button v-on:click="val++">按钮</button>
        
        {{val}}
        <hr>
        <!-- 函数名 -->
        <button v-on:click="increment">按钮</button>
        {{val2}}
        <hr>
        <!-- 调用形式  传递参数需要带括号-->
        <button v-on:click="increment2()">按钮</button>
        {{val3}}
        <hr>
        <ul>
            <li v-for="user of users" :key="user.id" @click="toUpperCase(user,$event)">
                {{user.username}}
            </li>
        </ul>
    </div>
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
             val:1,
             val2:1,
             val3:1,
             users:[
             {id:1,username:"aaa"},
             {id:2,username:"bbb"},
             {id:3,username:"ccc"}
             ],
            },
            methods:{
                increment(e)
                {
                    //第一个参数默认是事件对象
                    console.log(e);
                    //累加 ，this指的是app实例
                    this.val2++;
                },
                increment2(){
                    //app.increment
                    //this.increment();
                    this.val3++;
                },
                // $event 是事件对象   
                toUpperCase(user,e){
                    //把user对象当参数传递
                    console.log(user);
                    console.log(e);
                    //变成大写
                    user.username=user.username.toUpperCase();
                }
            } 
        })
    </script>
</body>
</html>

image.png

image.png

事件修饰符

在事件函数中，我们可以通过ev.preventDefault().ev.stopPropagation() 来阻止默认行为，阻止冒泡，但是vue中提供一些更加方便的方式来处理这些问题，这就是事件修饰符

  • .stop 阻止冒泡
  • .prevent 阻止默认行为
  • .capture
  • .self 用于自身子元素特别多的时候，为了避免父级元素触发子元素事件，可以给父级元素添加.self ,保证 父元素只执行自身所绑定的事件。
  • .once
  • .passive
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width:100px;
        height:100px;
        background:green;
    }
    .box2{
        border:1px solid black;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div  @click="fn1" style="padding:50px; background:red;">
            <!-- .stop 阻止冒泡-->
            <div  @click.stop="fn2" style="padding:50px;background:green;"></div>
            <!-- .prevent 阻止右键事件 -->
            <div @contextmenu.prevent style="padding:50px; background:blue"></div>
        </div>
    </div>
    
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                
            },
            methods:{
                fn1(){
                console.log(1);
                },
                fn2(e){
                    //原生阻止冒泡
                    //e.stopPropagation();
                    console.log(2);
                }
            }
        })
    </script>
</body>
</html>

按键修饰符

vue 还提供了许多按键修饰符

  • .keyCode .13
  • .enter 回车键
  • .down 下键
  • .exact 精确 触发
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width:100px;
        height:100px;
        background:green;
    }
    .box2{
        border:1px solid black;
    }
    </style>
    <!-- 通过script的方式引入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div  @click="fn1" style="padding:50px; background:red;">
            <!-- .stop 阻止冒泡-->
            <div  @click.stop="fn2" style="padding:50px;background:green;"></div>
            <!-- .prevent 阻止右键事件 -->
            <div @contextmenu.prevent style="padding:50px; background:blue"></div>
        </div>
        <!-- 按键修饰符 -->
        <hr>
        <!-- .13 就是keycode的值 13是回车键 -->
        <input type="text" @keyDown.13="keyDownSometing">
        <input type="text" @keyDown.enter="keyDownSometing">
        <!--  .ctrl 按下包含ctrl键的都会会触发 -->
        <input type="text" @keyDown.ctrl="keyDownSometing">
        <!--  .ctrl.exect  只有按下ctrl才会触发 -->
        <input type="text" @keyDown.ctrl.exact="keyDownSometing">
    </div>
    
    <script>
        let app=new Vue({
            //el指定id为app的元素
            el:"#app",
            //template替换的是id为app的元素的所有内容
            
            data:{
                
            },
            methods:{
                fn1(){
                console.log(1);
                },
                fn2(e){
                    //原生阻止冒泡
                    //e.stopPropagation();
                    console.log(2);
                },
                keyDownSometing(){
                    console.log('aaaa');
                }
            }
        })
    </script>
</body>
</html>

原生事件

自定义组件中可以自定义一些事件，可以通过.native 修饰符来指定监听原生中的事件，而不是组件自定义事件。

汇而不置
发布了49 篇原创文章 · 获赞 3 · 访问量 5112
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43487066/article/details/102706045
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022