Vue.js+vue-element搭建属于本身的后台管理模板：Vue.js快速入门（二）

时间 2019-11-14

标签 vue.js+vue vue element 搭建属于本身后台管理模板 vue.js 快速入门栏目 JavaScript 繁體版

原文原文链接

Vue.js+vue-element搭建属于本身的后台管理模板：Vue.js快速入门（二）

前言

上篇文章对Vue.js有了初步理解，接下来咱们把Vue.js基础语法快速的过一遍，先混个脸熟留个印象就好。Vue.js基础主要包括，生命周期，数据绑定，过滤器，方法，计算属性，内置指令，组件，自定义指令，Render函数。css

Vue实例与数据绑定

经过构造函数Vue就能够建立一个Vue的根实例，el挂载DOM对象，data绑定数据，页面文本中经过插值显示data数据，插值方式为{{}}双大括号，如<div>{{ name }}</div>。Vue实例中data数据就是Model它默认就是双向绑定的，咱们经过维护data数据来能够实时改变视图展现内容。注意：若是有些数据改变不影响视图的变量，尽可能不要在data中定义它，由于这样会增长效率问题。html

var app = new Vue({
    el: '#app', //el指定一个页面中已存在的DOM元素来挂载VUE实例
    data() {
          return {
             name: ''
         };
    }
})

Vue.js生命周期

每一个框架都有它的生命周期，每一个Vue实例建立时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，咱们能够利用这些钩子，在适合的时机执行咱们的业务逻辑。vue

created：实例建立完成后调用，但还没有挂载，$el还不可用。
mounted：el挂载到实例上后调用，通常第一个业务逻辑在这里开始。
beforeDestroy：实例销毁以前调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{ date }}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    date: new Date()
                };
            },
            created: function () { //实例建立完成后调用，但还没有挂载，$el还不可用。
                console.log(this.$el)  //undefined
            },
            mounted: function () { //el挂载到实例上后调用，通常第一个业务逻辑在这里开始。
                var e = this;
                this.timer = setInterval(() => {
                    e.date = new Date();
                }, 1000);
            },
            beforeDestroy: function () { //实例销毁以前调用。
                this.timer && clearInterval(this.timer);
            }
        })
    </script>
</body>
</html>

生命周期图示：（官方提供）webpack

过滤器

Vue.js 支持在{{ }}插值的尾部添加一个管道符“|”，对数据进行过滤，常常用于格式化文本，例如对时间进行格式化处理。过滤器能够串联多个，并且还能够接收参数，默认第一个参数为数据自己。过滤器适用于简单的文本转换，若是要实现复杂的数据变换，应该使用计算属性去处理，计算属性在后面介绍它的用法。web

filters：过滤器选项中建立每一个过滤器，过滤规则是自定义的，例：filterA: function(value){}。
管道符：管道符“|”出如今文本插值后面，进行过滤前面数据，例：{{ data | filterA }}。
串联：过滤器也能够串联，数据后面设定多个过滤器，例：{{ message | filterA | filterB }}。
多个参数：每一个过滤器能够设定多个参数，例：{{ message | filterA('arg1', 'arg2') }}，arg1为过滤器第2个参数，arg2为过滤器第3个参数，由于默认第一个参数为数据自己。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>{{ date | filterA }}</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          date: new Date()
        };
      },
      filters: {
        filterA: (value) => {
          let date = new Date(value),
            y = date.getFullYear(),
            m = date.getMonth() + 1,
            d = date.getDate(),
            hh = date.getHours(),
            mm = date.getMinutes(),
            ss = date.getSeconds();
          var dt = y + '-' + (m > 9 ? m : '0' + m) + '-' + (d > 9 ? d : '0' + d) + ' ' +
            (hh > 9 ? hh : '0' + hh) + ':' + (mm > 9 ? mm : '0' + mm) + ':' + (ss > 9 ? ss : '0' + ss);
          return dt;
        }
      }
    })
  </script>
</body>
</html>

方法

methods 声明全部绑定事件监听器实现的方法，每一个方法以函数形式声明，实例方法内能够直接使用this获取或修改数据，也能够调用其余申明的方法，外部也能够经过实例去调用。下面实例中用到了v-if="show"，这是内置指令后面会详细介绍，@click="hide" 这也是内置指令v-on它是用来绑定事件监听器，@是语法糖，这里主要说明一下方法hide()调用的时候（）能够省略。关于箭头函数，做用域不一样，根据实际需求选择使用它。spring

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="button" value="点击隐藏1" @click="hide">
    <input type="button" value="点击隐藏2" @click="hide2">
    <h1 v-if="show">{{ message }}</h1>
    <h1 v-if="show">{{ getmessage() }}</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          show: true,
          message: 'HelloWord!'
        };
      },
      methods: {
        hide: function(){
          //console.log(this.show);
          this.show = false;
        },
        hide2: ()=>{  //箭头函数做用域不同，经过this没法改变数据。
          console.log(this.show);  // undefined
          this.show = false;
          //app.show =false; //经过实例调用来完成修改数据
        },
        getmessage: function(){
          return this.message; //带返回值方法，能够在插值中输出
        }
      }
    })
  </script>
</body>
</html>

计算属性

computde计算属性，模板内的表达式仅用于简单的运算，复杂的逻辑均可以经过计算属性代替，计算属性是基于它的依赖缓存的，一个计算属性所依赖的数据发生变化时，它才会从新取值。计算属性还能够返回多个Vue实例的数据，其中一个数据变化，计算属性会从新被执行。npm

computde：计算属性选项。
用法：计算属性包含get和set函数，默认不写只触发getter函数来读取。
缓存：计算属性与方法不同地方，它是依赖数据发生变化时才会从新计算，高效率。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="onmode">
        <h1>{{ count }} </h1>
        <h1>{{ cpdate }} </h1>
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    count: 0,
                    date: '',
                    message: 'Hello'
                };
            },
            methods: {
                onmode: function () {
                    this.count++;
                }
            },
            computed: {
                reversedMessage: function () {
                    return this.message.split('').reverse().join('')
                },
                cpdate: function () {
                    //var d = this.count; //当计算属性中依赖属性发生变化时，会被从新计算。
                    this.date = new Date();
                    return this.date;
                }
            }
        })
    </script>
</body>
</html>

内置指令

指令 (Directives) 是带有 v- 前缀的特殊属性，指令是Vue模板中最经常使用的一项功能，它带有前缀v-，主要职责就是当其表达式的值改变时，将某些行为应用到DOM上。数组

v-if：条件渲染指令，动态在DOM内添加或删除DOM元素。
v-else：条件渲染指令，必须跟v-if成对使用。
v-else-if：判断多层条件，必须跟v-if成对使用。
v-show：条件渲染指令，为DOM设置css的style属性，v-show不能在<template>上使用，频繁切换场景中适合使用。
v-text：更新元素的textContent；例如：<span v-text="msg"></span> 等同于 < span>{{msg}} </ span>。
v-html：更新元素的innerHTML；会把标签名也带上。
v-for：循环指令；<li v-for="book in books">{ { book.name } }</li>
v-for：表达式遍历数组时支持一个可选参数做为当前项的索引；<li v-for="(book , index) in books ">{{ index}} - {{book.name })</li>
v-for：表达式遍历对象属性时，有两个可选参数，分别是键名和索引；<li v-for="(value , key , index) in user ">{ { index } } - { { key } } : { { value } }</li>
v-cloak：不须要表达式，这个指令保持在元素上直到关联实例结束编译； v-cloak 是一个解决初始化慢致使页面闪动的最佳实践。
v-once：也是一个不须要表达式的指令，做用是定义它的元素或组件只渲染一次，包括元素或组件的全部子节点。
v-pre：不须要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度。
v-bind：响应并更新DOM特性；例如：v-bind:href v-bind:class v-bind:title 等等。语法糖："v-bind:” 能够用"："代替。
v-on：用于监听DOM事件；例如：v-on:click v-on:keyup。语法糖：“v-on:”能够用“@”代替。
v-model：数据双向绑定；用于表单输入等；例如：< input v-model= "message">。v-model也是一个特殊的语法糖，使用@input来替代v-model。

方法与事件：缓存

Vue 提供了一个特殊变量$event ，用于访问原生DOM 事件，能够阻止事件冒泡或者阻止连接打开。app

写一个阻止冒泡的例子：

    <div @click="stopClick1('stop1',$event)">
      <div @click="stopClick2('stop2',$event)">
        <div @click="stopClick3('stop3',$event)">阻止冒泡</div>
      </div>
    </div>
 
methods:{
    stopClick3: function(message, event){
      console.log(message);
      event.stopPropagation();  //阻止冒泡
    },
    stopClick2: function(message, event){
      console.log(message);
    },
    stopClick1: function(message, event){
      console.log(message);
    }
}

修饰符：
在＠绑定的事件后加小圆点“．”，再跟一个后缀来使用修饰符。
上面的阻止冒泡事件，能够直接用户修饰符的方式写为：

<div @click.stop="stopClick3('stop3')">阻止冒泡</div>　　//不用经过$event事件再来写了

经常使用的一些修饰符有：.stop、.prevent、.capture、.self、once，修饰符能够串联使用。

<!--阻止单击事件冒泡-->
<a @click.stop="handle"></a>
<!--修饰符能够串联-->
<a @click.stop.prevent="handle"></a>
<!--添加事件侦听器时使用事件捕获模式-->
<div @click.capture="handle"> ... </div>
<!--只当事件在该元素自己（而不是子元素） 触发时触发回调-->
<div @click.self="handle"> ... </div>
<!--只触发一次，组件一样适用-->
<div @click.once="handle"> ... </div>

数组更新：
当咱们修改数组时， Vue 会检测到数据变化，因此用v-for 渲染的视图也会当即更新。

push()
pop()
shift()
unshit()
splice()
sort()
reverse()

以上方法会改变被这些方法调用的原始数组，也有些方法不会改变原数组，它们返回的是一个新数组，在使用这些非变异的方法时，能够用新数组来替换原数组，相同的元素不会从新渲染。

例如：

filter()
concat()
slice()

app.books = app.books.filter(function(item){
  return item.name.match(/JavaScript/);
});

过滤与排序：

当你不想改变原数组，想经过一个数组的副原本作过滤或排序显示时，可使用计算属性来返回过滤或排序后的数组。

表单与v-model

表单控件在实际业务中较为常见，好比单选、多选、下拉选项、输入框等，用它们能够完成数据的录入、校验、提交等，上面内置指令中提到了v-model指令，用于在表单类元素上双向绑定数据，能够将输入的内容实时映射到绑定的数据上。

备注：v-model 也有修饰符，用于控制数据同步的时机，如：使用修饰符.lazy 会转变为在change事件中同步；使用修饰符.number 能够将输入转换为Number类型；使用修饰符.trim 能够自动过滤输入的首尾空格。

输入框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message" placeholder="输入...">
        <p>输入的内容是：{{ message }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        })
    </script>
</body>
</html>

在输入框输入的同时，{{ message }} 也会实时将内容渲染在视图中。

单选按钮：

单选按钮在单独使用时，不须要 v-model，直接使用 v-bind 绑定一个布尔值类型的值，为真时选中，为否时不选。

<div id="app">
        <input type="radio" :checked="picked">
        <label>单选按钮</label>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                picked: true
            }
        })
    </script>

若是是组合使用来实现互斥选择的效果，就须要 v-model 配合 value 来使用。

<div id="app">
        <input type="radio" v-model="picked" value="html" id="html"><label for="html">HTML</label>
        <input type="radio" v-model="picked" value="js" id="js"><label for="js">JavaScript</label>
        <input type="radio" v-model="picked" value="css" id="css"><label for="css">CSS</label>
        <br>
        <p>选择的项是：{{ picked }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                picked: 'js'
            }
        })
    </script>

复选框：

复选框也是分单独使用和组合使用，不过用法稍与单选不一样，复选框单独使用时也是用 v-model 来绑定一个布尔值。

   <div id="app">
        <input type="checkbox" v-model="checked" id="checked">
        <label for="checked">选择状态：{{ checked }}</label>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                checked: false
            }
        })
    </script>

组合使用时，也是 v-model 与 value 一块儿，多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中，就会选择这一项。

    <div id="app">
        <input type="checkbox" v-model="checked" value="html" id="html"><label for="html">HTML</label>
        <br>
        <input type="checkbox" v-model="checked" value="js" id="js"><label for="js">JavaScript</label>
        <br>
        <input type="checkbox" v-model="checked" value="css" id="css"><label for="css">CSS</label>
        <br>
        <p>选择的项是：{{ checked }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                checked: ['html','css']
            }
        })
    </script>

选择列表：

选择列表就是下拉选择器，一样也是分为单选和多选方式。

    <div id="app">
        <select v-model="selected">
            <option>HTML</option>
            <option value="js">JavaScript</option>
            <option>CSS</option>
        </select>
        <p>选择的项是：{{ selected }}</p>

        <select v-model="selected2" multiple>
            <option value="html">HTML</option>
            <option value="js">JavaScript</option>
            <option value="css">CSS</option>
        </select>
        <p>选择的项是：{{ selected2 }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                selected: 'HTML',
                selected2: ['html','js']
            }
        })
    </script>

Class 与 Style 绑定

对于数据绑定，一个常见的需求是操做元素的class样式列表和它的内联样式。咱们能够用v-bind绑定元素属性，表达式的结果类型能够是字符串，也能够是对象或数组，v-bind:class 指令也能够与普通的 class 属性共存。

表达式为对象时：

<div id='example' class="h12" :class="{'active':isActive,'error':isError}"></div>
var vm = new Vue({
  el: '#example',
  data: {
    isActive: true,
    isError: false
  }
})

渲染为：

<div id='example' class="h12 active"></div>

以上例子普通class绑定h12样式，经过v-bind:class绑定的表达式为对象，渲染结果中h12样式永远存在，当数据isActive和isError变化时，为true的对应的class样式被添加到class列表中。

咱们也能够直接绑定数据中的一个对象，代码示例以下：

<div id='example' class="h12" :class="container"></div>
var vm = new Vue({
  el: '#example',
  data: {
    container：{
      'active': true,
      'error': false
    }
  }
})

固然除了绑定数据外，咱们也能够直接绑定计算属性使用，处理更复杂的业务逻辑，不过在项目中不多用到。

表达式为数组时：

<div id='example' :class="[active, error]"></div>
var vm = new Vue({
  el: '#example',
  data: {
    active: 'active',
    error: 'error',
    isError: true
  }
})

渲染为：

<div id='example' class="active error"></div>

若是想根据条件切换列表中的class，则能够用三元表达式，代码示例以下：

<div id='example' :class="[active, isError ? error : '']"></div>

绑定内联样式：

v-bind:style的表达式能够绑定对象，也能够是数组，CSS属性名能够用驼峰命名式(camelCase)或短横分隔命名式(kebab-case)，代码示例以下：

<div id='example' :style="{'color':color,'fontSize':fontSize+'px'}">样式</div>
var vm = new Vue({
  el: '#example',
  data: {
    color: 'orange',
    fontSize: 13
  }
})

渲染为：

<div style="color: orange; font-size: 13px;">样式</div>

一般直接绑定到一个样式对象更好，让模板更清晰，代码示例以下：

<div id='example' :style="ddfe">样式</div>
var vm = new Vue({
  el: '#example',
  data: {
    ddfe: {
      color: 'orange',
      fontSize: 13
    }
  }
})

v-bind:style 的数组语法能够将多个样式对象应用到一个元素上，代码示例以下：

<div id='example' :style="[ddfe, ddcolor]">样式</div>

目录导航

参考资料

Vue.js