1. props单向绑定vue中的props是单向绑定的,父组件的属性变化时会传递给子组件,子组件内部不应改变props的值,否则控制台会给出警告。但如果props的类型为数组或者对象时,在子组件内部改变props的值控制台不会警告。因为数组或对象是地址引用,vue不会检测到props发生改变。所以有的情况需要在子组件内部改变父组件的值,可以将属性定义为数组或者对象类型传入。但官方不建议在子组件内改变父组件的值,因为这违反了vue中props单...
项目首页如上图所示:先说说我的想法吧,此页面共包含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,从上级页面进入下一级页面时,能够加载相应数据;回到上一级时,数据有更新。举个栗子,从故事页点击“编辑”按钮,进入故事编辑页则默认填充点击的“编辑”按钮所对应的故事数据;而当在故事编辑页更新数据,返回到故事页时,刚刚更新的信息也能在故事页展示。对于这项需求...