文章目录
引入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中的值可以从模板中直接访问。
扫描二维码关注公众号,回复: 10948365 查看本文章
模板语法
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>
效果如下
- 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>
效果如下:
逻辑处理
- 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>
效果如下
属性绑定
- 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>
效果如下
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>
效果如下
单向数据流
当数据更新的时候,页面的视图就会更新,但是页面视图中绑定的元素更新的时候,对应的数据是不会更新的。
<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>
我们称为单向数据流 数据---->视图
- 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>
指令修饰符
一个指令可以包含的内容包括:
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>
- .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>
- .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>
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>
事件修饰符
在事件函数中,我们可以通过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 修饰符来指定监听原生中的事件,而不是组件自定义事件。