我对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: '<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:''
    }
})

推荐阅读更多精彩内容

  • 要说到于禁这个人物,大家可能都不太陌生,因为在中国古典小说《三国演义》里衍生出了这样一个典故“水淹七军”。而于禁则...
    愚学斋阅读 293评论 0 3
  • 近一段时间以来,人力资源领域有一个词比较热——高潜力人才。很多业内人士抛出这样一个观点——招能力强的人,不如招潜力...
    王荣增阅读 2,395评论 0 4
  • 有时候,“好人”是一个陷阱。他们一旦给你贴上好人的标签,下一步可能就要侵犯你了。 你这么好,一定要帮我哦。 你这么...
    渣小月阅读 240评论 0 0
  • 225 薛宝琴 红楼梦里最惹人喜爱的姑娘来了,首先她长得美,如果非要评红楼梦里第一美人的话,我觉得薛宝琴是完全可以...
    深巷梨花阅读 224评论 0 1
  • 小W一脸恨铁不成钢的看着我:“这就是你住的地方?”我诺诺地腆着脸笑道:“还好啦……” 不好,一点都不好。 生活水平...
    Anicca阅读 119评论 0 2