Vue3学习笔记
关注
分享
扫一扫
文章平均质量分 79
小豪boy
这个作者很懒，什么都没留下…
展开
-
Vue Router的进阶使用
一、路由守卫1. 路由守卫是什么简单来说，导航守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。 官方解释，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 应用场景举例：路由页面跳转时候进行登陆验证、路由跳转判断。2.路由守卫分类路由守卫分为：全局的、单个路由独享、组件内的三种：全局守卫包括：router.beforeEach（是全局前置守卫）、router.beforeResolve（是全局解析守卫）、原创 2022-01-08 12:26:41 · 907 阅读 · 0 评论 -
Vue项目开发配套工具入门
一、VueCLI的使用和单文件组件1.VueCLI的使用1.1 前期环境安装 node，会附带 npm。1.2 安装Vue脚手架工具 @vue/clinpm install -g @vue/cli# OR 指定版本npm install -g @vue/cli@4.5.91.3 创建一个 vue 项目运行以下命令来创建一个新项目：vue create hello-world你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + E..原创 2021-12-14 12:45:04 · 1362 阅读 · 1 评论 -
Composition API的使用
一、setup函数的使用一个组件选项，在组件被创建之前，props被解析之后执行。 它是组合式 API 的入口。const app = Vue.createApp({ template: ` <div @click=handleClick>{{message}}</div> `, setup(props, context) { // return 中返回的属性可以在template中使用 retur.原创 2021-12-03 14:12:50 · 505 阅读 · 0 评论 -
Vue中的高级语法
一、Mixin 混入的基本语法Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。 一个 mixin 对象可以包含任意组件选项。 当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。1. 选项合并注意：组件 data、methods 优先级高于mixin data、methods 优先级。 生命周期函数，先执行 mixin 里面的，再执行组件里面的。const myMixin = { data(){ .原创 2021-12-01 14:22:45 · 630 阅读 · 0 评论 -
使用vue实现css过渡和动画
一、过渡和动画得区别过渡：通常用来表示元素上属性状态的变化。 动画：通常用来表示元素运动的情况。二、使用Vue实现基础得css过渡与动画1. 动画/* css */@keyframes leftToRight { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transfor原创 2021-11-23 13:50:49 · 4335 阅读 · 0 评论 -
vue组件的使用
一、组件的基础1. 组件的定义定义组件：应用API（component）。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width原创 2021-11-05 21:19:16 · 236 阅读 · 0 评论 -
Vue基本语法
一、Vue 中应用和组件的基本概念1. vue的导入<script src="https://unpkg.com/vue@next"></script>2.MVVM 设计模式MVVM 设计模式，M -> Model 数据， V -> View 视图， VM -> ViewModel 视图数据连接层。3. 创建一个vue应用<!DOCTYPE html><html lang="en"><..原创 2021-11-03 16:37:58 · 201 阅读 · 0 评论 -
Sass入门
一、Sass官网：Sass中文网。二、VSCode 插件 Live Sass CompilerVisual Studio Code插件Live Sass Compiler可将Sass或Scss实时编译为CSS。1. 安装打开VSCode编辑器，然后按ctrl+P，键入ext install live-sass 。2.用法/快捷方式 Watch Sass从状态栏单击以打开实时编译，然后Stop Watching Sass从状态栏单击以停止实时编译。 按F1或..原创 2021-10-11 20:31:27 · 143 阅读 · 0 评论 -
使用 Vue 实现 CSS 过渡与动画效果
一、基础使用通过 class 实现。 动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>使用 Vue 实现 CSS 过渡与动画效果</title> <style> /* 动画 */ @keyframes rightToLeft { 0% { transform原创 2021-10-08 16:22:47 · 600 阅读 · 0 评论 -
Vue实例 property
名称 描述 $data 组件实例正在侦听的数据对象。 $props 当前组件接收到的 props 对象。 $refs 一个对象，持有注册过refattribute的所有 DOM 元素和组件实例。 $attrs 包含了父作用域中不作为组件props或自定义事件的 attribute 绑定和事件。 $refs一个对象，持有注册过refattribute的所有 DOM 元素和组件实例。<!DOCTYPE html><h...原创 2021-10-08 11:32:11 · 606 阅读 · 0 评论 -
Vue内置组件
名称 描述 component 渲染一个“元组件”为动态组件。 keep-alive 主要用于保留组件状态或避免重新渲染。 slot <slot>元素作为组件模板之中的内容分发插槽。<slot>元素自身将被替换。 1.component渲染一个“元组件”为动态组件。依is的值，来决定哪个组件被渲染。is的值是一个字符串，它既可以是 HTML 标签名称也可以是组件名称。<!DOCTYPE html><ht...原创 2021-10-08 11:31:59 · 220 阅读 · 0 评论 -
Vue常用指令
指令 描述 {{}} 插值表达式 v-text 更新元素中的text内容 v-html 更新元素中的 innerHTML v-if 根据表达式的真假值来有条件地渲染元素。 v-else-if 表示v-if的“else if 块”。可以链式调用。 v-else 为v-if或者v-else-if添加“else 块”。 v-for 基于源数据多次渲染元素或模板块。 v-on 绑定事件监听器。 v-bind ...原创 2021-10-07 12:40:27 · 133 阅读 · 0 评论 -
Vue生命周期钩子
生命周期图示原创 2021-10-05 17:04:06 · 137 阅读 · 0 评论 -
Vue的常用参数
名称 描述 data() 该函数返回组件实例的 data 对象。 computed 计算属性将被混入到组件实例中。 methods methods 将被混入到组件实例中。 watch 一个对象，键是要侦听的响应式 property。 template 一个字符串模板，用作 component 实例的标记。 1. data()该函数返回组件实例的 data 对象。 实例创建之后，可以通过 vm.$data 访问原始数据对象。 组件实例也代理原创 2021-10-05 14:51:15 · 2908 阅读 · 1 评论 -
第一个Vue程序
Vue的官网：Vue.js。1. 创建一个HTML文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>第一个Vue程序</title></head><body></body></html>2. 引入Vue.js<!-- 引入最新版的Vue.js.原创 2021-10-05 14:21:28 · 176 阅读 · 0 评论