vue环境安装-编程思维
vue环境搭建过程 安装node环境 node -v 命令行显示v12.19.0,这样就代表安装完成 由于在国内使用npm是非常慢的,所以在这里我们推荐使用淘宝npm镜像,使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具:npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装使用vue-cli脚手
morethink program
vue环境搭建过程 安装node环境 node -v 命令行显示v12.19.0,这样就代表安装完成 由于在国内使用npm是非常慢的,所以在这里我们推荐使用淘宝npm镜像,使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具:npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装使用vue-cli脚手
1 .原生js获取 DOM 节点 document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器) .... 2. vue2中获取当前组件的实例对象 因为每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。所
子路由的地址如果是希望拼接父路由地址,子路由的 path 仅写名称,不写 “/”,如果希望是另外的地址,则直接以 “/” 开头。 { path: "/lifetools", name: "lifetools", component: () => import(/* webpackChunkName: "LifeT
<div id="app"> <button type="button" @click="btnClick(a,$event)">maomao</button> <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis
最近发现这个vue3居然还可以这样写 原始写法 <template> <h1>Tangdoudou</h1> <h1>{{ num }}</h1> </template> <script lang="ts"> import { defineComponent } from 'vue'; export
什么是Vite? 法语:轻量化,快速 基于VUE3 非 打包开发服务器,请注意,它是个开发服务器哇!! 快速开发,按需编译,不再等待整个应用编译完成 基于原生模块系统ESModule实现 说白了,就是一个node.js服务器,帮你运行起来代码,让你可以调试 它和我们部署的webserver不同的是,里面内置了websoket,当监听到代码改变 通过websoket更新代码,实现热更新 实现原
前面以及写了三篇了,这是第四篇,等我写完就合并起来哦 这个是第一篇的链接:vite原理,创建项目,基础知识 这个是第二篇的链接Vite-中篇-通过服务访问静态资源以及重写请求路径 这个是第三篇的链接# 从0到1手把手教你实现vite-读取js文件解析所有的import语法,处理字符串并改写文件路径 重写依赖请求路径,处理/@modules/vue引用 接下来呢,我们要让import { cr
每天都要开心(▽)哇: 项目开发过程中,我们会遇到一些情况,就是多个组件都可以重复使用的一部分代码逻辑,功能函数,我们想要复用,这可怎么办呢? VUE2我们是怎么做的呢? 在vue2 中有一个东西:Mixins 可以实现这个功能 mixins就是将这些多个相同的逻辑抽离出来,各个组件只需要引入mixins,就能实现代码复用 弊端一: 会涉及到覆盖的问题 组件的data、methods、fil
每天都要开心(▽)哇: 首先呢,我们来创建项目 执行下面命令,开始创建项目啦 $ npm i -g @quasar/cli $ npm init quasar 下面是我的选项,仅供参考哇 √ What would you like to build? » App with Quasar CLI, let's go! √ Project folder: ... quasar-test-
升级带来的性能提升总结 1.模板编译优化:节点达到一定个数,会自动优化 每次重新渲染,会调用createVnode创建虚拟节点,VUE3会做静态提升,静态节点进行提取,进行优化 2.事件 缓存事件,防止重新创建事件 3.响应式原理 defineProperty 改为 proxy 4.Vue3 diff算法,可以根据patchFlag做diff Vue2是全量的dif
Typescript是什么? TypeScript是Javascript的超集,遵循最新的ES5/ES6规范。Typescript扩展了Javascript语法。 为什么要用Typescript? 1.Typescript更像后端,语言严谨,适合开发大型企业应用 2.丰富的语法提示 3.编写代码时进行类型检查提前避免错误 三种使用方式 1.全局安装typescript对TS进行编译 npm in
基本类型 一.最最基础的类型 布尔、数字、字符串类型 let bool:boolean = true; let num:number = 10; let str:string = 'hello world'; 二.元组类型 限制长度个数、类型一一对应,ts中自己实现的,内容固定,类型固定 let tuple:[string,number,boolean] = ['zf',10,true
本文为横向轮播,纵向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll-left> <div class="slot-one"> <div [style]="{ width: dataObjLeft.width + dataObjL
本文为纵向轮播,横向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll-up [dataObj]="dataObjUp"> <div class="slot-one"> <div [style]="{ height: dataObj