说一下vue.js在新项目中的使用。
原有的项目结构 require.js jquery.js.
这次引入了在新的模块中引入了vue.js
main.js中变成了多了一行'vue': 'libs/vue.min.js'
在新的页面对应的模块中，like index.js
define(['pop','vue','base','views/Treasure/component/loadingComponent','vuelazyload','swiper'],
function(pop,Vue,config,loading,vuelazyload){
....
})
每个页面对应一个vue实例
var index = new Vue({
el: '#index',
data:{
},
methods:{
}
})
vue.js的api和教程在官网https://vuejs.org.cn/ ，已经写的很详细了，这里简单说一下
data为参数
data:{
number: 1,
dom: '<div></div>',
arr: [1,2,3,4]
}
顺带说一下v-text,v-html,v-for
vue.js可以将数据直接渲染在dom上，避免了拼字符串
老的方式：
var html = [];
html.push('<div>',
</div>
);
$('div').html(html.join(''))
vue.js渲染的方式
<li v-for='(index,item) in arr' v-text='item'>
输出结果
<li >1</li>
<li >2</li>
<li >3</li>
<li >4</li>
写交互当然要考虑事件的绑定
以绑定添加购物车方法为参考
//dom
//item是指定的某个商品对象,他的结构可能是这样的{id: 123,name:'哇哈哈',stock:500,price:999}，具体结构由你们的业务定
<li v-for='(index,item) in arr' v-text='item' v-on:click="addcar(item)">
//对应的vue实例
methods:{
addcar: function(item){
//购物车在多个页面使用，我直接抽象封装成了一个公共方法
config.addCar(item,1)
}
}
这里参照文档 我用v-on:click绑定对应的事件，将对象直接传入
vue.js的引入优化了代码结构，不用再消耗大量的时间在拼dom上边，代码结构更加清晰，更易于维护。
使用时遇到进入页面,ajax抓取接口内容从而渲染页面的问题，这时的ajax可以写在生命周期的created/ready里
new Vue({
created: function(){
var _this = this;
$.ajax({
}.done(function(data){
_this.data = data;
}))
},
data:{
data:''
}
})
