vue环境安装-编程思维

vue环境搭建过程 安装node环境 node -v 命令行显示v12.19.0,这样就代表安装完成 由于在国内使用npm是非常慢的,所以在这里我们推荐使用淘宝npm镜像,使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具:npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装使用vue-cli脚手

@vue/cli 插件开发之自动根据目录列表生成别名配置-编程思维

1.相关文档 @vue/cli官方文档 @vue/cli @vue/cli插件开发指南 @vue/cli 2.插件命名规范 为了让一个 CLI 插件在 Vue CLI 项目中被正常使用,它必须遵循 vue-cli-plugin- 或者 @scope/vue-cli-plugin- 这样的命名惯例。这样你的插件才能够: 被 @vue/cli-service 发现; 被其他开发者通过搜索发现;

vue 获取 dom 元素的方法-编程思维

1 .原生js获取 DOM 节点 document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器) .... 2. vue2中获取当前组件的实例对象 因为每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。所

axios+vue-编程思维

网络应用 Vue结合网络数据开发应用 axios+vue 他与本地应用的不同点是 data中的数据有一部分是从网络中获取到的 axios(网络请求库) 内部就是ajax 但是通过封装后用起来更加便捷 axios是一个功能强大的网络请求库 js库 作为js库 首先我们需要导包 确保在有网的状态下 在引入后 他会在页面上注册一个全局的axios对象 来发送请求 axios.get(提供的接口地址?

vue组件-编程思维

  组件使用的基本步骤创建组件构造器  Vue.extend()方法      //在vue2.x版本后基本已经很少见了 用了新的语法糖代替注册组件    Vue.component()方法使用组件    在Vue的作用范围内使用组件   组件若标签内不需要传其他值的时候 可以使用单标签,可以使代码看起来更加简便  (但是 我试过会报错。。。所以能不用就不用吧。。。。)例 Vue.compon

vue的父与子组件的访问-编程思维

父访问子  (需要掌握) this.$children 和 this.$refs   this.$children 返回的是一个数组,包含父组件的所有子组件  this,$refs 返回的是一个对象,默认为空,返回父组件中所有标签带有ref属性的子组件 this.$children 是获取父组件的所有子组件,然后返回一个数组   (不常用)this.$refs 则是通过给 组件标签上 加上一个

slot插槽-编程思维

<slot></slot>  写在template模板中 在组件的模板中使用了slot标签后,该组件在使用时可以在组件标签内填写内容,他会自动代替插槽的位置 1.插槽的基本使用<slot></slot>2,插槽的默认值<slot>button< /slot>3.如果有多个值,同时放入到组件进行替换菜,一起作为替换元素->

从0到1手把手实现vite-编程思维

什么是Vite? 法语:轻量化,快速 基于VUE3 非 打包开发服务器,请注意,它是个开发服务器哇!! 快速开发,按需编译,不再等待整个应用编译完成 基于原生模块系统ESModule实现 说白了,就是一个node.js服务器,帮你运行起来代码,让你可以调试 它和我们部署的webserver不同的是,里面内置了websoket,当监听到代码改变 通过websoket更新代码,实现热更新 实现原

从0到1手把手教你实现vite系列--重写依赖请求路径,处理/@modules/vue引用-编程思维

前面以及写了三篇了,这是第四篇,等我写完就合并起来哦 这个是第一篇的链接:vite原理,创建项目,基础知识 这个是第二篇的链接Vite-中篇-通过服务访问静态资源以及重写请求路径 这个是第三篇的链接# 从0到1手把手教你实现vite-读取js文件解析所有的import语法,处理字符串并改写文件路径 重写依赖请求路径,处理/@modules/vue引用 接下来呢,我们要让import { cr

我居然不知道vue3可以使用hooks函数实现代码复用?-编程思维

每天都要开心(▽)哇: 项目开发过程中,我们会遇到一些情况,就是多个组件都可以重复使用的一部分代码逻辑,功能函数,我们想要复用,这可怎么办呢? VUE2我们是怎么做的呢? 在vue2 中有一个东西:Mixins 可以实现这个功能 mixins就是将这些多个相同的逻辑抽离出来,各个组件只需要引入mixins,就能实现代码复用 弊端一: 会涉及到覆盖的问题 组件的data、methods、fil

从0开始学习vue3--01-vue2与vue3的不同点-编程思维

升级带来的性能提升总结 1.模板编译优化:节点达到一定个数,会自动优化 每次重新渲染,会调用createVnode创建虚拟节点,VUE3会做静态提升,静态节点进行提取,进行优化 2.事件 缓存事件,防止重新创建事件 3.响应式原理 defineProperty 改为 proxy 4.Vue3 diff算法,可以根据patchFlag做diff Vue2是全量的dif

深入typescript--01-使用roolup编译typescript-编程思维

Typescript是什么? TypeScript是Javascript的超集,遵循最新的ES5/ES6规范。Typescript扩展了Javascript语法。 为什么要用Typescript? 1.Typescript更像后端,语言严谨,适合开发大型企业应用 2.丰富的语法提示 3.编写代码时进行类型检查提前避免错误 三种使用方式 1.全局安装typescript对TS进行编译 npm in

深入typescript--02-typescript数据类型-编程思维

基本类型 一.最最基础的类型 布尔、数字、字符串类型 let bool:boolean = true; let num:number = 10; let str:string = 'hello world'; 二.元组类型 限制长度个数、类型一一对应,ts中自己实现的,内容固定,类型固定 let tuple:[string,number,boolean] = ['zf',10,true