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

Posted 2022-09-09 hudunyu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端随心记---------vuejs基础学习3.0相关的知识，希望对你有一定的参考价值。

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的主要内容，如果未能解决你的问题，请参考以下文章

前端随心记---------vuejs流行的UI框架

前端随心记---------AngularJS 基础学习1.0

前端随心记---------vue3.0终于来了，作者已公布源码

前端随心记

前端随心记---------HTML5+CSS系列3.0

前端随心记---------前海面试汇总