Vue实践

Aug 13 2016

Vue和一些7788

最近公司的朋友都很疑惑，前端这阵子真的是日新月异，我们还用着jquery，underscore和knockout这些“小玩具”好像步入了中年一样。没办法啊，现在的前端大兴土木搞组件，搞模块化，我们也得跟，不过老项目总有钉子户，不能一口啃下来，所以就出了一个兼容并包的demo。

简单的模板

初始化这些到处可以搜到的东西就不重复写了。
直接上手写组件。

Vue.component('section1',{
  template:'<section><h2>{{title}}</h2><div>{{message}}</div></section>',
  data:function(){
    return {
      title:'示例1：独立组件',
      message:'data必须是function'
    }
  }
});

循环模板

<ul class="card_frame">
    <li
      is="card-item"
      v-for="(card, index) in cards"
      v-bind:title="card.text"
    >
    </li>
</ul>

Vue.component('card-item',{
  template:'<li>{{title}}</li>',
  props:['title']
});
//初始化data
var app =  new Vue({
    el: '#app',
    data: {
      title:"Vue Demo",
      message:"Vue常用功能示例",
      cards:[
        {text:'card1'},
        {text:'card2'},
        {text:'card3'}
      ],
...

事件绑定模板

<ul class="card_frame">
    <li
      is="card-item2"
      v-for="(card, index) in cards"
      v-bind:title="card.text"
      
    ></li>
</ul>

Vue.component('card-item2',{
  template:'<li v-on:click="hideText($event)">{{title}}</li>',
  props:['title'],
  methods:{
    hideText:function(e){
      e.target.style.display = "none";
    }
  }
});

引用外部插件

<script src="js/jquery.dragsort-0.5.1.js"></script>

mounted:function(){
  console.log("组件挂载后，目标li的数量为："+$("#list1 li").length);
  $("#list1, #list2").dragsort({ dragSelector: "li", dragBetween: true, dragEnd: saveOrder  });

    function saveOrder() {
      console.log("调用拖动事件后，目标li的数量为："+$("#list1 li").length);
    };
}

Ajax请求

<section5 v-bind:weather="ajaxData"></section5>

Vue.component('section5',{
  template:'<section><h2>{{title}}</h2><div>{{message}}</div><div>当前天气：{{weather}}</div></section>',
  data:function(){
    return {
      title:'示例5：AJAX获取数据',
      message:'异步数据的展示'
    }
  },
  props:['weather']
});
//app实例化方法中
...
created:function(){
      console.log("实例创建后，ajaxData为："+this.ajaxData);
      var self = this;
      $.ajax({
       url: "http://api.k780.com:88/?app=weather.today&weaid=1&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=?",
        dataType: "jsonp",
          type:"Post",
         jsonpCallback: "jsonpCallback",
        success: function (data) {
            self.ajaxData = data.result.temperature;
            console.log("请求完成后，ajaxData为："+self.ajaxData);
          }
        });
      console.log("实例创建后，目标li的数量为："+$("#list1 li").length);
    },
...

后话

想当初，我刚做前端的时候，全世界都在说内容表现行为要分离。现在的webapp，大框架，模块化，恨不得JS搞定一切，想来也是唏嘘，不过每个时代总有局限性，只要能适应以后的发展就跟着走吧。

完整demo见boom。

Javascript

Vue.js