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

时间:2021-10-17 20:41:45

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+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

过滤器

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>

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

在输入框输入的同时,{{ 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>

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

复选框:

复选框也是分单独使用和组合使用,不过用法稍与单选不同,复选框单独使用时也是用 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>

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

选择列表:

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

    <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>

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

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