初认识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>

```

Vue3.x笔记

初认识Vue3.x

何谓渐进式

vue3的官网

Vue3.x的CDN加载

Vue3.x相关下载

01、vue的入门案例

createApp方法说明：

如何认识下面的代码和定义

插值 Mustache

概述

作用

体验

插值表达式支持

总结

指令

v-cloak指令

第一步：定义一个css样式

第二步：在div上增加属性即可

v-html、v-text文本指令

v-on 事件指令

格式

事件类型

事件名

具体使用

事件注意事项

事扩展认识 $event

事件扩展键盘事件触发 - 按键修饰符

常用的键盘监听有哪些，如下:

问题：组合键盘怎么处理？

如果提供不够怎么办？

事件扩展 - 事件修饰符

.stop 事件阻止冒泡

猜你喜欢

Vue3.x笔记

初认识Vue3.x

何谓渐进式

vue3的官网

Vue3.x的CDN加载

Vue3.x相关下载

01、vue的入门案例

createApp方法说明：

如何认识下面的代码和定义

插值 Mustache

概述

作用

体验

插值表达式支持

总结

指令

v-cloak指令

第一步：定义一个css样式

第二步： 在div上增加属性即可

v-html、v-text文本指令

v-on 事件指令

格式

事件类型

事件名

具体使用

事件注意事项

事扩展认识 $event

事件扩展键盘事件触发 - 按键修饰符

常用的键盘监听有哪些，如下:

问题：组合键盘怎么处理？

如果提供不够怎么办？

事件扩展 - 事件修饰符

.stop 事件阻止冒泡

猜你喜欢

第二步：在div上增加属性即可