选择题活动小结

 

 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三种情况，

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

 

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

gulp安装到全局：
sudo npm install gulp -g —versose

jshint()是代码验证工具，这种工具可以检查你的代码并提供相关的代码改进意见，结果一检查就检查出代码里写的不规范的地方，一个是重复定义了一个变量，还有就是分号有些地方没有加上。

gulp配置的话再简单介绍一下，

gulp.task('js_daka', function () {
return gulp.src('./src/nishidaka/static/js/index.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});

gulp.task('js_nishidaka', function () {
return gulp.src('./src/nishidaka/static/js/index.js')
.pipe(uglify())//压缩js文件
.pipe(rename('index.min.js’))//重命名
.pipe(gulp.dest('./src/nishidaka/static/js’))//目标文件夹
});

gulp.task('css_nishidaka', function () {
return gulp.src(['./src/nishidaka/static/css/base.css', './src/nishidaka/static/css/index.css'])
.pipe(concat('all.css’))//如果有多个文件的话先合起来再进行压缩
.pipe(minifyCss())
.pipe(rename('index.min.css'))
.pipe(gulp.dest('./src/nishidaka/static/css'))
});

gulp.task('nishidaka_index', ['js_daka', 'css_nishidaka', 'js_nishidaka']);

 

配置好后跑一遍：从终端里进入文件，执行gulp nishidaka_index

这里还有一个小插曲，开始使用的CSS压缩插件是csso,可是显示效果有所偏差，后来改用minifyCss压缩就正常了，查看压缩后的文件原来是压缩的时候有bug，压缩后的css位置改变不正确导致的样式错乱，