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的最上层导航栏效果

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

  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

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

双击切换为可编辑事件

  1. 双击事件为@dblclick
  2. 因为需要多次转换,所以使用v-show
  3. 编辑文本框的退出可以是按下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;
              }
            }
          },

全部代码在//www.greatytc.com/p/a83d33b4fc85

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,065评论 0 66
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,596评论 25 708
  • Android Studio自从推出以来,网上就被很多人拿来推广。15年之前,还是beta版,关注的人不多。15年...
    静明茶话阅读 1,512评论 4 0
  • 1昨天怎么样不重要,关键是你要懂得今天你做了什么,因为你明天的好和坏是有待于今天的努力。 你有什么方法能够对你过去...
    多多相生阅读 204评论 0 0