![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
chiuwingyan
掘金:https://juejin.im/user/5b0919e151882538b1096f08
展开
-
vue的nextTick()
https://segmentfault.com/a/1190000008570874转载 2017-10-23 11:02:43 · 324 阅读 · 0 评论 -
vue事件绑定和表单
1、v-on:click=“additem”写在methods里面,用this定义全局获取data里的数据,this.list,可以简写为@click=“additem”有一个stop的修改器,可以阻止事件冒泡2、v-on:keydown.enter=“additem”按下enter的时候触发事件3、自定义事件子组件:@click="myevent"data:{原创 2017-08-25 21:17:41 · 735 阅读 · 0 评论 -
vue 列表渲染双向绑定
{{item.name}}-{{item.age}}-{{index}} additem //import componenta from './components/a'export default { /*components :{ componenta: componenta },*/data(){return{原创 2017-08-24 21:20:02 · 938 阅读 · 0 评论 -
vue组件遍历结果
app.vue import componenta from './components/a'export default { components :{ componenta: componenta },data(){return{ hello: 'world', obj:{ n原创 2017-08-24 16:50:30 · 1947 阅读 · 0 评论 -
vue.js render
new Vue({ el: '#app', render: h => h(App ) })/render 是vue里面实现渲染dom的函数,这句的目的是渲染这个app实例。 //用App这个模板。相当于compoments:{App},使用app这个组件render函数是渲染一个视图,然后提供给el挂载,如果你没有加原创 2017-08-24 10:40:32 · 336 阅读 · 0 评论 -
Vue的Class 与 Style 绑定
如果想冬天改变class的样式,一般有以下几种写法1、对象语法 0}">这样表示当totalCount>0时,highlight这个样式有效绑定多个class:<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">//和如下 data:data: {原创 2017-12-16 22:43:24 · 338 阅读 · 0 评论 -
vue饿了么webapp之购物车与商品列表同步
所谓的同步,是指我在通过改变购物车里里面的商品数量时,原有的商品列表也跟着同步了,这一点让我很疑惑。代码如下:shopcart.vueselectFoods(){ let foods=[]; this.goods.forEach((good) => { good.foods.forEach((food) => { if(food原创 2017-12-31 14:51:11 · 1691 阅读 · 2 评论 -
vue-router 2.0 常用基础知识点之router.push()
http://blog.csdn.net/sinat_17775997/article/details/68941091转载 2017-12-29 15:02:18 · 204 阅读 · 0 评论 -
vue饿了么webapp之vue.set用法
如果想动态给对象添加属性,可以使用vue.set的方法先引入全局的vue,然后给this.food添加count的属性,值是1 import Vue from 'vue';props: { food: { type: Object } },Vue.set(this.food, 'count', 1);Vue.set( target, k原创 2017-12-17 16:12:53 · 901 阅读 · 0 评论 -
vue获取当前激活路由
一个 route object(路由信息对象) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录)。route object 是 immutable(不可变) 的,每次成功的导航后都会产生一个新的对象。route object 出现在多个地方:在组件内,即 this.$route在 $ro原创 2018-01-20 19:33:32 · 8854 阅读 · 0 评论 -
最详细的Vuex教程
http://blog.csdn.net/h5_queenstyle12/article/details/75386359转载 2018-03-01 14:14:05 · 183 阅读 · 0 评论 -
vue element-ui的$notify注意点
我的初衷是把element-ui的$notify通知封装成一个组件,登录成功后调用获取低库存接口,如果获取接口的列表当中库存大于0,则显示这个通知,并且在文本当中提供点击事件。因此,首先想到的就是使用dangerouslyUseHTMLString属性,可以插入html字符串export default { methods: { open12() { this....原创 2018-02-22 15:40:58 · 43241 阅读 · 8 评论 -
vue饿了么webapp之router-view传值(深坑!!)(evenBus的使用)
首先,想要在app.vue组件里面请求获取到商品的信息seller,想把seller通过router-view传递给当前router-view所显示的组件good.vue,在good里面使用seller,别人也是这样子写的,一点问题也没有:App.vuegood.vue然后就报错了。。。vue开发者工具也显示good的props的seller是undefined的然而,我现在还不知道这是为什么,代...原创 2017-12-16 15:01:54 · 9927 阅读 · 3 评论 -
Vue的filters
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><...转载 2018-05-27 16:57:49 · 450 阅读 · 0 评论 -
vue表单事件绑定
1、v-model设置了input的v-model="model",可以在{{model}}自动获取到input输入的值type为radio和checkbox也可以使用,哪一个被勾选了就会显示哪个要在data里给model定义初始值标签也可以使用,选定哪一个就会显示哪一个selection要在data里面定义selection:null2、v-for可以在select的原创 2017-08-25 22:38:56 · 464 阅读 · 0 评论 -
vue计算属性和事件监听
1、computed计算属性会根据其他属性的变化进行同步更新replace方法可以把输入的数字不显示出来,只显示其他类型。和计算属性实现同样的效果,2、属性监听watch熟悉,可以监听绑定的变量的值的变化,上述绑定了myVal的值,第一个参数是新值,第二个是旧值原创 2017-08-25 23:04:15 · 7398 阅读 · 0 评论 -
饿了么webapp之块级盒子垂直相邻margin重叠
效果图:我这里设想四周margin都是一样的值,然后商品之间的分隔线是通过伪元素after添加border-bottom进去的,但是发现实际效果是:这是由于块级元素相邻会造成margin重叠,本来上下都有margin,被重叠只剩下一个margin,具体原因见http://www.cnblogs.com/zhangmingze/articles/4664074.html原创 2017-10-22 23:08:18 · 283 阅读 · 0 评论 -
饿了么webapp之css footer的实现
效果图:如果内容的高度没有屏幕大小这么高,关闭按钮在底部这个位置。如果内容高度超过屏幕大小,会有会有滚动条并且关闭按钮始终位于页面最顶部。实现方法 none .detail position:fixed z-index:100 top: 0原创 2017-10-21 21:22:20 · 829 阅读 · 0 评论 -
饿了么webapp之header的背景
效果图:就是把header的背景图实现以上效果,模糊效果,在遮盖罩下方,图片和商家头像图片一样。我一开始的想法是直接给header设置背景图片,但是图片是商家头像,数据是通过后端获取的,那么css可以使用js的数据吗?网上查了一下,答案是可以的。我们知道CSS里是可以控制某些HTML元素的属性的,譬如background-image等等,而在URL里添加Javascri原创 2017-10-19 13:50:33 · 1673 阅读 · 0 评论 -
饿了么webapp之数据二级访问
效果图:父组件代码:子组件代码:问题在于:子组件获取seller.supports[0]时一定要通过v-if判断有无seller.supports,否则会报错,这是为什么呢?原因在于一开始传过去的seller.supports[0]是并没有这个属性,但是有seller.support和support.name等,因为这些可以说是直接属原创 2017-10-15 17:23:21 · 331 阅读 · 0 评论 -
饿了么webapp之1px边框
效果图:关于像素和DPR:http://www.cnblogs.com/xiaohuochai/p/5494624.html因此,一般而言,移动端的像素是桌面端的两倍,即使css像素设置为1px,但在移动端设备显示是2px。例如以上tab切换栏的下边框,如何解决呢?1.先给tab设置下边框的样式border-1px($color) position: relati原创 2017-10-14 22:34:32 · 680 阅读 · 1 评论 -
vue中的event bus非父子组件通信
http://blog.csdn.net/qq_24122593/article/details/53787504转载 2017-10-13 11:14:48 · 219 阅读 · 0 评论 -
vue中v-model和value的区别
情景【Situation】:编写通用的输入组件时,子组件要绑定到父组件的某个变量上dataA,当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA,而是父组件可以直接this.dataA就可以取到当前子组件最新值。任务【Task】:实现在父组件直接this.dataA就可以取到当前子组件最新值。行动【Action】:转载 2017-10-05 21:48:29 · 27996 阅读 · 0 评论 -
vue中computed和watch区别
http://www.jb51.net/article/120073.htm转载 2017-10-05 21:05:47 · 580 阅读 · 0 评论 -
vuejs组件之slot内容分发实例详解
Slot分发内容①概述:简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责的活。②默认情况下父组件在子组件内套的内容,是不显示的。例如代码: 12345 var vm = new Vue({ el: '#app', compo转载 2017-09-28 23:43:45 · 274 阅读 · 0 评论 -
vue vue-resource
vue-resource可以帮助我们从后台获取数据,像ajax一样1、像vue-router在main.js页面引用使用,就可以在所有的组件中通过this.$http使用get方法,第一个是成功执行的函数,第二个是失败执行的post方法: 使用的是 json-server假后台的方法获取db.json里getList的数据原创 2017-09-07 21:32:50 · 244 阅读 · 0 评论 -
vue插件之vuex
1、vuex流程图当有组件更新时,会触发vuex数据中心,数据中心再将更新的反馈到其他关联的组件,模块间共享状态。图中绿框内是vuex的操作内容2、vuex状态管理(实例)先导入vuex应用级的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。const vuex_store原创 2017-08-31 21:15:56 · 1754 阅读 · 0 评论 -
vue高级功能 过渡和路由
1、过渡通过改变透明度,v-show属性,show是block,transition要配合v-show来使用,name的名字自己定义通过css实现过渡效果在style里面设置样式,.fade-enter和.fade-leave-active代表初始和最终样式原创 2017-08-26 22:38:51 · 577 阅读 · 0 评论 -
深入vue组件
1、组件之间的通信1)父组件向子组件传递信息子组件中,要定义props属性,获取父组件传过来的值,可以接收数组和对象父组件中,在子组件注册的标签里定义要传递的值这样写表示子组件只能接受数字和字符串父组件向子组件传递内容父组件子组件,添加标签向具名slot插入内容:父组件中子组件中原创 2017-08-26 15:44:31 · 203 阅读 · 0 评论 -
Vue-数据响应式系统的实现
前言在我们使用vue的时候,我们知道,如果我们修改vue实例当中data里面的值,那么对应该数据的视图也会很快得到更新,这就是响应式系统。响应式系统,实现原理就是Object.defineProperty(obj, prop, descriptor)。具体讲讲怎么实现,下面只是讲一个简单的例子,实现了依赖的收集和触发。Object.defineProperty(obj, prop, des...原创 2018-07-26 15:36:10 · 370 阅读 · 0 评论