没全部看完，我是菜鸡

动态绑定样式

和class方法相同,但是需要使用驼峰命名

对象方法

:style="{backgroundColor:'red',color:'pink'}"

数组

:style="[sty1,sty2,{color:'pink'}]"

路由

实现单页开发的方式

history

浏览器自带的历史管理方法history
history.pushState('','','/d') 设置状态，需要服务端支持，可能会导致404错误

hash

通过hash值记录跳转的路径可以产生历史管理
开发时使用404方式，上线的话我们会使用history的方式

实例，todolist

首先分解todolist

最上端title
还有多少件事没有完成的提醒
事件列表
1. 选框，选中后变为不可更改模式
2. 双击可编辑事件
3. 事件删除
添加新的事件
全部事件，已完成，未完成导航
JSON数据样式为
[
{"name":"背英语","hasdone":false,"flag":true},
{"name":"打游戏","hasdone":false,"flag":true},
{"name":"散步","hasdone":false,"flag":true}
]
hasdone标记是否做了，flag标记是选择模式还是编辑模式

title

利用bootstrap的最上层导航栏效果

    <nav class="navbar navbar-inverse">
        <!--默认颜色为灰色 navbar-inverse是反色导航条-->
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">
              大白熊
            </a>
          </div>
        </div>
      </nav>

.navbar——设置nav元素为导航条组件
.navbar-inverse-指定导航条组件为黑色主题
navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；
.navbar-brand——设置导航条组件内的品牌图标；可以是文字，也可以是图片，必须是小图片，图片过大，会靠下

多少事没有完成的提醒

bootstrap （面板）panel

          <div class="panel panel-info">
            <div style="font-size:30px" class="panel-heading" >还有<span class="text-danger" v-cloak>{{x}}</span>件事需要完成</div>
            <div class="panel-body">
            </div>
            <div class="panel-footer"></div>
          </div>

panel-info颜色还有danger primary default等多个颜色
panel-heading面板标题
panel-body 面板内容
panel-footer脚注内容

这里的x是未完成事件需要一直计算，所以使用computed

//data中数据
        data:{
          things:[],
          newItem:"",
        }

computed,注意x不能再放进data，会由于重名出现问题

        computed:{
          x:{
            get(){
              return this.things.filter(item=>!item.hasdone).length
            }
          }
        }

事件列表

读取事件

localStorage

这是一个HTML5新加入的特性，主要用来作为本地存储来使用，拓展了cookie的4K限制，相当于一个5M大小的针对于前端页面的数据库
localStorage的值类型限定为string类型
所以需要使用JSON.stringify()
有两个方法：
localStorage.getItem()
localStorage.setItem(变量名，要存入的数据)
这个程序中使用localStorage是为了将事件列表的修改存储下来

当第一次打开列表的时候localStorage为空所以默认读取本地json文件，当localStorage不为空的时候，以localStorage修改things

        created(){
         if(localStorage.getItem('data')==null)
          {
            //如果localStorage中有数据就用localStorage，没有用json中定义的
         axios.get('./todo.json').then(data=>{this.things=data.data},function(err){alert("err")})
          }
          else {
this.things=JSON.parse(localStorage.getItem('data'))
          }
        },

当每次things中的值发生变化的时候localStorage需要改变，于是需要用到setItem方法
需要注意的是watch默认只监控一层是数据变化，数组变化能够监控，数组内对象内容变化不会监控到
Vue提供了深层监控方法如下

        watch:{
          things:{
            //改变name不会触发watch，watch默认只监控一层是数据变化，数组变化能够监控，数组内对象内容变化不会监控到
            handler(newVal,oldVal){//默认写成函数，相当于默认写了handler
              //localStorage默认存储字符串
              localStorage.setItem('data',JSON.stringify(this.things))
            },deep:true
          }
        },

选框

选框主要是checkbox,大部分内容与购物车相同，有一点新增加的功能

点击checkbox后不可编辑

bootstrap提供了disabled属性为input提供了不可编辑功能
使用动态绑定属性，所有hasdone被标记为true的添加属性disabled

<li class="list-group-item" v-for="thing in things" :class="{disabled:thing.hasdone}">

双击切换为可编辑事件

双击事件为@dblclick
因为需要多次转换，所以使用v-show
编辑文本框的退出可以是按下Enter，或者失去焦点

双击切换效果

对于每个事项有一个flag，用于标记当前是checkbox形式还是输入框形式，利用v-show切换

<span v-show="thing.flag">
 <input type="checkbox" v-model="thing.hasdone" v-cloak >
 {{thing.name}}
</span>
<input type="text"  v-show="!thing.flag" v-model="thing.name"  @keydown.Enter="thing.flag=!thing.flag" @blur="thing.flag=!thing.flag" v-focus="!thing.flag">

编辑文本框的退出

@keydown.Enter=""以及@blur=""是按下Enter和失去焦点
需要注意的是keydown事件，按下的键还没有送入数据，但是目前还用不上这一点
我们会发现双击后，鼠标点击其他位置并不会退出，这是因为没有获取焦点，此时需要用到自定义指令

directives

directives自定义指令

        directives:{
          //自定义指令
          focus(el,bindings){
            //el指操纵的dom
            if(bindings.value==true)
            {//bindings是绑定的属性，.value表示值
              el.focus()
            }
          }
            },

然后在编辑文本框标签处添加v-focus

  <input type="text"  v-show="!thing.flag" v-model="thing.name"  @keydown.Enter="thing.flag=!thing.flag" @blur="thing.flag=!thing.flag" v-focus="!thing.flag">

directives中的bindings.value是传递过来的!thing.flag，切换的时候自动获取焦点

删除事项

<button class="btn btn-xs btn-danger pull-right" @click="del(thing)">删除</button>

methods中添加

del(o){          this.things=this.things.filter(item=>item!=o)}

添加新的事项

  <input type="text" class="form-control" placeholder="请输入添加的项目" v-model="newItem" @keydown.Enter="addnew">

methods中

          addnew(){
this.things.push({name:this.newItem,hasdone:false,flag:true})
            this.newItem=""}

全部任务，已完成，未完成切换

首先是bootstrap里的胶囊式导航

              <ul class="nav nav-pills" style="margin-top:5px">
                <li role="presentation"><a href="#">全部</a></li>
                <li role="presentation"><a href="#">已完成</a></li>
                <li role="presentation"><a href="#">未完成</a></li>
              </ul>

除此之外，也要将things分为allthings，finishthings，unfinishthings，通过hash值将合适的值分配给things

锚点

为每一个选项添加hash值，希望在网址最后加值，所以形式应该是<a href="#/all">
监控hash值变化，需要使用hashchange事件

          window.addEventListener("hashchange",()=>{
            this.hash=window.location.hash
          },false)

现在获得了hash值可以为后续做准备

胶囊导航条的显示状态

选中的状态为蓝色，需要用到active类，利用动态绑定类的方式，通过判断hash值来决定类是否为true

任务显示

computed中监控things的依赖属性变化，things依赖于allthings,hash，所以当hash和allthings改变的时候，things就会改变

            get(){
              if(this.hash=='#/all')
              {
              return this.allthings;
              }

              else if(this.hash=='#/unfinish')
              {

                return this.unfinishthings;
              }
              else if(this.hash=='#/finish')
              {
              return this.finishthings;
              }
            }
          },

全部代码在https://www.jianshu.com/p/a83d33b4fc85

vue学习记录第三天2