vue
蜗牛ha
一枚积极向上的it男,7年前端开发经验。。。
展开
-
VUE源码浅读
首先我们要知道vue代码如何运行的?【初始化及挂载】=>【编译】(parse-optimize-generate)=>【render function渲染】(响应式)=>【Virtual DOM】=>【更新视图】初始化及挂载在new了vue之后,Vue会调用_init函数进行(全局)初始化。初始化生命周期、事件、props、methods、data、computed、watch等。其中最重要的是通过Object.defineProperty设置setter和getter函原创 2022-02-20 21:22:06 · 438 阅读 · 0 评论 -
从新回归Vue之3.0(七):安装scss并配置全局样式文件,.env.环境变量配置和读取
一,安装sass// 注意要使用scss,必须安装依赖,否则报错npm install node-sass sass-loader sass -D在这一步很多人可能会卡住,例如我电脑上版本node -v v12.16.1vue3.0项目安装sass报错npm install node-sass sass-loader sass -D报错如下:npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! node-sass@7.0.1 posti.原创 2022-01-12 23:02:01 · 1208 阅读 · 0 评论 -
从新回归Vue之3.0(六):配置vite.config.ts,tsconfig.json
一,配置vite.config.ts可以先将l以下几行代码注释import { loadEnv } from "vite";port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),target: loadEnv(mode, process.cwd()).VITE_APP_BASE_URL,additionalData: '@import "@/assets/styles/global.scss";',loadEnv和scss将..原创 2022-01-12 22:54:51 · 2651 阅读 · 0 评论 -
从新回归Vue之3.0(五):router配置,引入element-plus
一,router配置以及使用详解安装npm install vue-router@4贴一个极度简单的vue页面模型<template></template><script setup lang="ts">import { ref, reactive, watch, onMounted, computed } from "vue";import { useStore } from "vuex";import { useRouter } from "v原创 2022-01-11 22:49:48 · 1103 阅读 · 0 评论 -
从新回归Vue之3.0(四):动态组件,vuex
一,component动态组件由于组件被引用为变量而不是作为字符串键来注册的,在 <script setup> 中要使用动态组件的时候,就应该使用动态的 :is 来绑定:<script setup lang='ts'>import Foo from './Foo.vue'import Bar from './Bar.vue'</script><template> <component :is="Foo" /> <c原创 2022-01-10 23:14:29 · 810 阅读 · 0 评论 -
从新回归Vue之3.0(三)Watch,WatchEffect,生命周期
一,Watch和WatchEffect使用方法原创 2022-01-09 22:56:57 · 498 阅读 · 0 评论 -
从新回归Vue之3.0(二):setup,defineProps,defineEmits,变量,defineExpose
一,单页面入口setup()1.在setup()中不能用this在vue2.x里飞天遁地的this没有了,因为`setup` 的调用发生在 `data` 、`computed` 或 `methods` 被解析之前,所以它们无法在 `setup` 中被获取,这也是为了避免setup()和其他选项式API混淆。2.setup推荐用法<template> <h1>{{ msg }}</h1></template><script原创 2022-01-09 21:26:52 · 6181 阅读 · 0 评论 -
从新回归Vue之3.0(一):Vite,创建
开篇技术栈:Vite+Vue3+Volar+Ts+Element-plus原创 2022-01-09 21:15:06 · 564 阅读 · 0 评论 -
VUE插件总结
UI组件element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一...转载 2018-11-09 16:58:48 · 729 阅读 · 0 评论 -
Vue2 详解生命周期
最近使用Vue2做了一个项目,生命周期钩子分别是:beforeCreate:实例刚创建,属性绑定之前created:实例创建完成,属性绑定,但是还未将实例挂载到'el'上,也就是挂载元素上。beforeMount:模板编译/挂载前mounted:模板编译/挂载之后在mounted请求数据时,将数据更新到已经初始化后的数据里。在这个过程中,会先执行beforeUpdate...原创 2018-09-12 11:18:46 · 1261 阅读 · 0 评论 -
剖析Vue原理&实现双向绑定MVVM
vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。整理了一下,要实现mv...原创 2018-09-12 10:47:36 · 214 阅读 · 0 评论 -
学习react.js之sass语言入门
1.sass被叫做"CSS预处理器"(css preprocessor);它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。2.window下面安装rubyhttps://www.ruby-lang.org/en/documentation/installation/#homebrew下载rubyinstaller.exe 安装就可以了。3....原创 2018-08-31 10:23:57 · 152 阅读 · 0 评论 -
vue学习路线1——搭建本地项目
一.安装nodejs链接:https://nodejs.org/zh-cn/二.安装webpack 安装命令:cnpm install webpack -g安装完成,通过webpack -v来查看当前webpack版本三.接着安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架安装命令:npm install -g vue-cli原创 2018-03-26 15:18:41 · 604 阅读 · 2 评论 -
vue学习路线1——文件配置介绍
├── README.md 项目介绍├── index.html 入口页面├── build 构建脚本目录│ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面│ ├── build.原创 2018-03-23 10:30:53 · 177 阅读 · 0 评论