选择题活动小结

最近一个选择题的小活动，分别用vue和zepto尝试了下，期间遇到了不少问题，以下：

choose:function(type){
        var sub=commentHtml.commentVue.$data.view.sub;
        var page = commentHtml.commentVue.$data.view.page;
        switch(type){
            case 0:
                commentHtml.commentVue.$data.view.collected = 0;
                commentHtml.commentVue.$data.view.sub = sub+s[page+1][0];
                break;
            case 1:
                commentHtml.commentVue.$data.view.collected = 1;
                commentHtml.commentVue.$data.view.sub = sub+s[page+1][1];
                break;
            case 2:
                commentHtml.commentVue.$data.view.collected = 2;
                commentHtml.commentVue.$data.view.sub = sub+s[page+1][2];
                break;
        };

用vue写的时候，开始觉得这里每一个case里面都需要加个commentHtml.commentVue.$data.view.sub,太长了，于是想在前面先定义一个var sub=commentHtml.commentVue.$data.view.sub;然后把后面的commentHtml.commentVue.$data.view.sub都用sub代替了，可是替换以后发现sub的值不会改变了，原来是js基本数据类型和引用类型的参数传递问题，初始的时候给sub赋了一个数值，它是一个基本数据类型，基本数据类型有自己独立的内存地址，改变sub的值的时候不会改变commentHtml.commentVue.$data.view.sub的值，前者只是想当于后者的副本，两者只是值相同，但并没有什么联系，而我们这里最终想要改变的是commentHtml.commentVue.$data.view.sub的值。引用和赋值的区别虽早已看过可是当实际用的时候却不知道，可见当时的了解也只是了解而已，没有掌握就并卵用，基础不扎实。

v-with这个指令指令需要结合v-component才能使用，作用是让子ViewModel可以继承父ViewModel的数据，我们可以传入父ViewModel的属性对象的单个属性。比如有这样一个组件

<comment-template v-with="view"><\/comment-template>，那我们在这样的组件<script type="text\/x-template" id="comment-template"><\/script>里需要调用到

    var commentHtml = {
    	commentVue: '',
    	commentView: {
    	items:[…]
    };

这个下面的items的时候，而在模型中已经定义了

    data:{
    	view:commentHtml.commentView,
    },

所以在这个组件里可以这样v-repeat=“items”，前面的v-with=“view”已经声明这个整个这组件里面都在这个view下面， 而如果要在这个组件外面使用的话就需要写成v-repeat=“view.items”,这是在写的过程中经常容易忘的， 当前使用的vue.js的版本是0.11.5，而在0.12版本中已经不建议使用v-with这样的写法了

需要知道用户点击的是当前这道题下面的三个选项中的哪一项，传统的方法的话主要点在于要给每道题添加一个新属性用于标识，比如这里使用的index=‘1’;index=‘2’；这样，然后点击某个选项的时候返回到它的父节点去查看是不是它的父节点的index属性是否等于相应的值，如果是，那么就说明是这个题下面的这个选项，那么选择这个选项该给多少分数就给多少分数，最后把这个分数加起来，就是用户得到的总分；

用vue.js改写的话先是把数据放到js文件中，我们有六个样式相同的页，只需要写一个页然后把数据存到一个数组放到js文件中，当需要数据的时候去循环这个数组。对于跳转的下一页是通过改变样式，然后这里需要添加一个标记，通过这个标记与当前页的index的对比来判断是否给它添加这个class，在判断选择的是某到题的某一项的时候使用了switch，分case:0,case:1,case:2三种情况，

zepto类似jQuery一样，是去进行一些细节上的DOM操作，而Vue更多的是通过JS操作数据

这次活动用到了CSS3的几个重要的属性，transition,transform，animation，这两个属性是CSS3动画里很重要的部分，这次用到了趁此机会另外总结总结，最主要是要知道，用它能做成什么。当有需求的时候才能用的上。