Vue3 学习笔记
文章平均质量分 94
John是橘红
...
展开
-
08.Vue3 中的 Vue-Router 和 VueX
Vue3 中的 Vue-Router 和 VueX先使用 vue create 指令来创建 vue 工程项目,并选择自定义,将 Router 和 VueX 勾上。勾上以后看主入口 main.js,可以看到项目自动帮我们注册了 vue-router 和 VueX。// main.jscreateApp(App).use(store).use(router).mount('#app')1. Vue-Router 路由的理解和使用路由是指根据 url 的不同,展示不同的内容。查看 src 文件夹原创 2022-05-15 16:44:11 · 775 阅读 · 0 评论 -
07.Vue3 项目开发配套工具 CLI 详解
Vue3 项目开发配套工具详解1. Vue CLI 的使用和单文件组件Vue CLI,人称 Vue 脚手架,就是可以快速搭建起 Vue 项目工程开发环境的工具。官网: Vue CLI安装脚手架npm install -g @vue/cli# ORyarn global add @vue/cli如果是老脚手架需要先删除,然后再安装npm uninstall vue-cli -g# ORyarn global remove vue-cli安装后查看版本,是否有安装成功。vue原创 2022-05-15 16:42:31 · 713 阅读 · 0 评论 -
06.Vue3 中的 Composition API
Vue3 中的 Composition API为什么要有 Composition API?当一个组价越来越大的时候,data、methods、computed、directives、mixin 等混杂在一起。里面的功能是混杂的,在一堆混杂的逻辑里面查找如 name 相关的逻辑的话,就会有一定的困难。这样的话会造成可维护性降低。Composition API 就是解决这个问题的有效方案。1. setup 函数的使用setup 函数是在 created 时候(实例被初始化前)执行的。里边返回数据或者方原创 2022-05-15 16:40:31 · 1982 阅读 · 0 评论 -
05.Vue3 中的高级语法: mixin, plugin, render, 自定义指令等
Vue3 高级语法1. Mixin 基础语法mixin 是混入的概念。从外部带来一些数据给组件使用。1.1 使用方法定义一个 mixin 对象,然后在组件的 mixins 里加入自己定义的 mixin 对象即可。const myMixin = { data() { return { number: 2, count: 222, } }, created() { console.log("mixin created") },}co原创 2022-05-09 18:15:43 · 1644 阅读 · 0 评论 -
04.Vue3 过渡与动画
Vue3 过渡与动画1. 使用 Vue 实现基础的 CSS 过渡与动画效果过渡与动画的差别过渡:元素状态缓慢改变的过程动画:一个元素运动的情况1.1 vue 实现动画效果用 class 类名实现动画效果先写一个动画样式 <style> @keyframes leftToRight { from { transform: translateX(-100px); } to { transform原创 2022-05-07 15:59:43 · 973 阅读 · 1 评论 -
03.Vue3 组件的概念,组件通信,插槽,动态组件与异步组件
Vue3 探索组件的理念1. 组件的定义及复用性,局部组件和全局组件用树来表达一个网页的结构,将一个网页拆成小组件,会更容易维护。例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。全局组件简单实现组件化:<script> const app = Vue.createApp({ template: ` <div> <Hello /> <World />原创 2022-05-06 18:05:18 · 881 阅读 · 0 评论 -
02.Vue3 基础语法:常用语法、列表渲染、事件绑定和表单双向绑定
Vue3 基础语法1. Vue 中应用和组件的基础概念createAppcreateApp 表示创建一个 Vue 应用,存储在 app 变量中。传入的参数表示,这个应用最外层的组件,应该如何展示。const app = Vue.createApp({ data() { return { message: "hello world" } }, template: "<div>{{ message }}<原创 2022-05-05 17:17:15 · 1101 阅读 · 0 评论 -
01.Vue3 语法初探
Vue 语法初探1. 用 vue 编写定时器最原始形态,把 app 挂载到 id 为 root 的元素上,然后 template 展示相关的内容。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c原创 2022-03-30 22:53:49 · 567 阅读 · 0 评论