今天完成的事情：

1、今天的状态比较散，进度不是很明显，看了一些文章和视频，也写了一些简单的demo。

以下是今天写的js代码：

init();
//点击折叠
$(".days").on("click",function(){
    // $(this).parent().siblings("div").children("ul").toggle();
    $(this).parent().children("ul").toggle();
})
//变色与返回页面折叠
var asd=state.day-1;
$("ul:eq("+asd+")").parent().siblings(".container").find("ul").addClass("hidden");
$("ul:eq("+asd+")").parent().siblings(".container").find("ul li").addClass("Rred");
$("ul:eq("+asd+")").parent().siblings(".container").find("ul li .triangle").addClass("triangle2");





for (var i = 0; i < $(".main li").length; i++) {
    $(".main li").eq(i).attr("index",i);
    $(".main li").eq(i).on("click",function(){
            var index=parseInt($(this).attr("index"))+1;
            var stepGo = state.step[index];
            var canClick = state.isClick[index];
            if(!canClick) {
                if(stepGo) {

                    state.step[(index + 1)] = true;
                    //点击当前的置为true
                    state.isClick[index] = true;
                    this.style.backgroundColor = 'red';
                    $(this).children(".triangle").addClass("red");
                    if (index%4==1) {
                        sessionStorage.state=JSON.stringify(state);
                        location.href="js2-6.html"
                    }
                    if (index%4==2) {
                        sessionStorage.state=JSON.stringify(state);
                        alert("请亡灵发表遗言")
                    }
                    if (index%4==3) {
                        sessionStorage.state=JSON.stringify(state);
                        alert("请玩家依次发言")
                    }
                    if(index%4==0){
                        alert("进入投票页")
                        state.day++;
                        sessionStorage.state=JSON.stringify(state);
                        location.href="js2-7.html"

                    }
                } else {
                    alert('请按顺序操作');
                }
            } else {
                alert('请不要重复操作');
            }
        }
    )}

明天计划的事情：

1、明天开始详细扣任务代码，抓紧时间结束吧。

遇到的问题：

1、今天没有遇到什么问题，遇到的也都及时咨询了师哥，得到了解决讲解。

收获：

‍‍‍‍vuejs简单介绍特点：  ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

　　  vue是一个渐进式的框架, 是一个轻量级的框架, 也不算是一个框架, 他核心只关注图层, 是一个构建数据驱动的web界面,易于上手, 还便于于第三方库或与既有项目整合,也能够为复杂的单页应用程序提供驱动

　‍‍　1. vue的‍‍核心‍‍‍‍

　　　　是一个允许采用简洁的模板语法来声明式的将数据渲染进dom

　　　　先创‍‍建一个后缀‍‍‍‍名为.‍‍html的文件  ‍‍

　　　　代码如下‍‍: 

　　　　　　htm‍‍l:  <div id=‍‍"app"></div>

　　　　　　 js里面的　va‍‍r app ‍‍= new Vue({

 　　2. vu‍‍e指令‍‍

　　‍‍　　指令带有前缀v-, 以表示他‍‍们是Vue提供的特‍‍殊属性, 他们会在渲染的DOM上应用特殊的响应式行为

　　　　v-bind:  v-bind : str = "msg" 将这个元素的节点的str属性和vue实例对象的msg属性保持一致

　　　　v-if = 布尔值‍‍‍‍  条‍‍件渲染指‍‍令‍‍, 根据其后表达式的布尔值进行判断是否渲染该元素, v-if只会渲染他身后表达式为true的元素

　　　　v-show = 布尔值 和v-if类‍‍似,只是会渲染他身后表达式为false的元素, 而且会给这样的元素添加css的代码, style = "display:none"

　　　　v-else 必‍‍须v‍‍-if/v-show指令后, 不然就不会起作用, 如果v-if/v-show的指令表达式为true, 则else就不显示, 如果v-if/v-show指令的表达式为false, 则else元素会显示在页面上       

　　　　v-for ‍‍类似于js的遍历, 用法为 v-for="(item,index) in imgs" :key="index", items是数组, item为数组中的数组元素, index是索引号, key是为了更高效的查找到指定元素‍‍

　　　　v-on 用于‍‍监听指定元素‍‍的DOM事件 v-on:click="greet"

　　3. vue的双向‍‍数据绑‍‍定

　　　　vueJS是使‍‍用ES5提供的Object.defineProperty()方法, 监控对数据的操作, 从而可以自动触发数据, 并且, 由于是在不同的数据上触发同步, 可以精确的将变更发送给绑定的视图, 而‍‍不是对所有的数据都执行一次检测

　　　　vue和a‍‍ngular‍‍中, 都‍‍是通过在html中添加指令的方式, 将视图元素与数据的绑定关系进行声明 

　　　　<from id= "a‍‍pp">

　　　　　　<input‍‍ type="t‍‍est" v-model="name">

　　　　<‍‍/from> ‍‍

　　　　以上的html代码表示‍‍该‍‍input元素与name数据进行绑定, 在js代码总可以这样进行初始化  

　　　　　　var vm = new ‍‍Vue‍‍({

　　　　　　　　　　el: "#‍‍app‍‍",

　　　　　　　　　　data:‍‍{‍‍

　　　　　　　　　　　　‍‍name‍‍: "请输入你的名字"

　　　　　　　　　‍‍　}‍‍‍‍

　　　　　　　　‍‍})

　　　　　　代码‍‍执行‍‍正确后, 页面上input元素对应的位置会显示上面的代码给出的初始值 "请输入你的名字", 由于双向绑定数据已经建立, 因此, 在vm.name="小米", 则input也会更新为小明, 在页面input上输入小明, 则vm.name获取的值为小明

　　‍‍4. vue的插件化　‍‍

‍‍　　　　插件通常会为vue‍‍添加‍‍全局功能, 插件的范围没有限制

‍‍　　　　添加全局的方法或者属性 vue-element 这个我并不是很懂

　　　　添加全局资源 指令/‍‍过滤‍‍器/ 过渡

　　　　添加vue实例的办法,‍‍‍‍将他们添加到vue-prototype上实现

　　　　引入一个库, 来提供‍‍自己‍‍的api, 同时提供上面的一个或者多个功能, 如 vue-router

　　　　　　　import ‍‍vueRouter ‍‍from ''vue-router';  //使用webpack的单文件组件打包的方式 会调用vue.component来注册全局组件或者vue.components注册局部组件如果是后者，每个单文件组件中都不需要引入 vue, 
因为单文件组件经 webpack 打包后，生成的模块只是一个组件选项对象，被其他组件或 Vue 实例注册时使用语法糖，只需要 字面量对象的 组件选项对象就可以了。

　　　　使用‍‍插‍‍件:‍‍

　　　　　　　‍‍vue.use(vueRouter); /通过全局方法Vue.use()使用插件, 会阻止注册相同插件多次, 只会注册一次该插件

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍