Vue3
文章平均质量分 70
快起来搬砖了
这个作者很懒,什么都没留下…
展开
-
Vue生命周期
什么是 vue 生命周期Vue 有⼀个完整的⽣命周期,从开始创建、初始化数据、编译模版、挂载Dom(渲染)更新( 渲染)、卸载 等过程称之为Vue⽣命周期。Vue2生命周期beforeCreate:创建前实例初始化之后,数据观测和事件配置之前被调用,此时组件未创建选项的对象,el 和data 未初始化,无法访问methods, data, computed等上的方法和数据 created:创建前后实例创建完成之后被调用,实例已经完成以下的配置:数据观测,属性和方法的运算,watch/ev原创 2022-05-09 22:27:02 · 349 阅读 · 0 评论 -
Vue3 watch和watchEffect的用法
watch和watchEffect都起到监听作用,但是他们在使用和写法上面有所不同watch使用:https://blog.csdn.net/weixin_44590591/article/details/124598751watchEffect使用:watch和watchEffect的区别**watch:**既要指明监视的属性,也要指明监视的回调watchEffect:特点:不需要手动传入依赖、每次初始化时会执行一次回调函数来自动获取依赖无法获取到原值,只能得到变化后的值wat原创 2022-05-06 21:44:44 · 296 阅读 · 0 评论 -
Vue3中watch的详解
Vue3中watch的详解Vue2使用watch<template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div></template><script>import { ref } from "vue";export default { // vue2中使用watch watch: { sum: { deep原创 2022-05-05 22:58:09 · 15551 阅读 · 2 评论 -
vite构建vue3.0项目
vite官网: https://vitejs.dev/1. 什么是vite新一代的前端构建工具2. 优势开发环境中,不需要打包操作,可以快速冷启动轻量快速的热重载(HMR)按需编译,不用等待整个应用编译完成3、传统构建 与 vite 构建对比4、创建工程// 创建工程npm init vite-app project-name// 进入项目目录cd project-name// 安装依赖npm install // 运行npm run dev项目结构m原创 2022-02-17 14:31:07 · 851 阅读 · 0 评论 -
Vue3.0中this的替代方法
Vue3.0中this的替代方法在vue3中,新的组合式API中没有this,我们可以通过以下方法替代thissetup 在生命周期 beforecreate 和 created 前执行,此时 vue 对象还未创建,所以我们无法使用 this方法一getCurrentInstance() 方法,获取当前组件的实例,通过 ctx 或 proxy 属性获得当前上下文,从而就能在setup中使用router和vueximport { getCurrentInstance } from "vue";原创 2022-01-25 16:52:19 · 15076 阅读 · 1 评论 -
vue3.0 watch监听器使用方法
vue3.0 watch监听器使用方法Vue2export default { watch:{ } }Vue31、侦听ref创建的data数据 import {ref,watch,} from 'vue'export default { setup() { const name = ref("张三") /** * watch:侦听数据变化 * oldvalue:系统自动注入,更新之前的数据 *原创 2022-01-24 17:30:25 · 5019 阅读 · 0 评论 -
vue3.0 computed使用
vue3.0 computed使用Vue2: export default { computed:{ //计算属性方法 }, }Vue3:方法1: export default { computed:{ //计算属性方法 }, }方法2: import { computed } from 'vue' const reverseMsg = computed(() => {})完整示例<!-- ho原创 2022-01-21 15:52:29 · 740 阅读 · 0 评论 -
vue3.0中setup使用 Composition组合API介绍
Vue3 Composition组合API介绍setup():注意:在组件渲染完成之前执行,所以不能在setup中通过this访问组件对象在setup方法中返回的数据会自动和组件data中的数据进行合并在setup中返回的方法,自动和methods对象进行合并<!-- home.vue --><template> <div> <h1>姓名:{{name}}</h1> <h1>时间:{{time}}原创 2022-01-21 15:18:28 · 560 阅读 · 0 评论 -
Vue3.0新增特性——Fragment模版碎片
Vue3新增特性——Fragment模版碎片vue2中组件的模版必须有一个唯一的跟标签vue3中组件模版可以有多个跟标签Vue3实例<!-- home.vue --><template> <h1>{{msg}}</h1> <h1>{{text}}</h1></template><script> export default { data() { return原创 2022-01-21 11:17:43 · 543 阅读 · 0 评论 -
Vue3快速上手
cdn获取方式对于制作原型或学习,你可以这样使用最新版本://对于生产环境推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏<script src="https://unpkg.com/vue@next"></script>也可以下载文件直接引入 文件地址<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CDN引入原创 2022-01-21 10:30:17 · 1408 阅读 · 1 评论 -
Vue3 从零搭建项目及插件的使用
node:v14.16.1vue:@vue/cli 4.5.121、项目初始化1.1、项目前期需求//使用Vue3,需要升级vue-cli,全局安装最先版本@vue/cli;npm install -g @vue/cli@next// 安装成功后输入,显示,安装成功 vue -V //@vue/cli 4.5.12 1.2、安装成功后搭建Vue3项目vue create myproject1.3、 启动服务cd myproject //进入文件npm run serv原创 2022-01-20 09:35:36 · 1078 阅读 · 0 评论