我对vue.js在项目中的使用

说一下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: '
',
   arr: [1,2,3,4]
}

顺带说一下v-text,v-html,v-for
vue.js可以将数据直接渲染在dom上，避免了拼字符串
老的方式：

var html = [];
html.push('
',
                
);
$('div').html(html.join(''))

vue.js渲染的方式

输出结果

1
2
3
4

写交互当然要考虑事件的绑定
以绑定添加购物车方法为参考

//dom
 //item是指定的某个商品对象,他的结构可能是这样的{id: 123,name:'哇哈哈',stock:500,price:999}，具体结构由你们的业务定

//对应的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:''
    }
})