Vue.js
文章平均质量分 85
Sheldon一蓑烟雨任平生
目前正在学习Vue.js、React.js和微前端,并持续跟新相关博客内容
展开
-
如何写一个vue组件发布到npm,包教包会,保姆级教学
如何写一个简单的组件发布到npm前言1.前期准备——创建一个vue项目前言因为本章内容主要是说明如何将组件发布到npm的步骤,所以创建的组件相当简单,并不会涉及到其他的诸如ElementUI或者Ant Design Vue之类的UI组件库。如果是涉及到如何创建一个自己的组件库或者基于其他的组件库创建的组件发布,这一部分的内容,我会放到该专题内容接下来的几篇文章进行详细说明。1.前期准备——创建一个vue项目使用vue create 项目名称命令创建一个基础的vue项目,因为是比较简单的演示,所以选择原创 2021-12-04 21:32:17 · 6475 阅读 · 3 评论 -
vue如何根据ip地址获取实时当地城市、时间、天气
vue如何根据ip地址获取当地城市、时间、天气1.定位ip地址所在城市1.1获取使用腾讯位置API资格1.2设置授权IP1.3使用API获取IP地理位置1.3.1处理跨域问题1.3.2请求接口,获取数据2.根据获取的城市名称获取当地天气2.1引入axios2.2使用接口,获取当地天气2.2.1声明定时器2.2.2使用接口获取实时天气数据2.2.3销毁定时器需求说明:通常我们在做一个项目时,首页需要一个模块,根据ip地址获取实时当地城市、时间、天气。因为天气的接口需要城市这个参数,因此首先需要根据ip地址获原创 2020-07-23 13:54:33 · 5286 阅读 · 1 评论 -
4.梳理vue项目,删除不必要的代码和组件
梳理vue项目,删除不必要的代码和组件1.创建分支2.使用vue ui打开一个刚创建的vue项目3.删除不必要的代码和组件3.1删除App.vue中的默认内容3.2删除默认的路由内容和对应的view文件3.3删除除了app以外的其余组件1.创建分支使用vscode打开前端项目执行:git status检查项目状态。执行:git checkout -b login 创建login分支,并且切换到该分支。执行:git branch 查看当前项目所有分支执行:git status 查看项目当前在哪个分原创 2020-06-29 17:51:53 · 5864 阅读 · 2 评论 -
为啥vue-cli创建的项目只有package.json?
为啥vue-cli创建的项目只有package.json?原因解决方案原因各不相同,有的人说是环境变量问题。但是我发现环境中根本没有hadoop变量。我想到之前对npm、vue-cli进行过一系列的删除、重装或者升级操作,可能是在这个过程发生了问题,有的包缺失了。原因我遇到的问题原因应该就是npm或者vue-cli的安装包有问题。重装也没有效果,应该是有缓存文件的原因。解决方案最暴力有效的解决方案:直接卸载nodejs和删除npm、vue等相关文件,然后重装nodejs,install最新版本的n原创 2020-06-29 13:34:53 · 3151 阅读 · 6 评论 -
2.通过vue ui(vue脚手架)快速创建项目步骤
通过vue ui快速创建项目步骤1、打开Vue项目管理器2、创建项目1、点击“创建”,选择存放项目的目录,点击“在此创建新项目”2、设置详情3、进行预设3、选择功能4、进入配置3、项目创建完成1、打开Vue项目管理器win+R,输入cmd,回车打开终端,输入vue ui,回车。默认浏览器会打开8080端口Vue项目管理器。2、创建项目1、点击“创建”,选择存放项目的目录,点击“在此创建新项目”2、设置详情设置项目文件夹名称、包管理器、更多选项和Git等项目初始设置。其中项目文件夹必填。原创 2020-06-29 01:53:06 · 2009 阅读 · 0 评论 -
Vue不同组件之间的切换
Vue不同组件之间的切换Vue不同组件之间的切换使用v-if和v-else进行切换使用标签component来实现切换总结Vue不同组件之间的切换组件的切换有两种方式,第一种使用v-if和v-else进行切换,第二种是使用标签名component来实现切换。使用v-if和v-else进行切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n原创 2020-05-31 18:34:02 · 3261 阅读 · 0 评论 -
Vue组件父传值向子组件传值
Vue组件父传值向子组件传值Vue组件父传值向子组件传值可以直接使用父组件的data中的数据向子组件传值吗?Vue组件父传值向子组件传值在很多场景下,我们经常需要从父组件传值到定义好的子组件模板中,但是可以直接使用父组件的data中的数据向子组件传值吗?...原创 2020-05-31 17:59:27 · 168 阅读 · 0 评论 -
Vue组件的data为什么必须是function
Vue组件为什么必须是functionVue组件为什么必须是function组件data定义为对象会有什么问题data定义为函数,但是引用外部数据会有什么问题组件data的正确定义方式Vue组件为什么必须是function在最初的Vue实例中,我们所定义的data都是以对象的形式定义,但是在组件中,Vue却告诉我们需要使用function来定义一个data,究竟组件中的data和平时所用的data有和区别呢?组件data定义为对象会有什么问题<!DOCTYPE html><htm原创 2020-05-31 17:46:11 · 2153 阅读 · 0 评论 -
Vue中创建全局组件的三种方式
Vue中定义组件的三种方式什么是组件组件化和模块化的区别定义组件的三种方式1、使用 Vue.extend 来创建全局的 Vue组件2、使用 Vue.component 来创建全局的 Vue组件3、在被控制的 #app 外面,使用 tempalte 元素,定义组件的HTML结构注意点什么是组件组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能,将来我们需要什么功能,就可以去调用对应的组件即可。组件化和模块化的区别模块化:是从代码逻辑的角度进行划分的;方便代码分层开发原创 2020-05-27 21:16:55 · 4311 阅读 · 2 评论 -
Vue动画篇(四)——列表动画
Vue动画篇(四)——列表动画列表动画列表添加功能动画实例注意事项列表删除功能动画实例注意事项列表动画按理说,其实列表动画没必要单独拿出来写一篇文章。但是使用Vue写列表动画有几个注意点必须注意,否则动画可能会失效。列表添加功能动画实例这是一个简单的列表,只有一个简单的添加数据的功能,动画部分是每次添加数据时,新出现的数据都会以动画的形式出现。<!DOCTYPE html><html lang="en"><head> <meta charse原创 2020-05-27 19:23:56 · 365 阅读 · 0 评论 -
Vue动画篇(三)——半场动画
Vue动画篇(三)——半场动画半场动画实现方式所有的JavaScript钩子半场动画前两篇说明了如何使用过渡类和animate.css实现来回动画,就是初始状态到结束状态的动画和结束状态到初始状态的动画,可以理解为全场动画。但是有时候,我们只需要初始状态到结束状态的动画,那么,这样的动画,我们就可以称之为半场动画。实现方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-05-27 18:15:29 · 312 阅读 · 0 评论 -
Vue动画篇(二)——使用animate.css类库实现动画
使用第三方animate.css类库实现动画前面我们已经学习了过渡类动画的六个过程和使用方式,还学会了给不同的transition定义不同的名称用以分别不同的动画。但是如果每一个动画都要自己写就会很浪费时间并且不易实现。因此我们可以借助第三方animate.css类库来实现一些特殊的动画。实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n原创 2020-05-27 15:50:42 · 661 阅读 · 0 评论 -
Vue动画篇(一)——使用过渡类名实现动画
Vue使用过渡类名实现动画什么是过渡类名和组件transition过渡类动画实例自定义过渡类动画名称什么是过渡类名和组件transition首先我们需要了解动画的本质,动画就是一个元素或者组件从一种状态进入/离开到另一种状态的整个过程(包括动画的开始状态和结束状态)。比如,v-show和v-if所实现的功能就是一种动画——元素从显示到隐藏的相互转换。在Vue中在动画进入/离开的过渡中,规定会有 6 个 class 切换。1、v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入原创 2020-05-27 15:49:44 · 841 阅读 · 0 评论 -
如何理解Vue实例的生命周期
如何理解Vue实例的生命周期生命周期是什么生命周期函数的分类生命周期函数实例每个周期函数的存在时间和表现形式创建期间的生命周期函数运行期间的生命周期函数销毁期间的生命周期函数生命周期图解生命周期是什么概念:Vue生命周期,听起来好像很高大上,其实就是Vue实例从创建、运行到销毁期间遇到的各种事件的总和。就像我们人从出生到成长到死亡的整个过程遇到的各种事故一样。生命周期钩子,其实就是生命周期事件的别名而已。生命周期钩子 = 生命周期函数 = 生命周期事件。生命周期函数的分类生命周期函数 = 创建期原创 2020-05-26 15:08:00 · 578 阅读 · 0 评论 -
Vue中的自定义指令和使用方式
Vue中的指令和使用方式Vue中的指令和使用方式什么是指令?自定义指令1、全局自定义指令2、私有自定义指令Vue中的指令和使用方式什么是指令?v-model、v-bind、v-on、v-show、v-if 等这些由 v- 开头的都是Vue中的核心内置指令,他们的作用就是在元素的整个生命周期的某个阶段对DOM进行内容或者样式上的操作。自定义指令当Vue中的核心内置指令不能够满足我们的需求时,我们可以定制自定义的指令用来满足开发的需求。1、全局自定义指令(1)定义全局自定义指令以下就是一个自定义原创 2020-05-25 23:26:41 · 5502 阅读 · 1 评论 -
Vue自定义修饰符的使用
Vue自定义修饰符的使用全部的按键别名自定义键盘修饰符键盘事件对应的键码收藏网址全部的按键别名.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right自定义键盘修饰符(1)自定义按键修饰符Vue.config.keyCodes.f2 = 113;(2)使用自定义按键修饰符<input type="text" class="form-control" v-model="name" @keyup.f2="add原创 2020-05-25 16:06:58 · 2674 阅读 · 0 评论 -
Vue中过滤器的使用和注意事项
vue中过滤器的使用什么是过滤器过滤器的使用格式语法全局过滤器1、无参数用法2、带参数用法3、多个过滤器嵌套使用4、全局过滤器的好处私有过滤器1、语法2、就近原则3、注意点什么是过滤器概念:vue.js允许你自定义过滤器,可用于一些常见的文本格式化。过滤器可以使用在2个地方:mustache插值和v-bind表达式,过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示。过滤器的使用格式调用过滤器时的格式:{{name | 过滤器的名称}}语法过滤器的定义语法:Vue.filt原创 2020-05-25 15:27:46 · 776 阅读 · 0 评论 -
安装Vue.js devtools问题的终极解决方案(顶上去,兄弟们)
安装Vue.js devtools问题的终极解决方案几年前的安装步骤(现在有问题)安装Vue.js devtools遇到的问题和解决方案1、版本问题2、node_modules missing3、安装完成后devtool图标还是灰色的或者控制台根本就没有vue几年前的安装步骤(现在有问题)相信大部分童鞋在网上找到的都是这几个步骤(1)下载chrome扩展插件。在github上下载压缩包并解压到本地,github下载地址:https://github.com/vuejs/vue-devtools(2原创 2020-05-24 22:16:33 · 7048 阅读 · 10 评论 -
如何理解v-for中key的用法
v-for中key的使用注意事项在v-for中什么时候必须使用到keykey的类型--string/number注意事项总结在v-for中什么时候必须使用到key首先需要说明的是,v-for中并不是一定要使用到key的,比如数字迭代,一般数组的遍历。但是如果但我们的操作和v-for中的对象相关时,就需要使用到key,并且存在一些注意事项。实例代码:<!DOCTYPE html><html lang="en"><head> <meta chars原创 2020-05-24 01:00:53 · 4151 阅读 · 0 评论 -
v-for的四种使用方式
v-for的四种使用方式v-for的四种使用方式1、数组2、在对象数组3、对象4、迭代数字总结v-for的四种使用方式1、数组在Vue中使用v-for遍历数组时v-for最常见的一种使用方式。(1)先在data中定义数组arr: [1, 2, 3, 4, 5],(2)在标签中遍历<p v-for="(item,index) in arr">数值:{{item}},索引:{{index}}</p>2、在对象数组对象数组,其实说到底也是数组,使用方式上和数组一模一原创 2020-05-23 23:53:55 · 22700 阅读 · 2 评论 -
Vue中使用使用内联样式
Vue中使用使用内联样式Vue中使用内联方式的3中方式1、直接在元素上通过:style的形式,书写样式对象2、将样式对象定义到data中,再引用3、使用数组,引用多个data上的样式对象Vue中使用内联方式的3中方式1、直接在元素上通过:style的形式,书写样式对象<h1 :style="{'color':'red','font-weight':200}">你会freestyle吗?</h1>实例代码:<!DOCTYPE html><html lan原创 2020-05-23 20:22:28 · 1505 阅读 · 0 评论 -
Vue中设置class类样式
vue中通过属性绑定为元素设置class类样式vue中class类样式的4种绑定方式1、数组2、三元表达式3、数组嵌套对象4、直接使用对象vue中class类样式的4种绑定方式1、数组<h1 :class="['thin','red','italic','active']">你看这个碗,他又大又圆!</h1>实例代码:<!DOCTYPE html><html lang="en"><head> <meta charse原创 2020-05-23 19:56:13 · 9566 阅读 · 3 评论 -
Vue中事件修饰符的使用方式
vue中的事件修饰符事件修饰符是什么不同的事件修饰符.stop事件修饰符.prevent事件修饰符.capture事件修饰符.self事件修饰符.once事件修饰符事件修饰符是什么vue中的事件修饰符用于控制事件的标签范围和标签的默认事件,比如点击事件的冒泡行为和a标签的href默认点击跳转事件。不同的事件修饰符.stop事件修饰符.stop作用:阻止冒泡首先,我们需要理解什么是事件冒泡。事件冒泡是指多个标签元素嵌套时,点击(或者其他事件)内部标签,也会触发外部包裹标签的点击事件。比如下面这个例原创 2020-05-23 17:01:13 · 570 阅读 · 0 评论 -
v-cloak、v-text和v-html的基本区别
v-cloak、v-text和v-html的基本区别v-text和插值表达式的区别v-cloak:用来消除插值表达式的闪烁问题v-html和v-text、插值表达式的区别v-text和插值表达式的区别在使用v-text="msg"时,v-text中的内容msg会直接取代标签中的原有内容。而使用插值表达式{{msg}},可以不会取代标签中的原有内容。因此,通常使用插值表达式{{msg}}插入内容更加合理。v-cloak:用来消除插值表达式的闪烁问题使用插值表达式固然更加方便,但是在页面渲染速度较慢原创 2020-05-23 14:47:36 · 184 阅读 · 0 评论 -
网络应用——axios+vue
网络应用——axios+vueVue.js如何获取网络数据为什么是axios?ajax不香吗?axios的使用方法Vue.js如何结合axiosVue.js如何获取网络数据学习完Vue.js基本的语法后,如果要制作网络应用,必然也要使用到获取网络上的数据。Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,在这里推荐大家使用。但是大家一定也会有疑问:为什么使用axios而不是ajax?axiox的使用方法是什么?以及Vue.js如何结合axios使用呢?下面为原创 2020-05-17 02:27:50 · 202 阅读 · 0 评论 -
VS Code如何操作用户自定义代码片段(vue为例)
VS Code如何操作用户自定义代码片段VS Code自定义代码片段的4个步骤1.在VS Code中找到用户代码片段2.选择对应代码片段文件 html3.输入自定义的快捷代码和相应的模板片段代码4.在.html后缀的文件中输入快捷代码并回车VS Code自定义代码片段的4个步骤你好!VS Code是一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。由于使用人数基数较大,那么如何高效地编写代码则是coder们经常考虑的一个问题,今天就原创 2020-05-16 19:24:37 · 3383 阅读 · 5 评论 -
Vue.js中的v-model指令(双向绑定)
Vue.js中v-model的作用v-model的作用和使用场景1.v-model的作用--双向绑定2.v-model双向绑定的使用场景——表单3.总结v-model的作用和使用场景你好!Vue.js作为现在最为常用的前端框架之一,经常会使用到“双向绑定”这一概念。今天我们就对Vue中的“双向绑定”这一核心特性进行一个简单的说明。1.v-model的作用–双向绑定单向绑定 ,非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。双向绑定,原创 2020-05-16 21:25:26 · 8780 阅读 · 0 评论