KVue2&Vue3

已于 2022-06-20 17:08:28 修改
阅读量243 收藏
点赞数
分类专栏： 前端 文章标签： vue.js javascript
于 2021-09-27 13:28:34 首次发布
原文链接：https://www.kuangstudy.com
版权

视频地址：第一谈：企业案例实战讲解Vue2&Vue3_哔哩哔哩_bilibili

 

项目实战 - SpringBoot结合Vue2.x群统计项目_哔哩哔哩_bilibili

课前所需工具

相关工具和文档

官网

官网：Vue.js
v2文档：介绍 — Vue.js
v3文档：介绍 | Vue.js

vscode工具下载

Visual Studio Code - Code Editing. Redefined


hbuilder工具下载

HBuilderX-高效极客技巧


idea开发工具

IntelliJ IDEA: The Capable & Ergonomic Java IDE by JetBrains

vue2.x下载

CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

npm

npm install vue

axios下载

npm install axios

下载jquery

npm intall jquery@1.12.4

vue3下载

npm install vue@next

Vue课程目标

课程目标1

1、了解VUEJS作用及MVVM框架
2、掌握VUEJS中常用指令
3、了解VUEJS的生命周期
4、掌握VUEJS中通过AXIOS完成异步请求
5、计算属性Computed
6、完成实战开发—SpringBoot搭建ssm和Vue实现学相伴统计项目开发


课程目标2

1、Vue的高级编程-组件Component开发
1-1、Props
1-2、槽点solt
2、Vue的高级编程-过滤器Filter
3、Vue的高级编程-指令Directive
4、Vue的高级编程-混入mixin
5、Vue的高级编程-响应式属性Set编译
6、Vue的高级编程-继承extend
7、Vue的高级编程-动态编译Compile
8、Vue的高级编程-动画aniamte和transition使用
9、实战开发、自定义组件-模拟完成elementui或者antd的组件组件和按钮组件


课程目标3

1、Vue的路由管理vue-router
2、Vue的状态管理vuex
3、Vue-cli项目的搭建和自定义组件的定义和融合
4、Axios的框架的在认识和项目的结合重构
5、项目实战开发：使用elementui或者vue-admin-ui完成实战开发统计数据后台管理


课程目标4

1、反思vue的本质和核心是什么
2、反思vue和我们学习的js/css/html/jquery有什么关联
3、如果看待其他的框架react/angularjs
4、如何看待微信小程序和uniapp


课程目标5

后记

什么是Vue

引文来自官方：深入响应式原理 — Vue.js
参考：介绍 — Vue.js

01、Vue2.x的概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。


02、理解vue的核心理念1

那么,怎样理解什么是渐进式框架?在这之前,我们首先要理解什么是框架.在最初的前端开发中,为了完成某个功能,我们需要通过js在HTML页面中获得dom节点,随后获得dom节点中的文本内容或者在dom节点上添加事件,进行一系列的程序操作,但是,如果任务量很大的情况下,代码会随着业务的增加而变得臃肿和混乱,在现实的开发中,负责的逻辑和巨大的开发量,是原生js无法完成的.

这个时候,开发人员将js代码分为了三个板块,数据(Model),逻辑控制(*),视图(View),数据板块只负责数据部分,视图板块负责更改样式,逻辑控制负责联系视图板块和数据板块,这样子有很大的好处,当需求发生变动时,只需要修改对应的板块就好

这种开发模式,就是所谓的MV结构,我们现在了解的MVC,MVP,ＭＶＶＭ都是MV的衍生物，对比这几种框架模式，我们会总结出来一个本质的特点，那就是这些开发模式都是让视图和数据间不会发生直接联系．对比用原生JS获得dom的操作，你会发现原生dom流其实是将dom作为数据，从dom中获得Ｍｏｄｅｌ，随后又更改dom来实现更新视图，视图和模型其实混在一起，所以代码自然混乱，不易维护．

在具有响应式系统的Vue实例中，DOM状态只是数据状态的一个映射 即 UI=VM(State) ，当等式右边State改变了，页面展示部分UI就会发生相应改变。很多人初次上手Vue时，觉得很好用，原因就是这个．不过，Vue的核心定位并不是一个框架，设计上也没有完全遵循MVVM模式，可以看到在图中只有State和View两部分， Vue的核心功能强调的是状态到界面的映射，对于代码的结构组织并不重视， 所以单纯只使用其核心功能时，它并不是一个框架，而更像一个视图模板引擎，这也是为什么Vue开发者把其命名成读音类似于view的原因。

上文提到，Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念．

03、理解vue的核心理念2

先了解一下前端开发模式的发展。


静态页面

最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。


异步刷新，操作DOM

  • 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.
    随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。
  • ajax盛行：
    • 2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。
    • 此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如Jquery就是典型代表。——jquery—-ajax—-js——jquery全部所有浏览器的兼容性问题。


MVVM，关注模型和视图


MVVM模式

  • M：即Model，模型，包括数据和一些基本操作
  • V：即View，视图，页面渲染结果
  • VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）—-vue

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

  • 只要Model发生了改变，View上自然就会表现出来。
  • 当用户修改了View，Model中的数据也会跟着改变。
    把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。


    而今天要学习的，就是一款MVVM模式的框架：Vue

好处：数据和视图分离，便于维护和升级。

04、小结

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接。好处就是：数据和视图分离，便于维护和升级。

创建一个 Vue 实例

参考：Vue 实例 — Vue.js

01、vue2.x下载和安装

CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

npm

npm install vue

02、创建一个vue实例

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，如下：

var vm = new Vue({
  # 挂载目标
  el:"#app",
  // 数据模型
  data:{},
  // 生命周期
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  },
  // 事件定义
  methods:{
  }
})

Vue模板语法-插入值表达式

官网参考：模板语法 — Vue.js


01、目标

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值


02、插入值的方式

  • { {data中的key} }
  • v-bind:属性=”data中的key”


模板语法

<span>Message: { { msg } }</span>

它也支持

{ { number + 1 } }
{ { ok ? 'YES' : 'NO' } }
{ { message.split('').reverse().join('') } }
<div v-bind:id="'list-' + id"></div>

VueJs指令：v-on：click

官网参考：事件处理 — Vue.js

01、目标

目标掌握vuejs的点击事件


02、语法

v-on:click="事件名（定义在methods）"
@click="事件名（定义在methods）"

03、具体实现如下

双击：demo03.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>VueJs指令：v-on：click</title>
</head>
<body>
<div id="app">
    <h1>{ {title} }</h1>
    <button v-on:click="clickme()">点我</button>
    <button @click="clickme()">@点我</button>
</div>
<script src="js/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            title:"VueJs指令：格式: v-on：事件类型"
        },
        //一系列事件定义的位置，这个固定名字。
        methods:{
           clickme:function(){
               alert("点我了,触发我了...")
           }
        }
    });
</script>
</body>
</html>

04、思考问题：事件的作用？

05、小结

1：v-on:事件类型(click,mouseenter) =”事件名”.
事件名必须定义在methods中。以key:value的方式存在
2：v-on在vuejs有简写。@事件类型=“事件名”

VueJs指令：v-on：keydown

官网参考：事件处理 — Vue.js

01、目标

目标掌握键盘按下事件

02、语法

v-on:keydown="事件名（定义在methods）"
@keydown="事件名（定义在methods）"

03、具体实现如下

双击：demo04.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>VueJs指令：v-on：keydown</title>
</head>
<body>
<div id="app">
    <textarea name="" cols="30" rows="10" maxlength="140" id="content" @keyup="inputcontent" @keydown="inputcontent">
    </textarea>
    <span>你可以输入{ {size} }字</span>
</div>
<script src="js/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            content:"",
            size:140,
        },
        methods:{
            inputcontent:function(){
                // 1: 获取每次用户输入的值
                var cnt = document.getElementById("content").value;
                // 2: 用140减去用户输入内容的长度就得到还可以输入的字数。
                this.size = 140 -  cnt.length;
            }
        }
    })
</script>
</body>
</html>

04、效果如下


05、小结

获取键盘码使用的是event的那个方法？ keyCode

VueJs指令：v-on：mouseover & mouseleave

官网参考：事件处理 — Vue.js

01、目标

掌握鼠标悬停事件

02、语法

v-on:mouseover="事件名（定义在methods）"
@mouseover="事件名（定义在methods）"

03、具体实现如下

双击：demo04.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>VueJs指令：v-on：mouseenter</title>
    <style>
        #divbox{transition: 1s;}
    </style>
</head>
<body>
<div id="app">
    <div id="divbox" @mouseenter="enter" @mouseleave="outer">我是以div,鼠标移动进来会可以效果哦</div>
</div>
<script src="js/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
        },
        methods:{
            enter:function(){
                console.log(1);
                document.getElementById("divbox").style.background = "red";
                document.getElementById("divbox").style.color = "#fff";
                document.getElementById("divbox").style.fontSize = "24px";
            },
            outer:function(){
                console.log(2);
                document.getElementById("divbox").style.background = "green";
                document.getElementById("divbox").style.color = "#fff";
                document.getElementById("divbox").style.fontSize = "14px";
            }
        }
    })
</script>
</body>
</html>

04、效果如下

鼠标进入的效果：mouseenter

鼠标离场的效果：mouseleave

VueJs指令：v-on：事件修饰符

官网参考：事件处理 — Vue.js

01、目标

掌握事件指令v-on事件操作符应用场景


02、概述

在事件处理程序中调*用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

  • .stop ：阻止事件冒泡
  • .prevent：阻止默认事件发生
  • .capture：使用事件捕获模式
  • .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
  • .once：只执行一次


03、具体实现如下

双击：demo06.html


.prevent：阻止默认事件发生

<!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>Document</title>
</head>
<body>
    <div id="app">
        <form action="index.jsp" method="get">
            <p>用户：<input type="text"></p>
            <p>密码：<input type="password"></p>
            <input type="submit" @click.prevent="login" value="提交">
            <button @click.prevent="login">提交2</button>
            <a href="http://www.baidu.com" @click.prevent="tologin">点我去百度</a>
        </form>
    </div>
<script src="js/vue.min.js"></script>
<script>
    // 1 : 实例化vue
    var vue = new Vue({
        // 2 : 指定渲染的范围
        el:"#app",
        // 3 :数据定义的位置也就是Model
        data:{
        },
        // 4: 事件定义的位置,@事件类型="事件名"
        methods:{
            login:function(){
                alert(1);
            },
            tologin:function(){
                alert("点我了...")
            }
        }
    })
</script>
</body>
</html>

真实案例解决a连接锚点置定问题：

<!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>Document</title>
</head>
<body>
    <div id="app">
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <p>sdfsdf</p>
        <a href="#" @click.prevent="loadmore">加载更多</a>
        <a href="javascript:void(0);" @click="loadmore">加载更多</a>
    </div>
<script src="js/vue.min.js"></script>
<script>
    // 1 : 实例化vue
    var vue = new Vue({
        // 2 : 指定渲染的范围
        el:"#app",
        // 3 :数据定义的位置也就是Model
        data:{
        },
        // 4: 事件定义的位置,@事件类型="事件名"
        methods:{
            loadmore:function(){
                alert("加载点我了....");
            }
        }
    })
</script>
</body>
</html

04、小结

事件修饰符的作用是什么？ 简化开发

VueJs指令：v-on：按键修饰符

官网参考：事件处理 — Vue.js

01、目标

掌握v-on的按键修饰符

02、概述

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

全部的按键别名：

​ .enter(enter键)
​ .tab (Tab键)
​ .delete (捕获 “删除” 和 “退格” 键)
​ .esc （退出键）
​ .space（空格键）
​ .up (向上)
​ .down(向下)
​ .left(向左)
​ .right(向右)

​ .ctrl
​ .alt
​ .shift
​ .meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。


非上面的键码参考ascii码表：

03、具体实现如下

双击：demo07.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>Document</title>
</head>
<body>
<div id="app">
    <form action="index.jsp" method="get">
        <p>用户：<input type="text"></p>
        <p>密码：<input type="password" placeholder="请输入enter提交" @keydown.enter="tologin"></p>
        <p>密码：<input type="password" placeholder="请输入enter提交" @keydown.13="tologin"></p>
        <p>密码：<input type="password" placeholder="请输入ctrl+enter提交" @keydown.ctrl.enter="tologin"></p>
       <!-- <input type="submit" @click.stop.prevent="tologin" value="提交">-->
    </form>
</div>
<script src="js/vue.min.js"></script>
<script>
    // 1 : 实例化vue
    var vue = new Vue({
        // 2 : 指定渲染的范围
        el:"#app",
        // 3 :数据定义的位置也就是Model
        data:{
        },
        // 4: 事件定义的位置,@事件类型="事件名"
        methods:{
            tologin:function(){
                alert("我去提交登录表单了....")
            }
        }
    })
</script>
</body>
</html>

04、小结

按键修饰符有哪些？请说出三个 enter space tab delete

VueJs指令：v-text与v-html

官网参考：API — Vue.js
官网参考：API — Vue.js

01、目标

掌握文本输出与样式渲染输出

提示：v-text不支持标签解析，v-html支持标签解析


02、具体实现如下

双击：demo07.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>Document</title>
</head>
<body>
<div id="app">
    <h1>{ {content} }</h1>
    <hr/>
    <h1 v-text="content"></h1>
    <h1 v-html="content"></h1>
    <hr/>
    <h1>{ {price + num} }</h1>
    <h1>{ {price - num} }</h1>
    <h1>{ {price * num} }</h1>
    <h1>{ {price / num} }</h1>
    <h1>{ {price % num} }</h1>
    <hr/>
    <h1 v-text="price + num"></h1>
    <h1 v-text="price - num"></h1>
    <h1 v-text="price * num"></h1>
    <h1 v-text="price / num"></h1>
    <h1 v-text="price % num"></h1>
</div>
<script src="js/vue.min.js"></script>
<script>
    // 1 : 实例化vue v-text v-html指令
    var vue = new Vue({
        // 2 : 指定渲染的范围
        el:"#app",
        // 3 :数据定义的位置也就是Model
        data:{
            content:"<strong style='color:green'>我太帅了，被自己迷倒了....</strong>",
            price:11.2,
            num:11
        },
        // 4: 事件定义的位置,@事件类型="事件名"
        methods:{
        }
    });
</script>
</body>
</html>

04、小结

v-html/v-text 它也可以达到也{ {} }插值表达式类同的效果

VueJs指令：v-bind

官网参考：API — Vue.js

01、目标

掌握绑定html标签的属性值

提示：{ {} } 是不能直接使用在属性上，需要借助v-bind指令来解决此问题！

02、具体实现如下

双击：demo07.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>Document</title>
</head>
<body>
<div id="app">
    <div v-bind:title="content">{ {content} }</div>
    <!--可以简化成-->
    <div :title="content">{ {content} }</div>
</div>
<script src="js/vue.min.js"></script>
<script>
    // 1 : 实例化vue
    var vue = new Vue({
        // 2 : 指定渲染的范围
        el:"#app",
        // 3 :数据定义的位置也就是Model
        data:{
            content:"我太帅了,太迷人了..."
        },
        // 4: 事件定义的位置,@事件类型="事件名"
        methods:{
        }
    })
</script>
</body>
</html>

04、小结

1、{ {} } 是不能直接使用在属性上，需要借助v-bind指令来解决此问题！
2、v-bind: 可以简写成什么？ :

VueJs指令：v-bind-Class 与 Style 绑定

参考网址：Class 与 Style 绑定 — Vue.js


01、概述

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。


02、:class具体实现


02-1、对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：


视图层：

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

数据层

data: {
  isActive: true,
  hasError: false
}

结果渲染

<div class="static active"></div>

02-2、数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

视图层：

<div v-bind:class="[activeClass, errorClass]"></div>
#如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

数据层

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

结果渲染

<div class="active text-danger"></div>

02、:style具体实现

02-1、对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

视图层：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
#或者直接绑定到一个样式对象通常更好，这会让模板更清晰：
<div v-bind:style="styleObject"></div>

数据层

data: {
  activeColor: 'red',
  fontSize: 30,
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

03、多重值

从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。


案例分析：

VueJs指令：v-model

官网参考：API — Vue.js

01、目标

掌握model的值绑定

02、具体实现如下

双击：demo07.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>v-model指令</title>
</head>
<body>
<div id="app">
    <form action="index.jsp" method="get">
        <p>用户：<input type="text" v-model="username"></p>
        <p>密码：<input type="password" v-model="password"></p>
        <input type="submit" @click.prevent="login" value="提交">
        <p>你输入的值是：{ {username} } == { {password} }</p>
    </form>
</div>
<script src="js/vue.min.js"></script>
<script>
    // 1 : 实例化vue
    // v-model: 它含义：双向数据绑定，改变视图会改变数据，改变数据会改变视图。
    var vue = new Vue({
        // 2 : 指定渲染的范围
        el:"#app",
        // 3 :数据定义的位置也就是Model
        data:{
            username:"",
            password:""
        },
        // 4: 事件定义的位置,@事件类型="事件名"
        methods:{
            login:function(){
                var username = this.username;
                var password = this.password;
                console.log("用户输入的账号和密码是：",username,password);
            }
        }
    })
</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>v-model指令</title>
</head>
<body>
<div id="app">
    <form action="index.jsp" method="get">
        <p>用户：<input type="text" v-model="user.username"></p>
        <p>密码：<input type="password" v-model="user.password"></p>
        <input type="submit" @click.prevent="login" value="提交">
        <p>你输入的值是：{ {user.username} } == { {user.password} }</p>
    </form>
</div>
<script src="js/vue.min.js"></script>
<script>
    // 1 : 实例化vue
    // v-model: 它含义：双向数据绑定，改变视图会改变数据，改变数据会改变视图。
    var vue = new Vue({
        // 2 : 指定渲染的范围
        el:"#app",
        // 3 :数据定义的位置也就是Model
        data:{
            //js对象可以动态扩展属性
            user:{}
        },
        // 4: 事件定义的位置,@事件类型="事件名"
        methods:{
            login:function(){
                var username = this.user.username;
                var password = this.user.password;
                console.log("用户输入的账号和密码是：",username,password);
            }
        }
    })
</script>
</body>
</html>

04、小结

v-model绑定的是什么？ Model
v-model与v-bind的区别是什么？ bind绑定的标签的属性
如果参数多个用什么方式处理：对象

VueJs指令：v-for

官网参考：API — Vue.js
v-for参考：列表渲染 — Vue.js

01、目标

掌握迭代数组
掌握迭代对象
掌握迭代对象数组

02、具体实现如下

双击：demo07.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>v-model指令</title>
</head>
<body>
<div id="app">
    <h1>普通数据类型</h1>
    <h1>{ {title} }</h1>
    <h1>{ {num} }</h1>
    <h1>{ {flag} }</h1>
    <hr>
    <h1>对象取值</h1>
    <p>{ {user.id} }</p>
    <p>{ {user.name} }</p>
    <p>{ {user.age} }</p>
    <hr>
    <h1>数组</h1>
    <p>{ {users[0]} }</p>
    <p>{ {users[1]} }</p>
    <p>{ {users[2]} }</p>
    <h1>v-for循环---数组对象</h1>
    <div v-for="(user,index) in users">
        <p>{ {index + 1} }：{ {user.id} } == { {user.name} }==={ {user.age} }</p>
    </div>
    <hr/>
    <hr>
    <h1>v-for循环---数组</h1>
    <div v-for="(f,index) in friends">
        { {f} }
    </div>
    <hr>
    <h1>v-for循环---对象</h1>
    <div v-for="(key,value) in user">
        { {value} }==={ {value} }
    </div>
</div>
<script src="js/vue.min.js"></script>
<script>
    // 1 : 实例化vue
    // v-model: 它含义：双向数据绑定，改变视图会改变数据，改变数据会改变视图。
    var vue = new Vue({
        // 2 : 指定渲染的范围
        el:"#app",
        // 3 :数据定义的位置也就是Model
        data:{
           title:"我太帅了",
           num:10,
           flag:true,
           // 数组
           friends:["张三","李四","wangwu"],
           // 对象
           user:{
               id:1,
               name:"张三",
               age:34
           },
           // 对象数组
           users:[
               {
                   id:1,
                   name:"张三1",
                   age:31
               },
               {
                   id:2,
                   name:"张三2",
                   age:32
               },
               {
                   id:3,
                   name:"张三3",
                   age:33
               }
           ]
        },
        // 4: 事件定义的位置,@事件类型="事件名"
        methods:{
        }
    })
</script>
</body>
</html>

03、小结

<div v-for="(a,b) in arr"> 这个迭代数组中，a和b 那个代表数组的索引？ b
所以建议命名规范是很重要的事情 |

VueJs指令：v-if与v-show

官网参考：API — Vue.js
官网参考：API — Vue.js

01、目标

掌握如何隐藏一个页面中的元素

02、具体实现如下

双击：demo07.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>v-model指令</title>
</head>
<body>
<div id="app">
    <h1>用户编号：{ {user.id} }</h1>
    <h1>用户名字：{ {user.name} }</h1>
    <h1>用户性别：</h1>
    <h1 v-if="user.male==0">女</h1>
    <h1 v-if="user.male==1">男</h1>
    <h1 v-if="user.male==2">保密</h1>
    <hr>
    <h1 v-if="user.male==0">女</h1>
    <h1 v-else-if="user.male==1">男</h1>
    <h1 v-else-if="user.male==3">男</h1>
    <h1 v-else>保密</h1>
    <hr>
</div>
<script src="js/vue.min.js"></script>
<script>
    // 1 : 实例化vue
    // v-model: 它含义：双向数据绑定，改变视图会改变数据，改变数据会改变视图。
    var vue = new Vue({
        // 2 : 指定渲染的范围
        el:"#app",
        // 3 :数据定义的位置也就是Model
        data:{
          user:{
              id:1,
              name:"张三",
              male:2 // 1 男 0 女 2 保密
          }
        },
        // 4: 事件定义的位置,@事件类型="事件名"
        methods:{
        }
    })
</script>
</body>
</html>

v-if和v-show的区别

<!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>v-model指令</title>
</head>
<body>
<div id="app">
    <div v-if="flag">v-if我显示了</div>
    <div v-show="flag">v-show我显示了</div>
    <button @click="changeFlag">点击改变flag</button>
</div>
<script src="js/vue.min.js"></script>
<script>
    // 1 : 实例化vue
    // v-model: 它含义：双向数据绑定，改变视图会改变数据，改变数据会改变视图。
    var vue = new Vue({
        // 2 : 指定渲染的范围
        el:"#app",
        // 3 :数据定义的位置也就是Model
        data:{
          flag:true
        },
        // 4: 事件定义的位置,@事件类型="事件名"
        methods:{
            changeFlag:function(){
                // 设定开关
                this.flag = !this.flag;
               /* if(this.flag){
                    this.flag = false
                }else{
                    this.flag = true;
                }*/
            }
        }
    })
</script>
</body>
</html>

03、小结

v-if 是 根据值是否渲染页面元素 还是 根据值切换元素的display css属性? 是否渲染页面元素
v-show 是 根据值是否渲染页面元素 还是 根据值切换元素的display css属性?切换元素的display css

VueJs指令总结

01、目标

掌握常用vue指令
获取值得方式是：{ {} } 插值表达式，支持四则运算。
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) inf data中定义数组的名字” 。
6：条件指令：v-if / v-else-if /v-else 注意中间不能出现标签，否则会出现断层。
7：显示指令：v-show 控制元素的隐藏和显示。（鼠标事件 + v-show /v-if选项卡）


02、小结

VueJs的生命周期

官网参考：Vue 实例 — Vue.js

01、目标

VueJs的生命周期

02、概述

掌握它的生命周期是为了用它的生命周期的方法：一共8个，两两一组
这些方法不用我们触发，都是由vue自己触发的方法，知道这些方法的调用时机就可以了

创建时期：beforeCreate created
挂载时期：beforeMount mounted
更新时期：beforeUpdate updated
死亡时期：beforeDestory destoryed

方法和时期的作用
你可以在这些方法中，去变更data的数据，vuejs会把你修改的数据进行渲染。


03、图解

04、核心代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>生命周期</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
    { {message} }
    <button @click="changeupdate">更新数据</button>
</div>
<script>
    var vm = new Vue({
        el : "#app",
        data : {
            message : 'hello world',
            users:[]
        },
        methods:{
            changeupdate:function(){
                this.message = "4";
            }
        },
        beforeCreate : function() {
            console.log(this);
            showData('创建vue实例前', this);
        },
        created : function() {
            // 在这个阶段可以修改
            this.message = "1.";
            showData('创建vue实例后', this);
        },
        // 替换和编译阶段
        beforeMount : function() {
            this.message="2";
            showData('挂载到dom前', this);
        },
        mounted : function() {
            // 这里有一个问题?
            this.message = "3";
            showData('挂载到dom后', this);
        },
        beforeUpdate : function() {
            showData('数据变化更新前', this);
        },
        updated : function() {
            showData('数据变化更新后', this);
        },
        beforeDestroy : function() {
            showData('vue实例销毁前', this);
        },
        destroyed : function() {
            showData('vue实例销毁后', this);
        }
    });
    function realDom() {
        console.log('真实dom结构：' + document.getElementById('app').innerHTML);
    }
    function showData(process, obj) {
        console.log(process);
        console.log('data 数据：' + obj.message)
        console.log('挂载的对象：')
        console.log(obj.$el)
        realDom();
        console.log('------------------')
        console.log('------------------')
    }
    // 忘记注释
    vm.message = "good...";
    vm.$destroy();
</script>
</body>
</html>

05、小结

vuejs的生命周期钩子有几个？分别是？
创建时期：beforeCreate created
挂载时期：beforeMount mounted
更新时期：beforeUpdate updated
死亡时期：beforeDestory destoryed


06、为什么要学习生命周期：

1：是因为开放的过程，有一些逻辑的数据初始化需要在页面加载完毕的时候就去执行。那么必须要知道那个地方执行即可：

created
mounted
一般在开放中我们都会使用这个两个方法去初始化和改变数据，然后给手续进行渲染和替换。不是beforeMounte不行，是因为mounted更适合。

Vuejs计算属性：computed

官网参考：计算属性和侦听器 — Vue.js

01、目标

使用vuejs计算属性完成
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。


02、具体实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <h2>
        当前时间是：{ {birth} }
    </h2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            birthday:1429032123201
        },
        computed: {
            // 1：计算属性 可以当做属性直接使用。不需要定义切记
            birth() {
                // 2:获取当前时间
                const date = new Date(this.birthday);
                // 3: 日期格式化日志，返回进行回显页面
                return dateFormat("yyyy-MM-dd HH:mm:ss",date);
            }
        },
        // 生命周期函数
        created() {
            // 4：每隔1秒执行一次时间获取
            setInterval(()=>{
                this.birthday = new Date().getTime();
            },1000);
        }
    });
    // 日期格式化函数
    function dateFormat(fmt, date) {
        let ret;
        const opt = {
            "y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "s+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
    }
</script>
</body>
</html>

VueJs的异步请求：axios介绍

01、目标

掌握和学习异步处理组件axios.

02、概述

Vuejs 并没有直接处理ajax的组件，但可以使用axios或vue-resource组件实现对异步请求的操作。

vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新
到2.0之后，作者就宣告不再对vue-resource更新，而是推荐axios。
vue-resource的github: https://github.com/pagekit/vue-resource

axios简介

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中进行异步调用
axios的github:GitHub - axios/axios: Promise based HTTP client for the browser and node.js

03、安装下载

# 如果使用npm则可以如下安装
npm install axios

或者也可以直接使用公共的CDN（内容分发网络）服务：

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

04、axios可以使用的方法有：

axios({
    url: '',
    method: 'get'
})
  • axios(config)
  • axios.get(url[, config]).
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

config请求配置

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。

{
  // `url` 是用于请求的服务器 URL
  url: '/user',
  // `method` 是创建请求时使用的方法
  method: 'get', // 默认是 get
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],
  // `headers` 是即将被发送的自定义请求头
  headers: {
      'X-Requested-With': 'XMLHttpRequest',
      'Content-Type': 'application/json'
  },
  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },
  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },
  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,
  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // 默认的
  // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // 默认的
  // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,
  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认的
  },
  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5 // 默认的
}

响应结构

{
  // `data` 由服务器提供的响应
  data: {},
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
  // `headers` 服务器响应的头
  headers: {},
  // `config` 是为请求提供的配置信息
  config: {}
}

05、具体实现和参数处理

1、在页面引入js库：axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、get请求参数处理：

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
axios.get('/user',{params:{ID:12345} })
  .then(function (response) {
    // handle success
    console.log(response);
  })

3、post请求参数处理

axios.post('/user',{ID:12345,name:'小飞飞'})
  .then(function (response) {
    // handle success
    console.log(response);
  })

注意：后台的mvc方法中如果是pojo或者map必须增加@RequestBody

/**
 * 新增用户方法
 * @return
*/
@PostMapping("/api/user/save")
public User saveuser(@RequestBody  User user){
    return userService.saveUser(user);
}

06、小结

小结
要进行axios异步请求，第一步要怎么做？
axios中的get请求怎么带参数？
axios中的post请求怎么带参数？

开心是星星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
KVue:开课吧Vue源码学习
03-23
KVue:开课吧Vue源码学习
VUE概述
weixin_45799003的博客
02-26 2827
vue.js是目前最火的一个前端框架，React是最流行的一个前端框架。 前端三大主流框架:Vue.js Angular.js React.js。 Vue.js是一套构建用户界面的框架，只关注视图层，便于与第三方库或已有项目整合。 Vue有丰富的配套三方类库。 官网:英文https://vuejs.org/中文https://cn.vuejs.org/ Vue.js是一个渐进式框架，动态构建用户界面。(尤雨溪，华裔，前Google工程师)。 特点:基于MVVM架构。简洁，体积小，效率高，适合移动/PC端开.
安装vue（2.x和3.x）及相关环境
Timor的博客
12-26 1497
安装vue（2.x和3.x）及相关环境
vue原理学习1
qq_42975676的博客
06-07 180
kvue.js // 定义KVue构造函数 class KVue { constructor(options) { // 保存选项 this.$options = options; // 传入data this.$data = options.data; // 响应化处理 this.observe(this.$data); // new Watcher(this, "foo"); // this.foo; //读一次，触发依赖收集
理解Vue的设计思想实现vue
嘿嘿
09-24 314
MVVM框架的三要素:数据响应式、模板引擎及其渲染 数据响应式:监听数据变化并在视图中更新 Object.defineProperty() Proxy 模版引擎:提供描述视图的模版语法 插值:{{}} 指令:v-bind，v-on，v-model，v-for，v-if 渲染:如何将模板转换为html 模板 => vdom => dom 数据响应式原理 数据变更能够响应在视...
mini-vue2实现
我的博客简介
07-28 180
/给一个obj定义一个响应式的属性。
Vue设计原理2
lulu_luxi的博客
05-10 247
MVVM框架的原理及代码实现MVVM框架数据响应式涉及到的类的介绍KVue ：框架构造函数Observer：执行数据响应（分辨数据是对象还是数组）Complie：模板编译，初始化视图，收集依赖（更新函数，watcher创建）Watcher：执行更新函数Dep：管理多个watcher，批量更新 MVVM框架 数据响应式 首先原理的分析： 1.new Vue（）首先执行初始化，对data执行响应化处理，这个过程发生在Observer中 2.同时对模板进行编译，找到其中动态绑定的数据，从data中获取并初始化视图
Vue + Spring Boot 项目实战（一）：项目简介
热门推荐
Evan 的博客
03-31 60万+
白卷是一款使用 Vue+Spring Boot 开发的前后端分离项目，主要帮助 web 开发初学者通过实践方式打通各个环节的知识。
手写VUE1——实现解析k-text、k-html、插值表达式功能
muzimiaomiaopeng的博客
04-08 425
创建KVue类，保存options和data，需要实现响应式、数据代理、编译模板的功能 class KVue { constructor(options) { this.$options = options this.$data = options.data // 响应式处理 observe(this.$data) // 数据代理 Proxy(...
nodejs 搭建angular_初学者AngularJS的环境搭建过程
weixin_34548449的博客
12-23 772
AngularJS是什么?AngularJS是一个开源Web应用程序框架。它最初是由MISKO Hevery和Adam Abrons于2009年开发。现在是由谷歌维护AngularJS特性AngularJS是一个功能强大的基于JavaScript开发框架用于创建富互联网应用(RIA)。AngulajJS为开发者提供的选项(使用JavaScript)在一个干净的MVC(模型 - 视图 - 控制器)的...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 320
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 511
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 194
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
【Echarts系列】平滑折线面积图
kk爱闹
06-11 317
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
Vue3-滑动到最右验证功能
最新发布
地理信息的专栏
06-13 293
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
vue初使用实例之笔记本
m0_72168336的博客
06-11 767
vue初使用实例之笔记本
Vue3+Vite报错：vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?
weixin_47121832的博客
06-09 272
Vue3+Vite报错：vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?
vue基础P7-17
weixin_43883584的博客
06-09 569
{{xxxx}}用在标签体中，也就是<>{{xxx}}</>xxx是js表达式，有返回值，如num+1、Date.now()。不是js代码。
Vue基础知识：插槽——默认插槽，插槽的后备内容，具名插槽，作用域插槽的认识与使用。（slot,#default,row的认识）
我就知道你会来，我们一起进步吧！
06-08 646
1.默认插槽（组件内只能定制一处结构）2.具名插槽（组件内可以定制多次结构）简单而言：就是你希望封装一个组件，这个组件会在多个地方使用，但是每个使用的地方其中的内容部分又是不同的，这个时候你希望自定义，就会运用到插槽。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值