当前位置:编程学习 > > 正文

vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

时间:2022-04-03 10:26:36类别:编程学习

vuejs全家桶入门教程交流

Vue全家桶入门基础教程

1. Vue概述

Vue(读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

渐进式: 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

可以使用其中的一个或者多个

优点:

 2. Vue的基本使用

2.1 传统开发模式对比

  • //原生JS
     <li id="msg"></li>
      <script type="text/javascript">
        var msg = 'Hello World'
        var li = document.querySelector('#msg');
        li.innerHTML = msg
      </script>
    
  • //jQuery
    <li id="msg"></li>
      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript">
        var msg = 'Hello World';
        $('#msg').html(msg);
      </script>
    
  • 2.2 Vue.js之HelloWorld基本步骤

    引入Vue的方法:

    1.下载Vue.js,然后在<script type='text/javascript' src='js/vue.js'></script>引入

    2.使用CDN方法。 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

    Vue的基本使用步骤:

    ​ 1、需要提供标签用于填充数据

    ​ 2、引入Vue.js库文件

    ​ 3、可以使用vue的语法做功能了

    ​ 4、把vue提供的数据填充到标签里面

  • //1.HelloWorld.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    
    <body>
      <li id="app">
          //插值表达式
        <li>{{num}}</li> 
        <li><button @click='handle'>点击</button></li>
      </li>
     //引入vue
      <script type='text/javascript' src='js/vue.js'></script>
      <script type='text/javascript'>
        var vm = new Vue({
          el: '#app',
          data: {
            num: 0
          },
          methods: {
            handle: function () {
              this.num++;
            }
          }
        });
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    2.3 Vue.js之HelloWorld细节分析

    1. 实例参数分析

    2.插值表达式用法

    3. Vue代码运行原理分析

    概述编译过程的概念(Vue语法经过Vue框架编译成原生JS语法,才能够被浏览器执行)

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    3. Vue 模板语法

    3.1 模板语法概述

    前端渲染:把数据填充到HTML标签中

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    前端渲染方式:

    原生js拼接字符串基本上就是将数据以字符串的方式拼接到HTML标签中。

    缺点:不同开发人员的代码风格差别很大,随着业务的复杂,后期的维护变得逐渐困难起来。

    使用前端模板引擎是基于模板引擎art-template的一段代码,与拼接字符串相比,代码明显规范了很多,它拥有自己的一套模板语法规则。

    优点:大家都遵循同样的规则写代码,代码可读性明显提高了,方便后期的维护。

    缺点:没有专门提供事件机制。

    插值表达式 {{变量}}

  • <li id="app">
          <!-- this 指向 vm -->
          <p> {{ msg }} </p>
       </li>
       
       <script>
    	var vm = new Vue({
        	el: ‘#app',
      		data: {
      			msg: 'hello vue.js'
      		}
      	})
    	</script>
    
  • 模板语法概述

    3.2 指令

    1.什么是指令?

    2.v-cloak指令用法

    插值表达式存在的问题:“闪动”

    如何解决该问题:使用v-cloak指令

  • v-cloak指令的用法
      1、提供样式
       属性选择器
        [v-cloak]{
          display: none;
        }
      2、在插值表达式所在的标签中添加v-cloak指令
    
  • 背后的原理:先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果

  • //02-指令v-cloak的用法.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
      [v-cloak]{
        display: none;
      }
      </style>
    </head>
    <body>
      <li id="app">
        <li v-cloak>{{msg}}</li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            msg: 'Hello Vue'
          }
        });
      </script>
    </body>
    </html>
    
  • 3 .数据绑定指令

    用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题

    用于将HTML片段填充到标签中,但是可能有安全问题

    显示原始信息,跳过编译过程(分析编译过程)

  • //03-数据填充相关3个指令用法.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <li id="app">
        <li>{{msg}}</li>
        <li v-text='msg'></li>
        <li v-html='msg1'></li>
        <li v-pre>{{msg}}</li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            msg: 'Hello Vue',
            msg1: '<h1>HTML</h1>'
          }
        });
      </script>
    </body>
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    4.数据响应式

    html5中的响应式(屏幕尺寸的变化导致样式的变化)
    数据的响应式(数据的变化导致页面内容的变化)

    v-once的应用场景:如果显示的信息后续不需要再修改,可以使用v-once提高性能。

  • //04-指令v-once的用法.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <li id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
      </li>
      <script>
        const app = new Vue({
          el: "#app",
          data: {
            message: "你好啊"
          }
        })
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    3.3 双向数据绑定

    1.什么是双向数据绑定?

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    2.双向数据绑定分析

    Vue中使用v-model指令来实现标签内容的绑定(双向绑定).如表单元素和数据的双向绑定

    v-model只能用于表单类型,就是输入性控件,其他控件不能用,用v-bind

  • <input type='text' v-model='uname'/>
    
  • //05.双向数据绑定.html
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Document</title>
      </head>
      <body>
        <li id="app">
          <li>{{msg}}</li>
          <li>
            <input type="text" v-model='msg'>
          </li>
        </li>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript">
          /* 双向数据绑定
            1、从页面(用户)到数据
            2、从数据到页面  */
          var vm = new Vue({
            el: '#app',
            data: {
              msg: 'Hello Vue'
            }
          });
        </script>
      </body>
      </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    案例解析:

    当我们在输入框输入内容时,因为input中的v-model绑定了msg,所以会实时将输入的内容传递给msg,msg发生改变。

    当msg发生改变时,因为上面我们使用Mustache语法,将msg的值插入到DOM中,所以DOM会发生响应的改变。

    3.MVVM设计思想

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开

    在我们前端开发中,通常就是DOM层。主要的作用是给用户展示各种信息。

    数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。

    视图模型层是View和Model沟通的桥梁。

    一方面它通过Data Binding(数据绑定),将Model的改变实时的反应到View中

    另一方面它通过DOM Listener(DOM监听),当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。

    3.4 事件绑定

    1.Vue如何处理事件?

    在这里doSomething() 是一个函数,可以写在methods的方法中,供该标签调用.

  • <button v-on:click="doSomething">...</button>
    
  • v-on语法糖(简写形式)@

  • <input type='button' @click='num++'/>
    
  • //06-事件基本用法.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    
    <body>
      <li id="app">
        <li>{{num}}</li>
        <li>
            //4种都可以实现
          <button v-on:click='num++'>点击</button>
          <button @click='num++'>点击1</button>
          <button @click='handle'>点击2</button>
          <button @click='handle()'>点击3</button>
        </li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            num: 0
          },
          methods: {
            handle: function () {
              // 这里的this是Vue的实例对象
              console.log(this === vm)
              // 在函数中 想要使用data里面的数据 一定要加this 
              this.num++;v
            }
          }
        });
      </script>
    </body>
    
    </html>
    
  • 2.事件函数的调用方式

    直接绑定函数名称

  • <button v-on:click='say'>Hello</button>
    
  • 调用函数

  • <button v-on:click='say()'>Hello</button>
    
  • 3.事件函数参数传递

    事件函数参数传递

  • <button v-on:click='say('hi',$event)'>Hello</button>
    
  • //07-事件函数传参.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <li id="app">
            <li>{{num}}</li>
            <li>
                <!-- 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数 -->
                <button v-on:click='handle1'>点击1</button>
                <!-- 2、如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,
                     并且事件对象的名称必须是$event -->
                <button v-on:click='handle2(123, 456, $event)'>点击2</button>
            </li>
        </li>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    num: 0
                },
                methods: {
                    handle1: function(event) {
                        console.log(event.target.innerHTML)
                    },
                    handle2: function(p, p1, event) {
                        console.log(p, p1)
                        console.log(event.target.innerHTML)
                        this.num++;
                    }
                }
            });
        </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    4.事件修饰符

    .stop 阻止冒泡

  • <a v-on:click.stop="handle">跳转</a>
    
  • .prevent阻止默认行为

  • <a v-on:click.prevent="handle">跳转</a>
    
  • //08-事件修饰符.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    
    <body>
      <li id="app">
        <li>{{num}}</li>
        <li @click='handle0'>
          <button @click.stop='handle1'>点击1</button>
        </li>
        <li>
          <a href="http://www.baidu.com" @click.prevent='handle2'>百度</a>
        </li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            num: 0
          },
          methods: {
            handle0: function () {
              this.num++;
            },
            handle1: function (event) {
              // js阻止冒泡
              // event.stopPropagation();
            },
            handle2: function (event) {
              // js阻止默认行为
              // event.preventDefault();
            }
          }
        });
      </script>
    </body>
    
    </html>
    
  • 未加事件修饰符:

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    加事件修饰符:

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    5.按键修饰符

    .enter 回车键

  • <input v-on:keyup.enter='submit'>
    
  • .delete删除键

  • <input v-on:keyup.delete='handle'>
    
  • //09-按键修饰符.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <li id="app">
        <form action="">
          <li>
            用户名: <input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
          </li>
          <li>
            密码:<input type="text" v-on:keyup.enter='handleSubmit' v-model='pwd'>
          </li>
          <li>
            <input type="button" v-on:click='handleSubmit' value="提交">
          </li>
        </form>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        Vue.config.keyCodes.f1 = 113
        var vm = new Vue({
          el: '#app',
          data: {
            uname: '',
            pwd: '',
            age: 0
          },
          methods: {
            clearContent:function(){
              // 按delete键的时候,清空用户名
              this.uname = '';
            },
            handleSubmit: function(){
              console.log(this.uname,this.pwd)
            }
          }
        });
      </script>
    </body>
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    6.自定义按键修饰符

    全局config.keyCodes 对象

    规则:自定义按键修饰符名字是自定义的,但是对应的值必须是按键对应event.keyCode值

  • Vue.config.keyCodes.f1 = 112
    
  • //10-自定义事件修饰符.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title></title>
      <script type='text/javascript' src='js/vue.js'></script>
    </head>
    
    <body>
      <li id="app">
        <input type="text" @keyup.f1='handle' v-model='msg'>
      </li>
      <script type='text/javascript'>
        Vue.config.keyCodes.f1 = 65
        const app = new Vue({
          el: "#app",
          data: {
            msg: ''
          },
          methods: {
            handle: function (event) {
              console.log(event.keyCode);
            }
          }
        })
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    案例:简单计算器

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    需求:实现简单的加法计算,分别输入数值a和数值,点击计算按钮,结果显示在下面。

    步骤:

  • <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title></title>
      <script type='text/javascript' src='js/vue.js'></script>
    </head>
    
    <body>
      <li id="app">
        <h2>简单计算器</h2>
        <li>数值A:<input type="text" v-model="a"></li>
        <li>数值B:<input type="text" @keyup.enter='Sum' v-model="b"></li>
        <li><button @click='Sum'>计算</button></li>
        <li>计算结果:</li>
        <li v-text='result'></li>
      </li>
      <script type='text/javascript'>
        const app = new Vue({
          el: "#app",
          data: {
            a: '',
            b: '',
            result: ''
          },
          methods: {
            Sum: function () {
              //实现计算逻辑 表单输入默认是字符串 加this很重要
              this.result = parseInt(this.a) + parseInt(this.b)
            }
          }
        })
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    3.5 属性绑定

    1.Vue如何动态处理属性?

    v-bind是处理HTML中的标签属性的,例如

    就是一个标签,也是一个标签,我们绑定上的src进行动态赋值。

    v-bind指令用法

  • <a v-bind:href='url'>跳转</a>
    
  • 缩写形式

  • <a :href='url'>跳转</a>
    
  • //12-属性绑定基本用法.html
    <!DOCTYPE html>
     <html lang="en">
    
     <head>
       <meta charset="UTF-8">
       <title></title>
     </head>
    
     <body>
       <li id="app">
         <a v-bind:href="url">百度</a>
         <button @click='handle'>切换</button>
       </li>
       <script type='text/javascript' src='js/vue.js'></script>
       <script type='text/javascript'>
         const app = new Vue({
           el: "#app",
           data: {
             url: 'http://www.baidu.com'
           },
           methods: {
             handle: function () {
               //修改url地址
               this.url = 'http://www.itcast.com'
             }
           }
         })
       </script>
     </body>
    
     </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    2.v-model的低层实现原理分析

    不使用v-model也可以实现双向绑定

  • <input v-bind:value="msg" v-on:input="msg=$event.target.value">
    
  • //13-指令v-model的本质.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <li id="app">
        <li>{{msg}}</li>
        <input type="text" v-bind:value="msg" v-on:input='handle'>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            msg: 'hello'
          },
          methods: {
            handle: function(event){
              // 使用输入域中的最新的数据覆盖原来的数据
              this.msg = event.target.value;
            }
          }
        });
      </script>
    </body>
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    3.6 样式绑定

    1. class样式处理

    对象语法

  • <li v-bind:class="{ active: isActive }"></li>
    
  • 数组语法

  • <li v-bind:class="[activeClass, errorClass]"></li>
    
  • //14-样式绑定之class绑定对象用法.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type='text/css'>
        .active {
          border: 1px solid red;
          width: 100px;
          height: 100px;
        }
        .error {
          background-color: pink;
        }
      </style>
    </head>
    
    <body>
      <li id="app">
        <li :class="{active:isActive,error:isError}">测试样式</li>
        <button @click='handle'>切换</button>
      </li>
    </body>
    <script type='text/javascript' src='js/vue.js'></script>
    <script type='text/javascript'>
      const app = new Vue({
        el: "#app",
        data: {
          isActive: true,
          isError: true,
        },
        methods: {
          handle: function () {
            //控制isActive在true和false之间切换
            this.isActive = !this.isActive
            this.isError = !this.isError
          }
        }
      })
    </script>
    
    </html>
    
  • //15-样式绑定之class绑定数组用法.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
        .active {
          border: 1px solid red;
          width: 100px;
          height: 100px;
        }
        .error {
          background-color: pink;
        }
      </style>
    </head>
    <body>
      <li id="app">
        <li v-bind:class='[activeClass, errorClass]'>测试样式</li>
        <button v-on:click='handle'>切换</button>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            activeClass: 'active',
            errorClass: 'error'
          },
          methods: {
            handle: function(){
              this.activeClass = '';
              this.errorClass = '';
            }
          }
        });
      </script>
    </body>
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

  • //16-样式绑定之class绑定3个细节用法.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
        .active {
          border: 1px solid red;
          width: 100px;
          height: 100px;
        }
        .error {
          background-color: orange;
        }
        .test {
          color: blue;
        }
        .base {
          font-size: 28px;
        }
      </style>
    </head>
    <body>
      <li id="app">
        <li v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</li>
        <li v-bind:class='arrClasses'></li>
        <li v-bind:class='objClasses'></li>
        <li class="base" v-bind:class='objClasses'></li>
    
        <button v-on:click='handle'>切换</button>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          样式绑定相关语法细节:
          1、对象绑定和数组绑定可以结合使用
          2、class绑定的值可以简化操作
          3、默认的class如何处理?默认的class会保留
          
        */
        var vm = new Vue({
          el: '#app',
          data: {
            activeClass: 'active',
            errorClass: 'error',
            isTest: true,
            arrClasses: ['active','error'],
            objClasses: {
              active: true,
              error: true
            }
          },
          methods: {
            handle: function(){
              // this.isTest = false;
              this.objClasses.error = false;
            }
          }
        });
      </script>
    </body>
    </html>
    
  • 2. style样式处理

    对象语法

  • <li v-bind:style="{ color: activeColor, fontSize: fontSize }"></li>
    
  • 数组语法

  • <li v-bind:style="[baseStyles, overridingStyles]"></li>
    
  • //17-样式绑定之style绑定用法.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    
    </head>
    
    <body>
      <li id="app">
        <li v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></li>
        <li v-bind:style='objStyles'></li>
        <li v-bind:style='[objStyles, overrideStyles]'></li>
        <button v-on:click='handle'>切换</button>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            borderStyle: '1px solid blue',
            widthStyle: '100px',
            heightStyle: '200px',
            objStyles: {
              border: '1px solid green',
              width: '200px',
              height: '100px'
            },
            overrideStyles: {
              border: '5px solid orange',
              backgroundColor: 'blue'
            }
          },
          methods: {
            handle: function () {
              this.heightStyle = '100px';
              this.objStyles.width = '100px';
            }
          }
        });
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    3.7 分支循环结构

    1.分支结构

    2.v-if与v-show的区别

  • //18-分支结构.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      
    </head>
    <body>
      <li id="app">
        <li v-if='score>=90'>优秀</li>
        <li v-else-if='score<90&&score>=80'>良好</li>
        <li v-else-if='score<80&&score>60'>一般</li>
        <li v-else>比较差</li>
        <li v-show='flag'>测试v-show</li>
        <button v-on:click='handle'>点击</button>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*v-show的原理:控制元素样式是否显示 display:none*/
        var vm = new Vue({
          el: '#app',
          data: {
            score: 10,
            flag: false
          },
          methods: {
            handle: function(){
              this.flag = !this.flag;
            }
          }
        });
      </script>
    </body>
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    3.循环结构

    其中item为自定义属性(改为abc都行),items为需要遍历的数据,index为索引

  • <li v-for='item in list'>{{item}}</li>
    <li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>
    
  • key的作用:帮助Vue区分不同的元素对开发功能没有效果,仅仅帮助vue提高性能,要确保key的唯一性

  • <li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>
    
  • //19-循环结构-遍历数组.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      
    </head>
    <body>
      <li id="app">
        <li>水果列表</li>
        <ul>
          <li v-for='item in fruits'>{{item}}</li>
          <li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
          <li :key='item.id' v-for='(item, index) in myFruits'>
            <span>{{item.ename}}</span>
            <span>-----</span>
            <span>{{item.cname}}</span>
          </li>
    
        </ul>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            fruits: ['apple', 'orange', 'banana'],
            myFruits: [{
              id: 1,
              ename: 'apple',
              cname: '苹果'
            },{
              id: 2,
              ename: 'orange',
              cname: '橘子'
            },{
              id: 3,
              ename: 'banana',
              cname: '香蕉'
            }]
          }
        });
      </script>
    </body>
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    4. 循环结构

    v-for遍历对象

  • <li v-for='(value, key, index) in object'></li> value值 key键 index索引
    
  • v-if和v-for结合使用

  • <li v-if='value==12' v-for='(value, key, index) in object'></li>
    
  • <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    
    </head>
    
    <body>
      <li id="app">
        <li v-if='v==13' v-for='(value,key,index) in obj'>{{value + '---' + key + '---' + index}}</li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            obj: {
              uname: 'zhangsan',
              age: 13,
              gender: 'female'
            }
          }
        });
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    3.8 v-model、v-on、v-bind使用说明

    v-model

    v-model指令来实现表单标签内容的双向绑定.如表单元素和数据的双向绑定

    v-model只能用于表单类型,就是输入性控件,其他控件不能用,用v-bind

    一个input标签绑定了msg这个变量,那么只要input输入发生改变,msg的值也就跟着改变,反过来也是一样,这种绑定是双向绑定

  • <input type='text' v-model='msg'>
    
  • v-on

    v-on指令用法:用于绑定HTML事件,如鼠标点击事件

    当前button绑定鼠标点击事件,点击则调用doSomething方法

  •  <button v-on:click="doSomething">...</button>
    
  • v-bind

    v-bind是处理HTML中的标签属性的,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值,可以使用v-bind 例如是一个标签,我们绑定上的src进行动态赋值。

  • <img :src='msg'>
    
  • 4. 基础案例:Tab选项卡

    步骤:

    1.实现静态UI效果

    用传统的方式实现标签结构和样式

    2.基于数据重构UI效果

    将静态的结构和样式重构为基于Vue模板语法的形式

    处理事件绑定和js控制逻辑

    3.声明式编程

    模板的结构和最终显示的效果基本一致

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

  • //21-选项卡案例.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
        .tab ul {
          overflow: hidden;
          padding: 0;
          margin: 0;
        }
    
        .tab ul li {
          box-sizing: border-box;
          padding: 0;
          float: left;
          width: 100px;
          height: 45px;
          line-height: 45px;
          list-style: none;
          text-align: center;
          border-top: 1px solid blue;
          border-right: 1px solid blue;
          cursor
        }
    
        .tab ul li:first-child {
          border-left: 1px solid blue;
        }
    
        .tab ul li.active {
          background-color: orange;
        }
    
        .tab li {
          width: 500px;
          height: 300px;
          display: none;
          text-align: center;
          font-size: 30px;
          line-height: 300px;
          border: 1px solid blue;
          border-top: 0px;
        }
    
        .tab li.current {
          display: block;
        }
      </style>
    </head>
    
    <body>
      <li id="app">
        <li class="tab">
          <ul>
            <li @click='change(index)' :class='currentIndex==index?"active":""' :key=' item.id'
              v-for='(item,index) in list'>
              {{item.title}}</li>
          </ul>
          <li :class='currentIndex==index?"current":""' :key='item.id' v-for='(item,index) in list'>
            <img :src="item.path">
          </li>
        </li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            currentIndex: 0, //选项卡当前的索引
            list: [{
                id: 1,
                title: 'apple',
                path: 'img/apple.jpg" alt="vuejs全家桶入门教程交流(Vue全家桶入门基础教程)" border="0" />
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    5. Vue常用特性

     5.1 常用特性概览

     5.2 表单操作

    1.基于Vue的表单操作

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

  • //01-表单基本操作.html
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style type="text/css">
          form li {
            height: 40px;
            line-height: 40px;
          }
          form li:nth-child(4) {
            height: auto;
          }
          form li span:first-child {
            display: inline-block;
            width: 100px;
          }
        </style>
      </head>
      <body>
        <li id="app">
          <form action="http://www.baidu.com">
            <li>
              <span>姓名:</span>
              <span>
                <input type="text" v-model="uname" />
              </span>
            </li>
            <li>
              <span>性别:</span>
              <span>
                <input type="radio" id="male" value="1" v-model="gender" />
                <label for="male">男</label>
                <input type="radio" id="female" value="2" v-model="gender" />
                <label for="female">女</label>
              </span>
            </li>
            <li>
              <span>爱好:</span>
              <input type="checkbox" id="ball" value="1" v-model="hobby" />
              <label for="ball">篮球</label>
              <input type="checkbox" id="sing" value="2" v-model="hobby" />
              <label for="sing">唱歌</label>
              <input type="checkbox" id="code" value="3" v-model="hobby" />
              <label for="code">写代码</label>
            </li>
            <li>
              <span>职业:</span>
              <select v-model="occupation" multiple>
                <option value="0">请选择职业</option>
                <option value="1">教师</option>
                <option value="2">软件工程师</option>
                <option value="3">律师</option>
              </select>
            </li>
            <li>
              <span>个人简介:</span>
              <textarea v-model="desc"></textarea>
            </li>
            <li>
              <input type="submit" value="提交" @click.prevent="handle" />
            </li>
          </form>
        </li>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript">
          var vm = new Vue({
            el: "#app",
            data: {
              uname: "",
              gender: "", //单选为值
              hobby: [""], //多选为数组
              occupation: [""],
              desc: "",
            },
            methods: {
              handle: function () {},
            },
          });
        </script>
      </body>
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    2.表单域修饰符

  • <input v-model.number='age' type='number'
    
  • //02-表单域修饰符用法.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    
    <body>
      <li id="app">
        <input type="text" v-model.number='age'>
        <input type="text" v-model.trim='info'>
        <input type="text" v-model.lazy='msg'>
        <li>{{msg}}</li>
        <button @click='handle'>点击</button>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            age: '',
            info: '',
            msg: ''
          },
          methods: {
            handle: function () {
              console.log(this.age + 1)
              console.log(this.info.length)
            }
          }
        });
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    5.3 自定义指令

    1.为何需要自定义指令?

    内置指令不满足需求

    2.自定义指令的语法规则(获取元素焦点)

  • //注册一个全局自定义指令'v-focus' 
    //focus为指令名称  调用时加v-
    Vue.directive('focus'{
        //当被绑定非的元素插入到DOM中时调用
    	inserted:function(el){
    	//获取元素的焦点
    	el.focus()
    	}
    })
    
  • 3.自定义指令用法

  • <input type="text" v-focus>
    
  • 一个指令定义对象可以提供如下几个钩子函数(均为可选):

    指令钩子函数会被传入以下参数:

    e1:指令所绑定的元素,可以用来直接操作DOM.

    binding:一个对象,包含以下属性:

  • //03-自定义指令基本用法.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    
    <body>
      <li id="app">
        <input type="text" v-focus>
        <input type="text">
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        Vue.directive('focus', {
          inserted: function (el) {
            // el表示指令所绑定的元素
            el.focus();
          }
        });
        var vm = new Vue({
          el: '#app',
          data: {
    
          },
          methods: {
            handle: function () {
    
            }
          }
        });
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    4.带参数的自定义指令(改变元素背景色)

  • Vue.directive('color',{
    	inserted:function(el,binding){
    		el.style.backgroundColor =binding.value.color;
    	}
    })
    
  • 5.指令的用法

  • <input type="text" v-color='{color:'orange'}'>
    
  • //04-带参数的自定义指令.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    
    <body>
      <li id="app">
        <input type="text" v-color='msg'>
      </li>
      <script type='text/javascript' src='js/vue.js'></script>
      <script type='text/javascript'>
        Vue.directive('color', {
          bind: function (el, binding) {
            //根据指令的参数设置背景色
            el.style.backgroundColor = binding.value.color
          }
        });
        const app = new Vue({
          el: "#app",
          data: {
            msg: {
              color: 'pink'
            }
          },
          methods: {}
        })
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    6.局部指令:只能在本组件中使用

  • directives:{
    	focus:{
    	//指令的定义
    	inserted:function(el){
    	el.focus()
    		}
    	}
    }
    
  • <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <li id="app">
        <input type="text" v-color='msg'>
        <input type="text" v-focus>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            msg: {
              color: 'red'
            }
          },
          methods: {
            handle: function(){
              
            }
          },
          directives: {
            color: {
              bind: function(el, binding){
                el.style.backgroundColor = binding.value.color;
              }
            },
            focus: {
              inserted: function(el) {
                el.focus();
              }
            }
          }
        });
      </script>
    </body>
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    5.4 计算属性

    1.为何需要计算属性?

    Vue中的computed属性被称为计算属性,计算属性是写在实例的computed选项

    表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简介

    2.计算属性的用法

  • computed: {
            reverseString: function(){
              return this.msg.split('').reverse().join('');
            }
     }
    
  • //06-计算属性基本用法.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    
    <body>
      <li id="app">
        <li>{{msg}}</li>
        <li>{{reverseString}}</li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            msg: 'nihao'
          },
          computed: {
            reverseString: function () {
                //return不要忘记
              return this.msg.split('').reverse().join('');
            }
          }
        });
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    3.计算属性和方法的区别

  • //07-计算属性与方法的区别.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    
    <body>
      <li id="app">
        <li>{{reverseString}}</li>
        <li>{{reverseString}}</li>
        <li>{{reverseMessage()}}</li>
        <li>{{reverseMessage()}}</li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            msg: 'Nihao',
            num: 100
          },
          methods: {
            reverseMessage: function () {
              console.log('methods')
              return this.msg.split('').reverse().join('');
            }
          },
          computed: {
            reverseString: function () {
              console.log('computed')
              return this.msg.split('').reverse().join('');
            }
          }
        });
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    5.5 侦听器

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    1. 侦听器的应用场景

    数据变化时执行异步或开销较大(比较耗时)的操作

    2.侦听器的用法

  • watch: {
            firstName: function (val) {
              this.fullName = val + ' ' + this.lastName;
            },
            LastName: function (val) {
              this.fullName = this.firstName + ' ' + val;
            },
        }
    
  • //08-侦听器基本用法.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    
    <body>
      <li id="app">
        <li>
          <span>名:</span>
          <span>
            <input type="text" v-model='firstName'>
          </span>
        </li>
        <li>
          <span>姓:</span>
          <span>
            <input type="text" v-model='lastName'>
          </span>
        </li>
        <li>{{fullName}}</li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            firstName: 'Jim',
            lastName: 'Green',
            fullName: 'Jin Green'
          },
          watch: {
            firstName: function (val) {
              this.fullName = val + ' ' + this.lastName;
            },
            LastName: function (val) {
              this.fullName = this.firstName + ' ' + val;
            },
          }
        });
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    案例:验证用户名是否可用

    需求:输入框中输入姓名,失去焦点时验证是否存在,如果已经存在,提示从新输入,如果不存在,提示可以用。

    需求分析:

    1. 通过v-model实现数据绑定
    2. 需要提供提示信息
    3. 需要侦听器监听输入信息的变化
    4. 需要修改触发的事件

    侦听器

    1、采用侦听器监听用户名的变化

    2、调用后台接口进行验证

    3、根据验证的结果调整提示信息

  • //09-侦听器案例.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    
    <body>
      <li id="app">
        <li>
          <span>用户名:</span>
          <span>
            <input type="text" v-model.lazy='uname'>
          </span>
          <span>{{tip}}</span>
        </li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            uname: '',
            tip: ''
          },
          methods: {
            checkName: function (uname) {
              //调用接口,但是可以使用定时任务的方式模拟接口调用
              var that = this;
              setTimeout(function () {
                //模拟接口调用
                if (uname == 'admin') {
                  that.tip = '用户名已经存在,请更换一个';
                } else {
                  that.tip = '用户名可以使用'
                }
              }, 1000)
            }
          },
          watch: {
            uname: function (val) {
              //调用后台接口验证用户名的合法性
              this.checkName(val);
              //修改提示信息
              this.tip = '正在验证中...'
            }
          }
        });
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    5.6 过滤器

    1.过滤器的作用是什么?

    格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等

    2.全局过滤器

  • Vue.filter('过滤器名称',function(value){
    //过滤器业务逻辑
    })
    
  • 3.过滤器的使用

  • <li>{{msg |upper}}</li>//upper为过滤器名称
    <li>{{msg |upper | lower}}</li>//级联操作
    <li :id='id | formatId'></li>
    
  • 4.局部过滤器

  • filters:{
    	upper:function(val){
            return val.charAt(0).toUpperCase() + val.slice(1);
    	}
    }
    
  • //10-过滤器基本用法.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    
    <body>
      <li id="app">
        <input type="text" v-model='msg'>
        <li>{{msg | upper}}</li>
        <li>{{msg | upper | lower}}</li>
        <li :abc='msg | upper'>测试数据</li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        Vue.filter('lower', function (val) {
          return val.charAt(0).toLowerCase() + val.slice(1);
        });
        var vm = new Vue({
          el: '#app',
          data: {
            msg: ''
          },
          filters: {
            upper: function (val) {
              //拿到首字母将其变成大写,然后和后面的字母拼接
              return val.charAt(0).toUpperCase() + val.slice(1);
            }
          }
        });
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    5.带参数的过滤器

  • Vue.filter('format',function(value,arg){
    	//从arg开始接收参数
    })
    
  • 6.过滤器的使用

  • <li>{{data | format('yyyy-MM-dd')}}</li>
    
  • 案例:使用过滤器格式化时期

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

  • //10-过滤器基本用法.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <li id="app">
        <li>{{date | format('yyyy-MM-dd hh:mm:ss')}}</li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        Vue.filter('format', function(value, arg) {
          function dateFormat(date, format) {
              if (typeof date === "string") {
                  var mts = date.match(/(\/Date\((\d+)\)\/)/);
                  if (mts && mts.length >= 3) {
                      date = parseInt(mts[2]);
                  }
              }
              date = new Date(date);
              if (!date || date.toUTCString() == "Invalid Date") {
                  return "";
              }
              var map = {
                  "M": date.getMonth() + 1, //月份 
                  "d": date.getDate(), //日 
                  "h": date.getHours(), //小时 
                  "m": date.getMinutes(), //分 
                  "s": date.getSeconds(), //秒 
                  "q": Math.floor((date.getMonth() + 3) / 3), //季度 
                  "S": date.getMilliseconds() //毫秒 
              };
    
              format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                  var v = map[t];
                  if (v !== undefined) {
                      if (all.length > 1) {
                          v = '0' + v;
                          v = v.substr(v.length - 2);
                      }
                      return v;
                  } else if (t === 'y') {
                      return (date.getFullYear() + '').substr(4 - all.length);
                  }
                  return all;
              });
              return format;
          }
          return dateFormat(value, arg);
        })
        var vm = new Vue({
          el: '#app',
          data: {
            date: new Date()
          }
        });
      </script>
    </body>
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    5.7 Vue生命周期

    生命周期:事物从诞生到消亡的整个过程

    vue的生命周期:每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是.beforeCreate()创建之前

    生命周期钩子:就是可以让你在页面生成的不同阶段执行动作的api,作用就是只要页面到了这个阶段就会触发这个对应钩子里的js

    1.主要阶段

    挂载(初始化相关属性)

    beforeCreatecreatedbeforeMountmounted

    更新(元素或组件的变更操作)

    beforeUpdateupdated

    销毁(销毁相关属性)

    beforeDestroydestroyed

    2.Vue实例的产生过程

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-biZCGRVM-1620742265770)(Vue全家桶之Vue基础.assets/5.15.jpg" alt="vuejs全家桶入门教程交流(Vue全家桶入门基础教程)" border="0" />

    6.综合案例:图书管理

    案例:图书管理

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    案例:补充知识

    1.数组相关API:变异方法(修改数组)

    2.数组相关API:替换数组(生成新的数组)

    3.数组响应式变化:修改响应数据

    参数一表示要处理的数组名称
    参数二表示要处理的数组的索引/对象的属性名
    参数三表示要处理的数组的值

    1.图书列表

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    2.添加图书

    3.修改图书

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    4.删除图书

    删除按钮绑定事件处理方法

    实现删除业务逻辑

    vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    5.常用特性应用场景

    过滤器(格式化日期)自定义指令(获取表单焦点)计算属性(统计图书总数)侦听器(验证图书存在性)生命周期(图书数据处理)

  • <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <!-- css样式 -->
      <style type="text/css">
        .grid {
          margin: auto;
          width: 530px;
          text-align: center;
        }
    
        .grid table {
          border-top: 1px solid #C2D89A;
          width: 100%;
          border-collapse: collapse;
        }
    
        .grid th,
        td {
          padding: 10;
          border: 1px dashed #F3DCAB;
          height: 35px;
          line-height: 35px;
        }
    
        .grid th {
          background-color: #F3DCAB;
        }
    
        .grid .book {
          padding-bottom: 10px;
          padding-top: 5px;
          background-color: #F3DCAB;
        }
    
        .grid .total {
          height: 30px;
          line-height: 30px;
          background-color: #F3DCAB;
          border-top: 1px solid #C2D89A;
        }
      </style>
    </head>
    
    <body>
      <li id="app">
        <li class="grid">
          <li>
            <h1>图书管理</h1>
            <!--二、添加图书 -->
            <li class="book">
              <li>
                <!-- 2.1添加图书表单域数据绑定 -->
                <label for="id">
                  编号:
                </label>
                <input type="text" id="id" v-model='id' :disabled="flag" v-focus>
                <label for="name">
                  名称:
                </label>
                <input type="text" id="name" v-model='name'>
                <!--2.2添加按钮事件绑定 -->
                <button @click='handle' :disabled="submitFlag">提交</button>
              </li>
            </li>
          </li>
          <li class="total">
            <span>图书总数:</span>
            <span>{{total}}</span>
          </li>
          <!-- 一、图书列表 -->
          <table>
            <thead>
              <tr>
                <th>编号</th>
                <th>名称</th>
                <th>时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <!-- 1.1基于数据实现模板效果 -->
              <tr :key='item.id' v-for='item in books'>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <!-- 调用日期格式化过滤器 -->
                <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
                <td>
                  <!-- 1.2处理按钮操作:禁止标签跳转 -->
                  <!-- 三、修改图书 -->
                  <!-- 3.1修改按钮绑定事件处理方法 -->
                  <a href="" @click.prevent='toEdit(item.id)'>修改</a>
                  <span>|</span>
                  <!-- 四、删除图书 -->
                  <!-- 4.1删除按钮绑定事件处理方法 -->
                  <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
                </td>
              </tr>
            </tbody>
          </table>
        </li>
      </li>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        // 六、自定义指令(获取表单焦点)
        Vue.directive('focus', {
          inserted: function (el) {
            el.focus();
          }
        });
        // 五、过滤器(格式化日期)
        Vue.filter('format', function (value, arg) {
          function dateFormat(date, format) {
            if (typeof date === "string") {
              var mts = date.match(/(\/Date\((\d+)\)\/)/);
              if (mts && mts.length >= 3) {
                date = parseInt(mts[2]);
              }
            }
            date = new Date(date);
            if (!date || date.toUTCString() == "Invalid Date") {
              return "";
            }
            var map = {
              "M": date.getMonth() + 1, //月份 
              "d": date.getDate(), //日 
              "h": date.getHours(), //小时 
              "m": date.getMinutes(), //分 
              "s": date.getSeconds(), //秒 
              "q": Math.floor((date.getMonth() + 3) / 3), //季度 
              "S": date.getMilliseconds() //毫秒 
            };
            format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
              var v = map[t];
              if (v !== undefined) {
                if (all.length > 1) {
                  v = '0' + v;
                  v = v.substr(v.length - 2);
                }
                return v;
              } else if (t === 'y') {
                return (date.getFullYear() + '').substr(4 - all.length);
              }
              return all;
            });
            return format;
          }
          return dateFormat(value, arg);
        })
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false,
            submitFlag: false,
            id: '',
            name: '',
            books: []
          },
          methods: {
            handle: function () {
              if (this.flag) {
                // 3.3修改后重新提交表单
                // 就是根据当前的ID去更新数组中对应的数据
                this.books.some((item) => {
                  if (item.id == this.id) {
                    item.name = this.name;
                    // 完成更新操作之后,需要终止循环
                    return true;
                  }
                });
                //重新提交表单之后把ID放开
                this.flag = false;
              } else {
                // 2.3实现添加业务逻辑
                // 添加图书
                var book = {};
                book.id = this.id;
                book.name = this.name;
                book.date = 2525609975000;
                this.books.push(book);
              }
              // 表单提交后清空表单
              this.id = '';
              this.name = '';
            },
            // 3.2修改按钮事件处理方法
            toEdit: function (id) {
              // 禁止修改ID 根据ID修改数据,一旦改变就无法确认更改那条数据
              this.flag = true;
              console.log(id)
              // 根据ID查询出要编辑的数据
              var book = this.books.filter(function (item) {
                return item.id == id;
              });
              console.log(book)
              // 把获取到的信息填充到表单
              this.id = book[0].id;
              this.name = book[0].name;
            },
            // 4.2删除按钮事件处理方法
            deleteBook: function (id) {
              // 根据id从数组中查找元素的索引
              var index = this.books.findIndex(function (item) {
                return item.id == id;
              });
              // 根据索引删除数组元素 
              // index删除元素的索引 1为删除个数
              this.books.splice(index, 1);
            }
          },
          // 七、计算属性(统计图书总数)
          computed: {
            total: function () {
              return this.books.length;
            }
          },
          // 八、侦听器(验证图书存在性)
          watch: {
            name: function (val) {
              // 验证图书名称是否已经存在
              //some()判断数组中有无满足数据
              var flag = this.books.some(function (item) {
                return item.name == val;
              });
              if (flag) {
                // 图书名称存在 禁用提交按钮
                this.submitFlag = true;
              } else {
                // 图书名称不存在 放开提交按钮,可以提交
                this.submitFlag = false;
              }
            }
          },
          // 九、生命周期(图书数据处理)
          mounted: function () {
            // 该生命周期钩子函数被触发的时候,模板已经可以使用
            // 一般此时用于获取后台数据,然后把数据填充到模板
            var data = [{
              id: 1,
              name: '三国演义',
              date: 2525609975000
            }, {
              id: 2,
              name: '水浒传',
              date: 2525609975000
            }, {
              id: 3,
              name: '红楼梦',
              date: 2525609975000
            }, {
              id: 4,
              name: '西游记',
              date: 2525609975000
            }];
            this.books = data;
          }
        });
      </script>
    </body>
    
    </html>
    
  • vuejs全家桶入门教程交流(Vue全家桶入门基础教程)

    以上就是Vue全家桶入门基础教程的详细内容,更多关于Vue全家桶入门的资料请关注开心学习网其它相关文章!

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐