之所以选择vuejs，除了vuejs比较轻量外，同时还有vuejs的语法结构，非常简单，明了，很容易学习。
vuejs主要负责数据渲染的部分，和一些事件，在项目中还可以完美插入Jepto框架。
vuejs 2.0版本
公司开发项目为公众号商城。用vue来写数据渲染方面和开发公共组件十分方便。
使用npm安装： npm install vue
当然你也可以在github上clone最新的版本并作为单文件引入，或者使用CDN:
[v-cloak] { display: none }
Vue的一些基本用法，这里可以参考文档 http://www.open- open.com/lib/view/open1447060624960.html

数据渲染：
v-bind -----用来绑定元素属性的。在vue里面，元素的属性绑定，要用v-bind.
<a v-bind:src="item.src"></a>
v-for ------ 从官方文档里面已经了解，它可以把数组或json循环把数据渲染到页面。同时v-for还可以用filter来进行筛选。
<tr v-for="item in books ">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.author}}</td>
<td>{{item.price}}</td>
</tr>
v-for 还可以得到渲染元素的Index：
<tr v-for = "(item,index) in book">
同时在vue里面 {{item.split("")}}也是可以的，可以在{{}}里面对数据进行js操作。
v-if ------ 判断元素是否渲染到页面上 值为true or false
v-show -----判断元素是否显示到页面上 值为true or false
v-if 和 v-show 可以在里面进行数据操作的判断：
<a v-if="item.num+1>3"></a>
v-model
v-model可用于一些表单元素,常见的input,checkbox,radio,select
v-model="selected"
筛选：
{{item|filter}}其中filter可以是vue自带的筛选器，也可以用户自定义筛选器，如：
Vue.filter("goZero",function(value){
return 0;
})
{{item|goZero}} 就是在页面显示出“0”.
注意：filter只能在{{}}里面用 ，v-bind 绑定属性里面不能用，不过可以用折中的方法
在v-bind里面可以写一个函数：
<a v-bind:src="goZero(item)"></a>
然后在Vue的methods方法里面写到：
goZero:function(value){
retrun 0;
}
这样就可以实现在属性里面进行筛选.....

显示bug：
如果你比较细心的话，在数据还未加载完时是会有闪烁的情况出现，解决方法也很简单，使用v-cloak,然后定义css:
[v-cloak] { display: none }

v-on指令(vue事件)：
v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：
<a v-on:click="do">
var vm = new Vue({  
el: '#app',  
data: {  
ms: 'Vue.js!'  
},  
// 在 `methods` 对象中定义方法  
methods: {  
go: function() {  
alert(this.ms)  
},  
}  
})
这就是一个点击事件。
同时里面可以带参数。<a v-on:click="do(ms,$event)">
var vm = new Vue({  
el: '#app',  
data: {  
ms: 'Vue.js!'  
},  
// 在 `methods` 对象中定义方法  
methods: {  
go: function(temp,e) {  
alert(temp);  
},  
}  
})
其中ms是在js中或者Vue中定义的变量，e是这个元素 是原生JS的event;Vue里面需要在参数里面加$event；

其中事件还有一些用法，例：
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

v-bind和v-on的缩写：
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。
v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。
<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--缩写语法--
><a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--完整语法--><button v-on:click="greet">Greet</button>
<!--缩写语法--><button @click="greet">Greet</button>

Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

操作系统大会&openEuler Summit 2024参会指南，请查收！

avatar 开放原子开发者工作坊

推动工业软件核心技术攻关，开源工业软件算法集成大赛正式启动！

推动工业软件核心技术攻关，开源工业软件算法集成大赛正式启动！

avatar 开放原子开发者工作坊

第二届openEuler生态大会（中国·湖南）成功举办

10月30日，第二届openEuler生态大会（中国·湖南）成功举办。

avatar 开放原子开发者工作坊