vue
文章平均质量分 64
多一点开心
这个作者很懒,什么都没留下…
展开
-
vue项目创建
vue项目搭建一、安装node二、安装vue-cli三、创建vue项目一、安装node1、下载地址:https://nodejs.org/en/2、下载安装后:输入node-v,检查是否安装成功vue官方推荐node版本8.9以上二、安装vue-cli创建一个组件化的vue项目需要用到webpack,但是我们自己配置webpack太复杂了,所以vue官方给我们提供了一个脚手架工具vue-cli,vue-cli能帮我们配置一些基础的webpack内容,快速搭建一个vue项目,生成一个基础的vu原创 2021-05-19 11:44:00 · 131 阅读 · 0 评论 -
Vue深入理解组件-非父组件间的传值
非父组件间的传值一、应用场景一、组件参数校验一、应用场景首先将左边的页面可以拆分成右边的组件,如果左边的3号组件要向右边的3号组件传值,使用$emit一层一层向上传值,再一层一层向子组件传值,代码会非常复杂这种非父子组件的传值一般有两种解决方法,第一种使用vue官方提供的数据层的框架vuex(使用有一定难度,一般要结合项目学习),另一种方式是使用Bus(总线/发布订阅模式/观察者模式)一、组件参数校验...原创 2020-11-22 15:19:24 · 70 阅读 · 0 评论 -
Vue深入理解组件-组件参数校验与非props特性
一、父子组件间的数据传递注意:不要直接修改父组件传递给子组件的数据,会报错因为在vue中有单向数据流的概念,父组件可以向子组件传递参数,传递的参数可以随便修改,但是子组件不能修改父组件传递过来的参数,原因在于一旦这个数据还在其他组件中使用,就会对其他组件造成影响...原创 2020-11-01 20:41:29 · 118 阅读 · 0 评论 -
Vue深入理解组件-使用组件的细节点
使用组件的细节点一、使用组件的细节点一、使用组件的细节点原创 2020-10-28 22:05:23 · 182 阅读 · 0 评论 -
Vue基础-表单绑定
表单绑定一、表单绑定一、表单绑定原创 2020-10-26 15:25:05 · 55 阅读 · 0 评论 -
Vue基础-事件绑定
事件绑定一、事件绑定二、事件修饰符一、事件绑定绑定的方法名后面是否加()结果可能不同哦,分别点击三个button按钮查看打印结果二、事件修饰符当我们点击提交的时候页面会自动跳转到abc这个网址如果我们想阻止这个默认行为该怎么办呢?我们绑定一个事件在里面阻止默认行为就可以了,但在vue中可以不用这么麻烦vue提供了一种事件修饰的语法,.prevent就是一种事件修饰符.stop防止事件冒泡.prevent.capture.self.once.passive...原创 2020-10-19 17:24:23 · 282 阅读 · 0 评论 -
Vue基础-set方法
Vue.set使用场景:当生成vue实例后,给原本不存在的属性赋值,赋值成功后的值并不会自动更新到视图上去,这个时候可以用Vue.set官方介绍:举例:改变对象set方法不仅是vue的全局方法还是vue的实例方法,已下这种写法也可以实现页面跟着数据变化除此之外还可以通过改变对象的引用实现页面跟着数据变举例:改变数组除此之外还可以通过数组的变更方法和改变数组的引用实现页面跟着数据变...原创 2020-10-15 16:35:47 · 1151 阅读 · 0 评论 -
Vue基础-列表渲染
列表渲染一、v-for二、方法三、举例一、v-for二、方法当我们想要修改数组里面的内容的时候,不能直接通过下标的形式改变数组,但是通过vue提供的方法来操作数组能实现数据发生变化页面也跟着变这种效果pop:删除数组最后一项push:在数组最后添加一项shift:删除数组最后一项unshift:删除数组最后一项splice:删除数组最后一项sort:删除数组最后一项reserve:删除数组最后一项三、举例push方法可以给数组添加数据并在页面显示但如果直接通过数组下标的形式添加原创 2020-10-15 15:17:30 · 372 阅读 · 0 评论 -
vue-amap的使用
vue-amap的使用一、效果图二、安装三、使用一、效果图二、安装第一步:安装npm install vue-amap --save第二步:入口main.js文件配置import VueAMap from "vue-amap";Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: "95fa72137f4263f8e64ae01f766ad09c", plugin: [ "AMap.Autocomplete", "AMap原创 2020-10-14 16:47:36 · 7112 阅读 · 4 评论 -
Vue基础-条件渲染
条件渲染一、v-if二、v-show三、v-if和v-show的区别四、用key管理可复用的元素一、v-if真正的条件渲染,确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建,但他是有惰性的如果初始渲染条件为假,则什么都不做直到第一次条件为真才开始渲染条件块.v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。类似于 v-else,v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。二、v-show不管原创 2020-10-10 17:26:49 · 1772 阅读 · 1 评论 -
echarts-图表随着窗口大小自适应
一、图表大小没有随窗口大小自适应比如放大窗口重新刷新前会出现多余的空白缩小窗口图表超出范围二、手动调用resize官方文档介绍为了实现图表随着窗口大小自适应原创 2020-10-10 14:22:34 · 781 阅读 · 0 评论 -
echarts-坐标轴名称过长省略,鼠标移入显示全部
坐标轴名称过长省略,鼠标移入显示全部一、效果图一、效果图原创 2020-10-10 10:23:30 · 2252 阅读 · 0 评论 -
Vue基础-样式绑定
样式绑定一、样式绑定二、代码一、样式绑定希望数据改变样式也跟着改变方法一:class的对象绑定方法二:class的数组绑定方法三:内联样式(内联也可以通过对象和数组两种方式定义)对象定义数组定义,样式由数组里的对象决定二、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>样式绑定</title> <script src=原创 2020-10-06 23:04:07 · 109 阅读 · 0 评论 -
Vue基础-计算属性的getter和Setter
计算属性的getter和Setter一、getter和setter二、代码一、getter和setter当我们取计算属性值的时候会执行get方法,设置的时候会执行set方法二、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算属性的getter和Setter</title> <script src="./vue.js"><原创 2020-10-06 21:26:17 · 1156 阅读 · 0 评论 -
Vue基础-计算属性,方法,侦听器
计算属性,方法,侦听器一、计算属性一、计算属性什么情况下要使用计算属性呢如上图为了展示想要的数据,插值表达式写的太长了,为了把要展示的数据提前处理好让插值表达式变简洁,这个时候就要使用计算属性了计算属性有个特点,它是内置缓存的...原创 2020-10-06 15:25:27 · 160 阅读 · 1 评论 -
Vue基础-模板语法
模板语法一、插值表达式{{}}二、v-text三、v-html四、小节五、v-bind六、v-on一、插值表达式{{}}二、v-text三、v-html四、小节凡是v-什么的指令后面都是跟的js表达式,指令后面除了可以放一些变量还可以加一些字符串,因为整体还是js表达式目前看来{{}},v-text,v-html三种写法展示的效果一样,但实际有所区别显而易见v-html样式起作用了,其他两个并没有五、v-bind六、v-on<!DOCTYPE html><h原创 2020-10-06 15:24:12 · 74 阅读 · 0 评论 -
Vue基础-生命周期
Vue实例一、生命周期图示二、详解三、代码一、生命周期图示二、详解三、代码原创 2020-10-04 10:20:45 · 85 阅读 · 0 评论 -
Vue基础-实例
Vue实例一、简单的二、代码一、简单的组件在注册前使用报错这样就没错了在控制台可以打印出我们的vue实例和他的属性方法,已$开头的东西指的都是vue的实例属性或实例方法二、代码<html><head> <meta charset="utf-8"> <title>vue实例</title> <script src="./vue.js"></script><!-- 引入下载的vue.js库原创 2020-09-29 16:29:08 · 127 阅读 · 0 评论 -
Vue-起步(5)
Vue-起步(5)一、简单的组件间传值二·、代码一、简单的组件间传值上一节学习了父组件向子组件传值,这一节学习子组件向父组件传值,实现点击文字删除对应文字点击文字“想”,这个字就被删除掉了二·、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>TodoList</title> <script src="./vue.js">原创 2020-09-27 22:01:31 · 113 阅读 · 0 评论 -
Vue-起步(4)
Vue-起步(3)一、组件化的理解二、使用组件一、组件化的理解女孩子版:女孩子出门需要选择衣服,鞋子,包包…而这些衣服鞋子什么的可以看作组件,女孩子出门可能要耗时很久也很麻烦,但可以把出门拆分成选择衣服鞋子这一系列的小事情,维护起来也比较简单,比如今天的去爬山不适合高跟鞋,那么只需要重新选择一双鞋子就可以了(如果你们女朋友和你说她换双鞋就可以出门了就代表你可以去洗漱了,如果说她还没想好穿什么衣服鞋子花什么妆那么你还可以去打几把游戏)男孩子版:做一个项目很难吧,要实现很多功能吧,要加很多班吧,加班要点外原创 2020-09-27 20:44:52 · 130 阅读 · 0 评论 -
Vue-起步(3)
Vue-起步(3)一、传统设计模式-MVP二、MVVM设计模式一、传统设计模式-MVPmodel层:也就是我们说的数据层presenter层:呈现层或者和业务逻辑相关的控制层view层:视图层一般指页面上的dom展示二、MVVM设计模式在写vue代码的时候一直都在操作数据,而数据就是M层,写的模板标签就是V层,而数据变化页面就会跟着变化这个操作是VM层实现的,vue就是一个VM层VM层:他可以监听到数据变了帮我们改变视图层,也可以监听到视图层有事件触发调用相应的逻辑代码,通过这些代码我们原创 2020-09-16 22:15:24 · 68 阅读 · 0 评论 -
Vue-起步(2)
Vue-起步(2)一、TodoList二、新知识三、实现TodoList四、代码一、TodoListToDoList 帮你把要做的事情列出来,一项一项,类似思维导图。(百度解释)二、新知识v-for使用举例:v-for=“item in list”解释:将数组list(名字随便取)的每一项循环输出,每一项的名称是item(名字随便取)使用前提:list要定义在vue实例的data里面效果图:v-on使用举例:v-on:click=“handleBtnClick”解释:绑定一个事件,原创 2020-09-16 18:56:46 · 117 阅读 · 0 评论 -
Vue-起步(1)
Vue-起步(1)一、优点二、安装三、初体验一、优点中文文档完善,代码轻量,上手简单二、安装不支持IE8及以下版本,打开vue官方文档,下载开发版本三、初体验首先用传统的js实现在页面显示hello world,两秒后hello world被替换成happy的效果,然后用vue来实现<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hello wo原创 2020-09-16 15:12:36 · 72 阅读 · 0 评论