项目首页如上图所示：先说说我的想法吧，此页面共包含title，tabs（选项栏），materchart（仪表盘），loading（等待加载提示），btns（按钮）四个组件，1、表盘组件所用到的数据由首页以属性的方式传递，因为数据从服务器端是异步获取，因此直接写入请求数据会出错，因为在页面渲染时异步请求未完成，所以此处加入了loading模块，在请求的过程中显示loading状态，等待请求完毕时更改v-if的值，来达到异步显示图表的目的。这里先简单...
原文地址：http://www.cnblogs.com/xueweijie/p/6907676.html <div id="app"><input type="text" ref="input1"/><button @click="add">添加</button>
</div><script>
new Vue({el: "#app",methods:{add:function(){this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗}}
})
</script>一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。但是用ref绑定之...
一、监听数组 1.watch能监听到数组的push的改变,例如data () {return {demo: [1,2]}
}, mounted (){ window.myVue = this },watch: {demo(val){console.log(val)}
},myVue.demo.push(3) //[1,2,3] 2.watch 不能检测以下变动的数组：当你利用索引直接设置一个项时，例如：myVue.demo[1] = 5当你修改数组的长度时，例如：myVue.demo.length = 2 这时候你可以删除原有键，再 $set 一个新的，这样就可以触发watchmy...
依赖 vue-router获得当前字符串，对应当前路由的路径，总是解析为绝对路径。 computed: {productIcon () {return this.imgMap[this.$route.path]}}
跳转到指定页面 使用router - link to:"/orderList" 可以，注意带/是定位到了根元素this.$router.push({path: ‘/orderList‘})
原文：http://www.cnblogs.com/waitforyou/p/6790216.html
vuejs项目不支持IE8及以下版本一、项目搭建cnpm install --global vue-clivue init webpack my-projectcd my-project cnpm installnpm run dev二、vuejs过渡1）css过渡 <transition name="xxx"> //xxx过渡组件的名字 <p v-if="show">hello</p> //要过渡的组件或者元素，包裹在transition标签里</transition>.xxx-enter-active,.xxx-leave-active{transition: opacity 0.5s}.xxx-enter,.xxx-leave-to{opacity: 0} 2）css动画<d...
1.click.stop阻止点击事件继续传播<button @click.stop="dothis">阻止单击事件继续传播</button>2.@input监听input输入事件 <input :type="type" :value="value" :placeholder="placeholder" :name="name" @input="$emit(‘input‘,$event.target.value)" />3.$event.target.value获取当前文本框的值<input :value=var @input="$emit(‘updata:val‘,$event.target.value)"4.在git上添...
组件传值包括父子组件传值和其他组件传值（其他组件包括父子组件，兄弟组件，子孙组件，旁系组件等等），主要有以下方法props总线 eventbusvuex自定义事件关系情况$parent$children$root$refsprovide/inject非 prop 特性$attrs$listener 原文：https://www.cnblogs.com/lgnblog/p/14709312.html
1.框架和库的区别： 框架：framework 有着自己的语法特点、都有对应的各个模块库 library 专注于一点框架的好处：1.提到代码的质量，开发速度
2.提高代码的复用率
3.降低模块之间的耦合度
（高内聚低耦合）UI：user interfaceGUI : graphical user interfaceCLI : command line interfaceAPI : application interface思维模式的转换：从操作DOM的思维模式 切换到 以数据为主2.Vue概述 1、what 是一个渐进式的构建用户界面的js框...
最近有很长时间没有更新博客了，换了公司，全部的心思都放在项目上了。通过这次项目的上线，让我感受最深的是前后端分离后，前端页面的模块化管理，以及前端页面的数据邦定。在接触vue.js之前，我之前端要用到的dom结构，都是通过拼接字符串的方式进行输出的。这种方式最大的痛点是拼接很麻烦，也不是很直观，几乎无法复用，和数据紧密的偶合在一起，维护不方便，太多太多的问题。在同事的推荐下，开始接触vue.js这个开源项目。如果...
问题描述在使用 v-for repeat 组件时控制台会出现警告：解决方法在组件标签上使用 v-for ：加 :key使用 template 标签包裹该组件，再在 template 标签 上使用 v-for。趟坑总结问题描述在 Vue data 属性中定义的变量名如果以 “_” 开头，就不能正确的赋值和渲染问题原因https://github.com/vuejs/vue/issues/2098解决方法变量名不要以 “_” 开头趟坑总结问题描述在我们的前端组件库 dao-option 组件中 中使用 :key 时，如果 v-for...
最近在vue项目中使用了swiper插件来完成轮播功能，没有开启循环模式，一切都很顺利具体怎么在vue项目中引入swiper插件，这个太简单就不提了，上代码html<div class="swiper-container"><div class="swiper-wrapper"><template v-if=‘banner.length > 0‘><div class="swiper-slide" v-for="x in banner" @click="openSeries(x)"><img :src="func(x)" alt=""></div></template></div><div class="swiper-pagination"></div></div>s...
1.页面高度=总高度-上方导航栏等高度：height:calc(100vh - 150px) 注意！！！！等号两边必须有空格！！！2.给div设置滚动条，两栏布局左侧固定，右侧滚动：将父元素设置固定高度，左侧子元素同样固定高度，右侧设置height：100%。此时长度超过父元素将会出现滚动条，可以设置overflow：auto。隐藏横向滚动条overflow-x:hidden3.elementUI表格设置height属性可以根据高度调整滚动条，非常方便。注意：在标签里设置height属性，而不...
响应式Object.definePropertyObject.defineProperty(obj, prop, descriptor) // 对象、属性、描述符Object.defineProperty是es5新加的给对象属性设置描述符的方法,可以用来监听属性值的变化 var obj ={};var _name =‘张三‘Object.defineProperty(obj,‘name‘,{get:function () {return _name;},set:function (value) {_name=value;}})调用方式:obj.name ="里斯";
alert(obj.name);
模拟Vue响应式 var vm= {};var data= {items:...
之前开发了一个单页面应用，按照深度，分为三层：目录页、一级子页（标签页、故事页等）、二级子页（故事编辑页）。
这三类页面都共享一个完整的数据model，从上级页面进入下一级页面时，能够加载相应数据；回到上一级时，数据有更新。举个栗子，从故事页点击“编辑”按钮，进入故事编辑页则默认填充点击的“编辑”按钮所对应的故事数据；而当在故事编辑页更新数据，返回到故事页时，刚刚更新的信息也能在故事页展示。对于这项需求...
我们先从 Nginx 说起，了解为什么需要微服务。最初的服务化解决方案是给相同服务提供一个统一的域名，然后服务调用者向这个域发送 HTTP 请求，由 Nginx 负责请求的分发和跳转。
这种架构存在很多问题：Nginx 作为中间层，在配置文件中耦合了服务调用的逻辑，这削弱了微服务的完整性，也使得 Nginx 在一定程度上变成了一个重量级的 ESB。图中标识出了 Nginx 的转发信息流走向。 服务的信息分散在各个系统，无法统一管理和维护。每一...
本篇文章给大家带来的内容是关于vue中v-if和v-show有何区别？v-if与v-show之间的区别总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。