vue
龟霸也是高达
Github主页:https://github.com/gitgundam
展开
-
vue3中消失的.sync去哪了呢?原来变成v-model了!!!
在vue2.x中,子传父是这样的父组件父组件监听自定义事件update:title<template> <div class='Father'> 这个是父组件 {{count}} <Son :title="count" @update:title="(e)=>count=e"/> </div></template>子组件子组件发射自定义事件update:title <div class原创 2021-03-30 16:04:46 · 2502 阅读 · 1 评论 -
如何在Vue3中使用router
如何在Vue3中使用router//在vue的js或ts文件中引入vue-router的方法import {createWebHashHistory,createRouter} from 'vue-router'官方提供 createWebHashHistory和 createRoutercreateWebHashHistorycreateWebHashHistory 指哈希模式createWebHistory指history模式无论哪一种都需要在路由实例中做出设置createRou原创 2020-12-19 02:54:53 · 1605 阅读 · 3 评论 -
使用create-vite-app搭建Vue3项目,顺便看看初始化的Vue3和Vue2有啥区别
先安装vitenpm i create-vite-app然后根据官方文档创建文件夹搭建完成查阅相关资料npm init vite-appyarn create vite- app等价于全局安装create-vite-app然后cva <项目名称>或者 create-vite- app <项目名称>...原创 2020-12-18 23:57:56 · 4092 阅读 · 0 评论 -
遇到 TS2741: Property ‘0‘ is missing in type ‘[]‘ but required in type [{xxx:string;yy:number}] 咋办?
我打算设置一个数组,数组内包含一个或多个对象当我这么写时,ts报错:TS2741: Property ‘0’ is missing in type ‘[]’ but required in type ‘[{ name: string; value: number; }]’.type X = [{name: string; value: number }]const x: X = []最后通过stackoverflow上查询到,恍然大悟:上面说,这是一个数组包含一个对象的情况,而不单单是原创 2020-11-25 21:23:11 · 4079 阅读 · 0 评论 -
自己封装一个在Vue.js 和 ts 中使用 Echarts的组件
自己封装一个在Vue.js 和 ts 中使用 Echarts.先把echarts给装了npm install echarts --savenpm install --save @types/echarts然后根据官方文档来先引入echarts:最上面那步不装types/echarts会有报错提示import echarts from 'echarts'然后挂载在组件的DOM上:<template> <div class="Charts"> <原创 2020-11-25 11:21:00 · 442 阅读 · 0 评论 -
[Typescript]如何在全局中定义类型
如何在全局中定义类型第一步:在src目录中新建一个名为 xxx.d.ts的文件必须以.d.ts结尾第二步: 在ts文件中定义类型,如:type RecordItem = { tags: string[]; notes: string; type: string; amount: number; createdAt?: Date;}```最后,就可以引用了...原创 2020-11-14 17:31:43 · 2303 阅读 · 0 评论 -
[Vue小技巧] 父组件只需向子组件传递一个参数,子组件即可动态绑定多个class
实际项目中,我们经常遇到父组件控制子组件的css问题具体思路这样的父组件在子组件的标签上传递一个属性,比如<子组件名称 class-prefix = xxx >子组件使用props:[ 'classPrefix']来获得 名为classPrefix的属性因此,子组件中就有个属性classPrefix,他的值是xxx现在,子组件拥有了父组件传递给他的值那么就可以动态绑定class,使子组件的标签上的class = ’ xxx’为了达到这个目的,需要使用动态绑定v-bind例如原创 2020-11-11 15:10:39 · 714 阅读 · 0 评论 -
warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any
Vue引入SVG Sprite Loader时出现问题在shims-vue.d.ts文件中做相关配置,下图是配置’,然后提交的时候webstorm就报错了解决办法直接关闭any类型的警告:在 .eslintrc.js文件中找到rules 添加一行代码即可"@typescript-eslint/no-explicit-any": ["off"]万恶的eslink,希望对你有帮助...原创 2020-11-11 02:01:41 · 1291 阅读 · 0 评论 -
如何在Vue/Cli 4 中引入 svg图片
使用SVG sprite loader 可以帮助我们在网页中引入svg图片我们可以参照SVG sprite loader官方文档中对于引入loder和plugins的描述以下在webpack.config的文件中配置// webpack 1 multiple loaders{ test: /\.svg$/, loaders: [ `svg-sprite-loader?${JSON.stringify({ ... })}`, 'svg-transform-loader',原创 2020-11-10 17:02:43 · 381 阅读 · 0 评论 -
Vue的路由
啥是Vue路由刚看到这个名字很迷惑,以为是路由器路由是一个网路工程的术语**路由(routing)**就是通过互联的网路把信息从原地址传输到目的地地址的活动—维基百科简单理解就是将信息从一个地方转到另外一个地方路由器提供两种机制:路由和传送路由是决定数据包从来源到目的地的路径转送将输入端的数据转移到合适的输出端一进一出,数据进来,给到路由器,路由器根据路由表,找到mac地址,然后根据mac地址绑定的内网ip,传送到终端路由好处都有啥?世界人民都用它?在前几年后端分离模式之后,现在原创 2020-11-05 02:15:11 · 712 阅读 · 0 评论 -
webpack 的命令配置
一般使用webpack命令打包时,会配置webpack.config.js文件来规定entry和output配置的代码如下,有使用到nodejs的模块const path = require('path') //加载path模块,本地没有就从nodejs全局安装路径寻找module.exports = { entry:'./src/main.js',//要打包的文件 output:{//打包成的文件路径 path: path.resolve(__dirname,'dist'),//自原创 2020-10-27 16:04:15 · 169 阅读 · 0 评论 -
Vue非父组件之间的通信
Vue非父组件之间的通信假设子组件A向子组件B传递信息现在Vue实例中的data中设置名为bus 的Vue实例中介.子组件A在设置监听事件,并设置方法,子组件A的方法为(假设点击事件),通过$root.bus.emit()提交当前的信息给子组件B的自定义事件子组件B通过声明周期钩子,通过created,在实例刚创建的时候,监听这个函数,通过$root.bus.$on('自定义事件',function(value){})接收一个子组件A的参数value通过公共的Vue实例bus总而言之子原创 2020-10-22 14:38:59 · 81 阅读 · 0 评论 -
Vue中名称命名的大小写问题
在html中,字母是不区分的大小写的html中会把大写默认转换成小写因此,Vue组件的命名不能使用驼峰命名直接复制到html标签上否则在寻找组件名称时,小写名称和js中的驼峰命名组件名称不匹配所以会找不到那么咋办呢?用短横线命名啦在Vue组件中,父组件给子组件传递信息,必须使用短横线命名因为涉及html在template中,父组件给子组件传递信息,必须使用驼峰命名template只能用驼峰在组件的data函数中,传递父组件的数据,使用this.xxx时,只能使用驼峰命名原创 2020-10-21 23:35:31 · 1692 阅读 · 0 评论 -
Vue中的v-model的相关
v-modelVue提供了v-model指令,用于双向绑定事件v-model双向绑定data内的数据,当修改input表单内的内容时,data的数据也会发生变化,当data内的数据发生变化时,表单内容发生变化如果使用v-bind:value使表单绑定data数据,当data数据发生变化时,表单内容会变化当表单内容变化时,data数据不会改变因此,使用:value绑定表单,这是单向绑定可以使用绑定表单的内置事件 v-on:input 来改变data数据实现双向绑定(绑定当前点击事件的valu原创 2020-10-16 15:24:04 · 236 阅读 · 0 评论 -
Vue中的各种内置指令
Vue中的各种内置指令基本指令v-cloak网速特别慢或者遇到其他加载问题时,浏览器会先展示dom文本,然后再加载内容,给用户提供很差的体验.体验差,那还不如直接白屏,再出现渲染完的内容v-cloak可以解决画面闪动的问题因为v-cloak在Vue结束编译时,从HTML元素上移除.还未编译完成就一直存在所以让v-cloak的元素一直存在的时候,隐藏html元素.这样用户在页面还没加载完的时候看到的是空白v-once定义它的组件或元素只渲染一次所以后续再怎么改变都不会再重新渲染条原创 2020-10-15 23:14:10 · 375 阅读 · 0 评论 -
v-bind以及class与style的绑定
v-bindv-bind的作用,是绑定活的属性!绑定class 的几种形式对象语法绑定class对象语法:对象的键是类名值是布尔值就像下面这么写<div :class = "{active: isActive, box: isBox}"></div>//active和box是类名,isActive和isBox是布尔值,控制类名是否出现在class上isActive和isBox的布尔值直接储存在data中,如果是true,那么就有这个属性,如果是fals原创 2020-10-14 11:16:15 · 182 阅读 · 0 评论 -
Vue的计算属性
Vue的计算属性什么是计算属性?首先,按照名称,计算属性是用来计算的其次,他是个属性因此,早vue 中,一般处理文本的计算方法叫做计算属性所以,计算属性的引用一般都是取名属性的名字下面的demo中,两个结果都是一样,都是反转一列数字,但是用computed的方法更简洁直观.<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</tit原创 2020-10-13 18:32:48 · 209 阅读 · 0 评论 -
VUE的MVVM是什么呢?
什么是MVVM?直接看维基百科直接看vue 的MVVMvue可以帮我们把Model数据绑定到View上面vue帮我们把View的事件绑定到Model上面下面是一个使用vue实现的计数器demo使用这个demo,来简单理解demo中的MVVM分别指的哪个demo中,当点击+和-时,计数会发生变化<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>J原创 2020-10-10 15:50:16 · 607 阅读 · 0 评论