vue学习记录第三天2

没全部看完，我是菜鸡

动态绑定样式

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

对象方法

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

数组

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

路由

实现单页开发的方式

history

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

hash

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

实例，todolist

首先分解todolist

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

title

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

    

        
        

          

            
              大白熊
            
          
        
      

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

多少事没有完成的提醒

bootstrap （面板）panel

          

            
还有{{x}}件事需要完成
            

            
            

          

• 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是为了将事件列表的修改存储下来

1. 当第一次打开列表的时候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

双击切换为可编辑事件

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

双击切换效果

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

 
 {{thing.name}}

编辑文本框的退出

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

directives

directives自定义指令

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

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

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

删除事项

删除

methods中添加

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

添加新的事项

methods中

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

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

首先是bootstrap里的胶囊式导航

              

                
全部
                
已完成
                
未完成
              

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

锚点

为每一个选项添加hash值，希望在网址最后加值，所以形式应该是
监控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