Vue2.0敏捷学习####
记录 | |
---|---|
主线资料 | Vue2.0简单文档, vue2.0官方文档 |
vue版本 | 2.0 引自cdn.bootcss.com/vue/2.1.3/vue.js |
学习始于 | 2016年12月1日 |
摘要####
在以前的项目中,主要使用各类UI框架配合jquery进行敏捷开发。经过几个项目下来,有感这样的开发模式虽然能快速出成品,但经过多次产品的迭代,代码就会变得十分凌乱,不易维护,经过考虑后,选用Vue这类框架重构现有项目。
在前端工作的半年内,由于项目的需要,学习并使用过各类框架,深感要快速学习并运用到一项技术,最重要的不是找到最好的学习资料,而是尽快找到自己能用得上、能理解的资料,帮助自己度过从0到1这个阶段。所以我使用了【主线资料】中的两个文档作为入门材料。
学习摘要####
Vue.js设计逻辑:**数据驱动视图 **
获得vue.js文件后,通过新建vue实例,指定实例注入的节点#app
,实例中所有数据及事件均在这个元素的范围内。button
不在定义的#app
范围内所以事件不生效。【点我看实例】
指令:使用{{foo}}
插入纯文本数据,使用v-
开头的指令绑定数据或事件。【点我看实例】
-
v-foo
表示动作,如v-if
表切换,v-for
表循环,v-model
表绑定等 -
v-bind:foo=voo
表示属性绑定,foo与voo值绑定 -
v-on:foo=voo
表示事件绑定,foo发生时触发voo
vm对象:var vm = new Vue({foo})
,{foo}
作为参数构建vue实例vm,通过vue内部操作,使得data中的值,methods中的事件依附在实例vm上,并且事件中的this指向vm。
--<small>2016年12月2日00:21:34</small>--