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

前言

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

Vue实例与数据绑定

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

var app = new Vue({

    el: '#app', //el指定一个页面中已存在的DOM元素来挂载VUE实例

    data() {

          return {

             name: ''

         };

    }

})

Vue.js生命周期

每个框架都有它的生命周期，每个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>

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

过滤器

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

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()调用的时候（）可以省略。关于箭头函数，作用域不同，根据实际需求选择使用它。

<!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实例的数据，其中一个数据变化，计算属性会重新被执行。

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 事件，可以阻止事件冒泡或者阻止链接打开。

写一个阻止冒泡的例子：

    <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