初认识Vue3.x
官网:https://cn.vuejs.org/index.html
Vue是一套基于MVVM模式的用于构建用户界面的Javascript框架。它是以数据驱动和组件化的思想构建的。Vuej是由一个名叫尤雨溪的作者开发的,他于 2013 年12月7 日发布了 Vuejs 的 0.6.0版本(之前的版本不叫 Vue.js),2015年10月26 日发布了 1.0.0 版本,2016 年 10 月1日发布了 2.0.0 版本,2020年 9 月 18日发布了3.0版本代号为 One Pieee。本书内容基于最新发布的 Vue.js 3.0 版本。
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
何谓渐进式
Vue 是渐进式的 JavaSeript 框架。所谓渐进式,就是把框架进行分层设计,每层都是可选的。
最核心的是:声明式渲染,向外是组件系统,在这个基础上再加入前端理由和状态挂你,最外层的构建系统。
1、假如你的系统比较简单,更多的是需要访问界面中的DOM节点,以获取用户输入数据或将更新后的数据渲染到视图中,那么可以将Vuejs作用一个javascript库来使用。使用他的声明式渲染机制可以轻松地操作DOM。实现数据变化时的自动视图渲染。
2、如果你前端界面比较复杂,那么可以考虑将界面元素组件化,利用Vuejs的组件化系统将界面元素与业务逻辑包装在为一个个组件。采用分而治之的的策略。不但可以降低前端系统的复杂度,组件本身还可以复用。
3、如果要求将前后端分离,将前端做成单页应用程序,那么可以引入前端理由Vue Router,实现单页应用,如果前端应用中有很多需要在多个组件间共享,如果用户数据,那么可以引入Vuex统一对状态进行管理。
4、Vue提供的构建系统可以轻松地搭建一个脚手架项目,项目内置了运行环境,便于开发,调试并观察程序的运行结果,此外项目也集成了Webpack打包工具。可以很容易地构建发布。
vue3的官网
https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%A6%82%E8%A7%88
Vue3.x的CDN加载
<script src="https://unpkg.com/vue@next"></script>
Vue3.x相关下载
# 更新npm到最新
npm install npm@latest -g
# 下载vue3.x
npm install vue@next
npm i vue@next
# 不建议全局安装,因为vue总是在框架项目中各自使用各自的
npm install vue@next -g
# 更新vue
npm update vue@next
# 卸载vue
npm uninstall vue@next
我们指定,在国内访问国外的服务器非常的慢,而npm的官网镜像就是国外的服务器。为了节省安装模块的时间,可以使用淘宝镜像,安装命名如下:
npm install -g cnpm --registry=https://registry.npmmirror.com
以后就可以直接使用cnpm安装任何模块了
cnpm install vue@next
01、vue的入门案例
createApp方法说明:
这个方法有只有一个参数,是对象类型,这个对象中可以包含:数据,方法,组件,生命周期等,然后返回一个vm的实例对象。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01、vue的入门案例.html</title>
</head>
<body>
<!--第三步:指定vue从那个dom元素进行渲染和管理-->
<div id="app">
<h1>{{message}}</h1>
</div>
<!--第一步:引入vue.global.js文件-->
<script src="js/vue.global.js"></script>
<!--第二步:初始化一个vue实例-->
<script>
const vm = Vue.createApp({
// 数据模型
data(){
return {
message:"Hello Vue3.x"
}
},
// 事件
methods:{
},
// 生命周期:
created(){
},
mounted(){
},
// 计算属性
computed(){
}
}).mount("#app");
</script>
</body>
</html>
vue2.0x
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01、vue的入门案例.html</title>
</head>
<body>
<!--第三步:指定vue从那个dom元素进行渲染和管理-->
<div id="app">
<h1>{{message}}</h1>
</div>
<!--第一步:引入vue.global.js文件-->
<script src="js/vue.js"></script>
<!--第二步:初始化一个vue实例-->
<script>
const vm = new Vue({
el:"#app",
// 数据模型
data:{ message:"Hello Vue3.x"},
// 事件
methods:{
},
// 生命周期:
created(){
},
mounted(){
},
// 计算属性
computed(){
}
})
</script>
</body>
</html>
vue2和vue3很多的区别:
- vue2底层是用js的Object对象监听来实现的,Vue3采用全新的ts面向对象方式进行重构。性能传统要高很多。但是几乎核心一模一样。
- vue2定义才才new 的方式。而Vue3采用的静态初始化的放创建
- vue2的data之前是对象,而Vue3的data是函数返回对象…
如何认识下面的代码和定义
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01、vue的入门案例.html</title>
</head>
<body>
<!--第三步:指定vue从那个dom元素进行渲染和管理 ------------ view角色-->
<div id="app">
<!--简单插值-->
<h1>{{message}}</h1>
<!--调用js函数-->
<div>{{message.toUpperCase()}}</div>
<!--html进行渲染-->
<div v-html="htmlcont"></div>
<!--给属性绑定-->
<a v-bind:href="url">{{url}}</a>
</div>
<!--第一步:引入vue.global.js文件-->
<script src="js/vue.global.js"></script>
<!--第二步:初始化一个vue实例-->
<script>
//怎么去理解mvvm
const vm = Vue.createApp({//--------------vm角色
// 数据模型
data(){//------------------------model的角色
return {
message:"Hello Vue3.x",
url:"http://www.itbooking.net",
htmlcont:"<strong style='color:red;'>你很帅</strong>",
uservo:{id:1,name:"zhangsan",age:35}
}
}
}).mount("#app");
</script>
</body>
</html>
-
只在视图中出现的 双花括号{{key}}或者指令上出现的key,就必须在data中定义。如果不定义,就报错或者警告。
-
这就告诉你一个道理,如果你要在视图中定义,你首先要data去定义一个属性,然后想尽一切办法去改变它。vm角色也就vue它会自动去同步视图。
-
就和java代码一模一样,你要去装数据库的数据,你首先第一件事:创建一个User.java。其实这个bean就是vue中data
model
public class User{ private String message; private String url; private String htmlcont; private UserVo uservo; }
servlet
jdbc/mybatis/jpa/jbdctemplate request.setAttribute("user",user);
jsp-view
<div id="app"> <!--简单插值--> <h1>${user.message}</h1> <!--调用js函数--> <div>${user.message.toUpperCase()}</div> <!--html进行渲染--> </div>
插值 Mustache
概述
Mustache是双花括号的意思:{{key}} 。
作用
将vue中的data中的数据,替换到view的一种机制。只要你{{key}}在vue的data对象话,vue就会根据data的数据进行渲染,如果改变数据内容就重新更新视图。
体验
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c6DXur24-1638490258600)(asserts/image-20211125211453365.png)]
插值表达式支持
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01、vue的入门案例.html</title>
</head>
<body>
<!--第三步:指定vue从那个dom元素进行渲染和管理 ------------ view角色-->
<div id="app">
<!--简单插值-->
<h1>{{message}}</h1>
<!--支持三目运行算-->
<p>{{male == 0 ? "女" : "男"}}</p>
<!--调用js函数-->
<p>{{message.toUpperCase()}}</p>
<p>{{message.split("").reverse().join("")}}</p>
<!--也支持四则运算-->
<p>{{money + num}}</p>
<p>{{money - num}}</p>
<p>{{money * num}}</p>
<p>{{money / num}}</p>
<p>{{money % num}}</p>
</div>
<!--第一步:引入vue.global.js文件-->
<script src="js/vue.min.js"></script>
<!--第二步:初始化一个vue实例-->
<script>
//怎么去理解mvvm
const vm = new Vue({//--------------vm角色
el: "#app",
// 数据模型
data: {//------------------------model的角色
message: "Hello Vue3.x",
money: 12.3,
num: 11,
male: 0
}
})
</script>
</body>
</html>
但是不支持
{{var a = 1}}
{{if(male==0)return "女"}}
总结
1:插值表达式是和data中息息相关的,在插值表达中出现的key,必须在data中定义。
2:插值表达式,只能用在文本域中。<div>文本域</div>
,如果不理解大家可能闹如下的笑话:
<div title="{{message}}"></div>
3、问题来了,那么数据要放在属性上怎么放?如何给元素去绑定事件?如何加动画?或者上面male如何有三种情况我们该如何去控制?如果data数据中有复杂的数据结构怎么办?比如数组,比如对象等等?答案:指令
4、指令上,不允许使用插值表达式。
指令
https://cn.vuejs.org/v2/api/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Xdsr6Jf-1638490258601)(asserts/image-20211125212731744.png)]
获取值方式是:{{}} 插值表达式,支持四则运算。
指令名字:不能用{{}}
1:=文本指令:v-html / v-text 和插值表达式,名字也必须定义在data中。
2:事件指令:v-on:click=“事件名”,缩写:@click=“事件名”,注:事件名定义在:methods中
3:属性指令:v-bind:属性名=“data的key” 缩写 : 属性名=“data的key” .注意动静拼接的问题
4:控制指令:v-model=“data的key”,用于获取form控制元素的值。如果的多余3个建议使用对象去定义和获取
5: 循环指令:v-for ="(obj,index) in data" 中定义数组的名字" 。
6:条件指令:v-if / v-else-if /v-else 注意中间不能出现标签,否则会出现断层。
7:显示指令:v-show 控制元素的隐藏和显示。(鼠标事件 + v-show /v-if选项卡)
v-cloak指令
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
使用插值表达式{{}}如果在网络加载比较慢的情况下,可能会直接把{{}}直接表现出来,这个出现的原因网络很慢或者执行过慢。如果解决就是通过v-cloak进行解决。
第一步:定义一个css样式
<style>
[v-cloak] { display: none }
</sytle>
第二步: 在div上增加属性即可
<div id="app" v-cloak></div>
代表什么含义呢?
- 我渲染插值表达式过程中,我先把整个div先隐藏,如果vue把数据和插值表达式全部替换完毕以后,会自动去打开显示。这个过程全部都是vue自己来触发完成。
v-html、v-text文本指令
-
v-html
-
v-text
它和插值表达式都是去data中获取数据的一种方式,只不过一种是用:{{}} ,一种是用:属性指令来完成。在某种情况下:v-text指令和插值表达式是等价的。也就说:在开发不要纠结,你喜欢用那种方式就选择那种、
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01、vue的入门案例.html</title>
<style>
[v-cloak]{display: none}
</style>
</head>
<body>
<!--第三步:指定vue从那个dom元素进行渲染和管理 ------------ view角色-->
<div id="app" v-cloak>
<!--简单插值-->
<h1>{{message}}</h1>
<!--支持三目运行算-->
<p>{{male == 0 ? "女" : "男"}}</p>
<!--调用js函数-->
<p>{{message.toUpperCase()}}</p>
<p>{{message.split("").reverse().join("")}}</p>
<!--也支持四则运算-->
<p>{{money + num}}</p>
<p>{{money - num}}</p>
<p>{{money * num}}</p>
<p>{{money / num}}</p>
<p>{{money % num}}</p>
<hr>
<!--简单插值-->
<h1 v-text="message"></h1>
<!--支持三目运行算-->
<p v-text="male == 0 ? '女' : '男'"></p>
<!--调用js函数-->
<p v-text="message.toUpperCase()"></p>
<p v-text="message.split('').reverse().join('')"></p>
<!--也支持四则运算-->
<p v-text="money + num"></p>
<p v-text="money - num"></p>
<p v-text="money * num"></p>
<p v-text="money / num"></p>
<p v-text="money % num"></p>
<hr>
<div>{{html}}</div>
<div v-text="html"></div>
<div v-html="html"></div>
</div>
<!--第一步:引入vue.global.js文件-->
<script src="js/vue.min.js"></script>
<!--第二步:初始化一个vue实例-->
<script>
//怎么去理解mvvm
const vm = new Vue({//--------------vm角色
el: "#app",
// 数据模型
data: {//------------------------model的角色
message: "Hello Vue3.x",
html:"<div><h1 style='color:red'>我是一个小可爱</h1></div>",
money: 12.3,
num: 11,
male: 0
}
})
</script>
</body>
</html>
上面代码v-html是同理的。只不过在有一种情况下就必须选择v-html。你内容如果有html标签,你也标签渲染和解析出来。就必须使用v-html。v-text和插值表达式做不到,如下:
<hr>
<div>{{html}}</div>
<div v-text="html"></div>
<div v-html="html"></div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DJdgDVyl-1638490258601)(asserts/image-20211125214145313.png)]
v-on 事件指令
格式
- 事件指令:v-on:事件类型=“事件名”
- 简写:@事件类型=“事件名”
事件类型
- 点击事件:click dblclick
- 鼠标事件:mousedown,mousemove,mouseout,mouseenter,mouseleave,mouseup
- 键盘事件:keydown,keyup,keypress
- 更改事件:change
- 焦点事件:blur,focus\
事件名
事件定义必须定义在 vue对象中的methods中。如下:
//怎么去理解mvvm
const vm = new Vue({//--------------vm角色
// 事件必须定义在methods中,
methods:{
changeMessage(){
alert("事件触发了!!!")
}
}
})
具体使用
<button v-on:click="changeMessage">改变</button>
或者简写
<button @click="changeMessage">改变</button>
事件注意事项
1:执行函数到底要不要括号。
<button v-on:click="changeMessage()">改变</button>
<button v-on:click="changeMessage">改变</button>
上面两种方式都正确。不要怀疑自己。
事扩展认识 $event
事件扩展键盘事件触发 - 按键修饰符
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on
在监听键盘事件时添加按键修饰符:比如监听enter建
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>07、事件指令-v-on-按键修饰符.html</title>
<style>
[v-cloak]{display: none}
</style>
</head>
<body>
<!--第三步:指定vue从那个dom元素进行渲染和管理 ------------ view角色-->
<div id="app" v-cloak>
<div>
<p>用户:<input type="text"></p>
<p>密码:<input type="text" placeholder="有监听enter提交" v-on:keyup.enter="toLogin"></p>
<p>密码:<input type="text" placeholder="这个普通的输入框"></p>
<p><button @click="toLogin">登录</button></p>
</div>
</div>
<!--第一步:引入vue.global.js文件-->
<script src="js/vue.min.js"></script>
<!--第二步:初始化一个vue实例-->
<script>
//怎么去理解mvvm
const vm = new Vue({//--------------vm角色
el: "#app",
// 数据模型
data: {//------------------------model的角色
message: "Hello Vue3.x"
},
// 事件必须定义在methods中,
methods:{
toLogin () {
alert("去登录!!!")
}
}
})
</script>
</body>
</html>
常用的键盘监听有哪些,如下:
- `.enter`
- `.tab`
- `.delete` (捕获“删除”和“退格”键)
- `.esc`
- `.space`
- `.up`
- `.down`
- `.left`
- `.right`
使用方式如下:
<p><button @keyup.down="toLogin">登录</button></p>
<p><button @keyup.right="toLogin">登录</button></p>
<p><button @keyup.tab="toLogin">登录</button></p>
问题:组合键盘怎么处理?
.ctrl
.alt
.shift
.meta
使用如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>07、事件指令-v-on-按键修饰符.html</title>
<style>
[v-cloak]{display: none}
</style>
</head>
<body>
<!--第三步:指定vue从那个dom元素进行渲染和管理 ------------ view角色-->
<div id="app" v-cloak>
<div>
<textarea name="" id="" cols="30" @keyup.ctrl.enter="toComment" rows="10"></textarea>
<button @click="toComment">提交评论 (ctrl+enter)</button>
</div>
</div>
<!--第一步:引入vue.global.js文件-->
<script src="js/vue.min.js"></script>
<!--第二步:初始化一个vue实例-->
<script>
//怎么去理解mvvm
const vm = new Vue({//--------------vm角色
el: "#app",
// 数据模型
data: {//------------------------model的角色
message: "Hello Vue3.x"
},
// 事件必须定义在methods中,
methods:{
toComment () {
alert("提交评论!!!")
}
}
})
</script>
</body>
</html>
原生写法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>07、事件指令-v-on-按键修饰符.html</title>
<style>
[v-cloak]{display: none}
</style>
</head>
<body>
<!--第三步:指定vue从那个dom元素进行渲染和管理 ------------ view角色-->
<div id="app" v-cloak>
<div>
<textarea name="" id="" cols="30" @keyup="toCommentkey($event)" rows="10"></textarea>
<button @click="toComment">提交评论 (ctrl+enter)</button>
</div>
</div>
<!--第一步:引入vue.global.js文件-->
<script src="js/vue.min.js"></script>
<!--第二步:初始化一个vue实例-->
<script>
//怎么去理解mvvm
const vm = new Vue({//--------------vm角色
el: "#app",
// 数据模型
data: {//------------------------model的角色
message: "Hello Vue3.x"
},
// 事件必须定义在methods中,
methods:{
toCommentkey(ev) {
console.log(ev.keyCode)
if(ev.keyCode == 13 && ev.ctrlKey){
this.toComment();
}
},
toComment () {
alert("提交评论!!!")
}
}
})
</script>
</body>
</html>
原生写法其实就上面的底层原理,只不过封装起来了而已,所以大家不要迷惑,也就告诉如果你想获取某个键盘码你console.log(ev.keyCode)进行查看即可。
如果提供不够怎么办?
- 先打印keycode
- 然后通过键盘事件.keycode。
比如:
<p>密码:<input type="text" placeholder="有监听enter提交" v-on:keyup.13="toLogin"></p>
<p>密码:<input type="text" placeholder="有监听a提交" v-on:keyup.65="toLogin"></p>
完整案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>07、事件指令-v-on-按键修饰符.html</title>
<style>
[v-cloak]{display: none}
</style>
</head>
<body>
<!--第三步:指定vue从那个dom元素进行渲染和管理 ------------ view角色-->
<div id="app" v-cloak>
<div>
<textarea name="" id="" cols="30" placeholer="ctrl+enter提交" @keyup.ctrl.enter="toComment" rows="10"></textarea>
<textarea name="" id="" cols="30" placeholer="ctrl+enter提交" @keyup.ctrl.13="toComment" rows="10"></textarea>
<textarea name="" id="" cols="30" placeholer="ctrl+a提交" @keyup.ctrl.65="toComment" rows="10"></textarea>
<button @click="toComment">提交评论 (ctrl+enter)</button>
</div>
</div>
<!--第一步:引入vue.global.js文件-->
<script src="js/vue.min.js"></script>
<!--第二步:初始化一个vue实例-->
<script>
//怎么去理解mvvm
const vm = new Vue({//--------------vm角色
el: "#app",
// 数据模型
data: {//------------------------model的角色
message: "Hello Vue3.x"
},
// 事件必须定义在methods中,
methods:{
toComment () {
alert("提交评论!!!")
}
}
})
</script>
</body>
</html>
事件扩展 - 事件修饰符
在事件理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on
提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
.stop
- .once
- .prevent
.capture
.self
.passive
.stop 事件阻止冒泡
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>07、事件指令-v-on-按键修饰符.html</title>
<style>
[v-cloak] {
display: none
}
table{width: 100%;border-collapse: collapse}
table td{border:1px solid #ccc;padding:10px;}
</style>
</head>
<body>
<!--第三步:指定vue从那个dom元素进行渲染和管理 ------------ view角色-->
<div id="app" v-cloak>
<div>
<table>
<thead>
<tr>
<td>id</td>
<td>名字</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr @click="parentclick">
<td>1</td>
<td>yykk</td>
<td>
<button @click.stop="edit">编辑</button>
<button @click.stop="del">删除</button>
</td>
</tr>
<tr @click="parentclick">
<td>2</td>
<td>yykk2</td>
<td>
<button @click.stop="edit">编辑</button>
<button @click.stop="del">删除</button>
</td>
</tr>
<tr @click="parentclick">
<td>3</td>
<td>yykk3</td>
<td>
<button @click.stop="edit">编辑</button>
<button @click.stop="del">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--第一步:引入vue.global.js文件-->
<script src="js/vue.min.js"></script>
<!--第二步:初始化一个vue实例-->
<script>
//怎么去理解mvvm
const vm = new Vue({//--------------vm角色
el: "#app",
// 数据模型
data: {//------------------------model的角色
message: "Hello Vue3.x"
},
// 事件必须定义在methods中,
methods: {
parentclick(){
alert("点击tr出发事件----parent")
},
edit() {
alert("编辑---children")
},
del() {
alert("删除 ---children")
}
}
})
</script>
</body>
</html>
说明:在开发中,存在大量中,父元素绑定事件,子元素也绑定事件,如果出发子元素事件同时会出发父元素的事情,这个时候,我们可以通过.stop阻止冒泡行为,只触发子元素事情,不会冒泡到父元素的上。
n @click.stop=“del”>删除
</tbody>
</table>
</div>
```
说明:在开发中,存在大量中,父元素绑定事件,子元素也绑定事件,如果出发子元素事件同时会出发父元素的事情,这个时候,我们可以通过.stop阻止冒泡行为,只触发子元素事情,不会冒泡到父元素的上。