码迷,mamicode.com
首页 > Web开发 > 详细

前端随心记---------vuejs基础学习3.0

时间:2019-08-29 21:36:48      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:handler   change   binding   ice   习惯   head   bar   round   omv   

watch ch 和cpmpute的区别:

1.watch 表示监听某个模型变量的状态变化。watch监视的东西多一些,computed所依赖的东西都写在一个函数里。

2.特殊场景:如果业务出现了异步操作(回调函数)则这个时候computed是存在返回值,不能在使用,但是watch里面的没有返回值的概念,可以进行异步代码的调用。

小案例代码:

<script type="text/javascript">
    var vm = new Vue({
        el: #box,
        data: {
            username: ‘‘,
            msg: ‘‘,
        },
        // computed 完成信息的校验 同步校验,在本地做一些合法性的校验; 最关键检验用户名是否重复
        // 异步操作 ajax请求 校验用户名是否合法
        watch: {
            username: function () {
                // 检测用户名
                if( !this.username ) {
                    this.msg = ‘‘;
                    return; // 只是为了终止代码执行
                }

                if( this.username.length < 3 ){
                    this.msg = * 用户名的长度不能小于3个;
                    return; // 只是为了终止代码执行
                }

                if( this.username.length > 10 ){
                    this.msg = 用户名的长度不能大于 10个;
                    return; // 只是为了终止代码执行
                }
                // 发送ajax请求进行操作
                var _That = this; // 方式一
                $.ajax({
                    url: ./check.json,
                    type: GET,
                    dataType: json,
                    // 方式二: 使用箭头函数 es5习惯
                    success: (json) => {

                        console.log(json);

                        if( !json[status] ){

                            console.log(this); // ajax对象

                            this.msg = 用户名已经被注册,不能在使用了;
                        }
                        // return json[‘status‘]; // 是否可以return出去

                    }
                });
                return 信息合法;
            }
        }

    })
</script>

在案例中,如果使用computed,无法获取ajax验证之后的状态,在异步ajax中无法return 状态。从而使用watch。

 

watch的深度监控:

 watch: {
            //  改成了一个对象,属性值 handler 固定写法
            lists: {
                handler: function (newVal, oldVal) {
                    console.log(‘lists change....‘)
                },
                deep: true,
                // 代表开启深度监控。意思数据的任何一个属性发生变化,监视函数需要执行
                immediate: true,
                // 如果immediate 设置为true, 代表代码一加载 立马执行监视函数。

            }
        }

 

小案例:

http://todomvc.com/

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1. 引入 bootstrap-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>

    <style>
        .del{
            text-decoration: line-through;
            color: #ccc;
        }
    </style>


</head>

<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                VUEJS_TODO
            </a>
        </div>
    </div>
</nav>

<div class="container" id="app">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3>-_-, 还有 {{onData}} 件事未完成</h3>
                    <input type="text" class="form-control" v-model="title" @change="addItem">
                </div>
                <div class="panel-body">
                    <ul class="list-group">
                        <li   @dblclick="editItem(todo)"
                              style="cursor:pointer;"
                              class="list-group-item"
                              :class="{del: todo.isComplice}"
                              v-for="todo in newData"

                        >



                            <div v-show="curItem !== todo">
                                <input type="checkbox"

                                       v-model="todo.isComplice"> {{ todo.title }}
                                <button type="button"
                                        @click="removeItem(todo)"
                                        class="btn btn-danger btn-xs pull-right">&times;
                                </button>
                            </div>


                            <input type="text"
                                   @blur="cancel"
                                   @change.13="cancel"

                                   v-show="curItem === todo"

                                   class="form-control"
                                   v-model="todo.title"

                                   v-focus="curItem === todo"

                            >

                        </li>
                    </ul>


                </div>
                <div class="panel-footer">
                    <ul class="nav nav-pills">
                        <li :class="{active:hash===‘all‘}"><a href="#/all">全部</a></li>
                        <li :class="{active:hash===‘finish‘}"><a href="#/finish">已完成</a></li>
                        <li :class="{active:hash===‘unfinish‘}"><a href="#/unfinish">未完成</a></li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
</div>

</body>
<!--2. vuejs-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
  new Vue({
      el:#app,
      directives: {
          focus: function (el, bindings) {
              if (bindings.value) {
                  el.focus();
              }
          }
      },
      data:{
          curItem:‘‘,
          hash:‘‘,
          title:‘‘,
          isComplice:‘‘,
          title:‘‘,
          todos:[
      {
          title:吃饭,
          isComplice:true,
      },
      {
          title:吃饭,
          isComplice:false,
      },
      {
          title:吃饭,
          isComplice:false,
      }
  ]},

      methods:{
          addItem:function () {
              this.todos.push({title:this.title,isComplice:false});
              this.title=‘‘;
          },
          removeItem:function (eles) {
              this.todos = this.todos.filter(function (ele) {
                  return ele !== eles;
              })
          },

          editItem:function (elee) {
              this.curItem=elee;
          },
          cancel: function () {
        this.curItem = ‘‘;// 清空当前项
         }
          
          
      },
        computed:{
          onData:function () {
            return  this.newData.filter(function (ele) {
                  return  !ele.isComplice;
              }).length;
          },
            newData:function () {
                if(this.hash==finish){
                    return this.todos.filter(function (ele) {
                        return ele.isComplice;
                    })
                }
                if(this.hash==unfinish){
                    return this.todos.filter(function (ele) {
                        return !ele.isComplice;
                    })
                }
                return  this.todos;

            }

        },

      watch:{
          todos:{
              handler:function (newVal,oldVal) {
                localStorage.setItem(toDoData,JSON.stringify(this.todos));
              },
              deep:true,
          },
      },
      created:function () {
          this.todos=JSON.parse(localStorage.getItem(toDoData))||this.todos;
          window.addEventListener(hashchange, ()=> {
             this.hash= location.hash.slice(2);
          },false);
      },

  })


</script>
</html>

 



前端随心记---------vuejs基础学习3.0

标签:handler   change   binding   ice   习惯   head   bar   round   omv   

原文地址:https://www.cnblogs.com/hudunyu/p/11428719.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!