vue
关注
分享
扫一扫
努力_才幸福
前端小菜鸟一枚，正在努力的重生
展开
-
Vue中v-for指令中的key遇到的问题
v-for 给了两个参数key和index，但是这里需要对遍历的数据区别对待。遍历的数据包括数组和对象，但是在数组下是没有key值的，而在对象下可以得到key，可以显示出来<div id="app"> <ul> <li v-for="(item,index,key) of list">{{item.n}} ...原创 2018-05-17 10:00:54 · 10202 阅读 · 0 评论 -
Vue中transition单个节点的过渡与transition-group列表过渡
transition 只能满足单个节点的过渡效果，在多个节点的渲染上显得力不从心为了更好适用于更多的场景，vue 提供 <transition-ground>来多个元素的过渡首先创建了一个简单的应用，通过button 来实现动态的加减，使用了啊你，实际效果可运行一下代码[html] view plain copy<body> <div id="app...原创 2018-06-11 14:53:57 · 12334 阅读 · 0 评论 -
Vue中解决多个组件引用了同一个对象作为数据时，当一个组件改动了数据对象时，其他对象的数据也会随着同步改动的情况
当组件间传递对象时，由于此对象的引用类型指向的都是一个地址（除了基本类型跟null,对象之间的赋值，只是将地址指向同一个，而不是真正意义上的拷贝），所以会导致下面的问题：var obj = {a:10};var obj2 = obj;obj2.a = 20; // obj2.a改变了，alert(obj.a); // 20，obj的a跟着改变如果需要这种双向数据绑定的话，那么是最好的，但是如果不需...原创 2018-05-24 09:59:13 · 17767 阅读 · 2 评论 -
Vue中的生命周期
https://segmentfault.com/a/1190000011381906 vue里的生命周期是什么？vue实例从创建到销毁的过程称之为vue的生命周期vue的生命周期各阶段都做了什么？beforeCreate 实例创建前：这个阶段实例的data、methods是读不到的created 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和...原创 2018-06-05 16:47:41 · 5311 阅读 · 0 评论 -
Vue安装时报错Failed to download repo vuejs-templates/webpack-simple: connect ETIMEDOUT 192.30.253.113:443
http://www.cnblogs.com/taiyanghua0522/p/6043942.html原因是因为github的问题1.打开终端（cmd），输入命令：ping 192.30.253.112 发现连接超时；输入命令：ping github.com 显示超时。2.打开 hosts文件，地址：C:\Windows\System32\drivers\etc 看是否是默认配置。默认配置如下...转载 2018-06-05 17:24:41 · 71594 阅读 · 5 评论 -
Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
场景：父组件发生数据变化，动态的传递给子组件，子组件实时刷新视图解决方法：需要在子组件watch中（监听）父组件数据的变化在子组件中使用watch应该注意的问题：1.watch监听普通类型的数据：data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, old...原创 2018-05-30 14:54:39 · 18751 阅读 · 2 评论 -
Vue中ref属性
利用ref属性，可以获取到DOM元素或者是子组件，从而可以调用子组件方法1.当ref属性直接定义在dom元素上，则通过this.$ref.name可以直接获取到dom，对dom直接进行操作；1<div class="foods-wrapper" ref="foods-wrapper">注意：ref的属性命名不能用驼峰（即不能中间为大写字母）let menuList=this.$refs...原创 2018-05-30 15:48:42 · 2950 阅读 · 0 评论 -
Vue中单独的文件报错Unexpected token import
这是因为浏览器不支持import，使用babel将es6转化为es5原创 2018-06-21 10:43:23 · 9100 阅读 · 0 评论 -
Vue中.native给组件绑定原生事件
https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model原创 2018-06-08 16:28:40 · 1798 阅读 · 0 评论 -
使用vue中的axios后，对实例中的data进行赋值的问题
总结一下我遇到的一个纠结很久的问题。在项目中需要用到后台的数据对前端渲染，使用到了vue整合的axios，使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data（）中定义的属性：执行后前端报错：原因：在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined。解决方案：...原创 2018-07-24 17:11:31 · 9286 阅读 · 1 评论 -
vue中子组件改变父组件数据的两种方法
方法一：这个方法不用在父组件那里写自定义事件，对于处理一些小数据简单易用<body> <div id="app"> <child :mag.sync='msg'></child> msg:{{msg}} </div></body><script&原创 2018-07-19 14:05:33 · 3512 阅读 · 0 评论 -
Vue中利用v-model实现父子组件间的双向通信
https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model我们常在input上使用双向数据绑定，实现更新view的时候，model的数据也自动被更新了，model更新的时候，view也自动更新。如果我们在自定义组件中使用v-model，来实现实例和组件间的双向数据绑定。v-model的绑定原理：v-model的语法糖：...原创 2018-06-11 14:51:28 · 4508 阅读 · 0 评论 -
Vue中computed，methods，watch的区别
1.computed：是在HTML DOM加载后马上执行的，如赋值；2.methods：必须要有一定的触发条件才可以被执行，如点击事件；3.watch：用于观察Vue实例上数据的变动，对应一个对象，他们的执行顺序为： 默认加载的时候先computed，再watch，不执行mothods。在触发某一事件之后，则是先methods再watch...转载 2018-05-23 20:13:56 · 191 阅读 · 0 评论 -
Vue中$emit的用法
1.父组件可以使用props把数据传给子组件；2.子组件可以使用$emit触发父组件的自定义事件；vm.$emit(event,arg);//触发当前实例上的事件；vm.$on(event,fn);//监听event事件后运行fn；...原创 2018-06-04 14:07:46 · 5039 阅读 · 0 评论 -
vue中动态控制btn的disabled属性
场景：当ajax请求回来的数据为空时，btn为disabled的状态，否则，btn的disabled属性为false代码：<button class="iconDivIcon targetBtn" :class="isdisabled?btndisabled:''" style="width:100px;" @click="changeEnables(0)" :disabled="isdi...原创 2018-05-17 10:16:44 · 79111 阅读 · 4 评论 -
vue中v-bind使用三目运算符绑定class
通过动态的切换isOk就可以达到切换class的效果，isOk可以为一个表达式如num>1,如果data中num大于1，则显示classA，否则显示classB原创 2018-05-17 10:24:07 · 54997 阅读 · 0 评论 -
vue中排序
包括数组和对象的排序：html:js:原创 2018-05-17 12:13:55 · 5009 阅读 · 1 评论 -
v-if和v-show的区别
v-if：判断是否加载，减轻服务器的压力，在需要时加载；v-show：调整css 的display属性，可以使客户操作更加流畅原创 2018-05-17 12:18:32 · 498 阅读 · 0 评论 -
Vue.set全局操作
Vue.set的作用就是在构造器的外部操作构造器内部的数据，属性和方法。其他知识点：vue可以在外部声明数据，然后赋值给构造器； 在构造器外部声明一个方法，有三种方法可以改变构造器中的数值...原创 2018-05-17 13:40:41 · 418 阅读 · 0 评论 -
解决Vue.js在火狐浏览器中报错“event is not defined”的问题
html中：<input class="targetlist-check" type="radio" :checked="targetItem==item?'checked':null" @click="selectItem(item,$event)" />js中：selectItem(item,e){ var event=window.event||e; var ...原创 2018-05-07 16:44:53 · 2693 阅读 · 0 评论 -
Vue在同一组件中，methods中的一个方法调用methods中的另一个方法
123456789101112131415161718new Vue({ el: '#app', data: { test:111, }, methods: { test1:function(){ alert(this.test) }, test2:function(){ alert("this is test2") alert(this.test3) /...转载 2018-05-14 11:49:03 · 7669 阅读 · 5 评论 -
Vue中实例
实例就是在构造器外部操作构造器内部的属性选项和方法，就叫做实例，实例的作用就是给原生的或者其他的JavaScript框架一个融合的接口或者说是机会，让Vue和其他框架一起使用。实例事件就是在构造器外部写一个调用构造器内部的方法，作用是在构造器外部调用构造器内部的数据。1.通过$on在构造器的外部添加事件234app.$on('reduce',function(){ console.log('...原创 2018-05-14 18:26:42 · 660 阅读 · 0 评论 -
Vue中的一些基本指令
computed是在输出data之前，对data进行的一种改造，主要是不污染原始数据v-text就相当于在标签上将值已经绑定成功了，在显示出来，如果绑定不成功，也不显示这一块，也就是与{{}}的区别，{{}}在加载不出来时显示{{}},如果内容为标签时，则会把标签当成字符串渲染出来，而不会解析标签，所以使用v-html代替，但是v-html容易导致黑客攻击，所以只有在确保页面安全性的情况下，才能使...原创 2018-05-15 21:44:52 · 951 阅读 · 0 评论 -
构造器中的选项
propData选项computed选项，methods选项：$event相当于原生的MouseEvent,是一个对象，包括了按钮点击时鼠标一系列的东西，主要用于交互很强的情况下 组件中调用构造器中的原始方法：<btn @click.native=""></btn> 在构造器外部调用构造器中的方法：直接使用构造器对象app.add(2)watch选项:用来监控数据...原创 2018-05-15 21:53:57 · 155 阅读 · 0 评论 -
vue中一个标签中含有多个class，其中class有中包含三元表达式的写法
1.数组形式：<div :class='["classA",data=="0"?"classB":""]'>aaaaa</div>注意：数组中的classA如果不加双引号的话，代表的是data中的一员，并不是类名，将classA加上双引号，变成字符串，就可以变成类名啦2.字符串拼接<div :class="'classA'+(data=='0'?'...原创 2019-09-09 10:16:08 · 2454 阅读 · 0 评论