收集表单数据:

​ 若:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。

​ 若:<input type="radio"/>,则v-model收集的是value值,且要给标签配置value值。

​ 若:<input type="checkbox"/>

​ 1.没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)

​ 2.配置input的value属性:

​ (1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)

(2)v-model的初始值是数组,那么收集的的就是value组成的数组

​ 备注:v-model的三个修饰符:

​ lazy:失去焦点再收集数据

​ number:输入字符串转为有效的数字

​ trim:输入首尾空格过滤

过滤器

局部过滤器

1
2
3
4
5
6
filters:{
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
// console.log('@',value)
return dayjs(value).format(str)
}
}

全局过滤器

1
2
3
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})

内置指令

已学

​ ~~ v-bind : 单向绑定解析表达式, 可简写为 :xxx

​ v-model : 双向数据绑定

​ v-for : 遍历数组/对象/字符串

​ v-on : 绑定事件监听, 可简写为@

​ v-if : 条件渲染(动态控制节点是否存存在)

​ v-else : 条件渲染(动态控制节点是否存存在)

​ v-show : 条件渲染 (动态控制节点是否展示)~~

v-text

​ v-text指令:

​ 1.作用:向其所在的节点中渲染文本内容。

​ 2.与插值语法的区别:v-text会替换掉节点中的内容,则不会。

v-html

​ v-html指令:

​ 1.作用:向指定节点中渲染包含html结构的内容。

​ 2.与插值语法的区别:

​ (1).v-html会替换掉节点中所有的内容,则不会。

​ (2).v-html可以识别html结构。

​ 3.严重注意:v-html有安全性问题!!!!

​ (1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。

​ (2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!

v-clock

​ v-cloak指令(没有值):

​ 1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。

​ 2.使用css配合v-cloak可以解决网速慢时页面展示出的问题。

1
2
3
4
5
<style>
[v-cloak]{
display:none;
}
</style>

v-once

​ v-once指令:

​ 1.v-once所在节点在初次动态渲染后,就视为静态内容了。

​ 2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。

v-pre

v-pre指令:

​ 1.跳过其所在节点的编译过程。

​ 2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。

自定义指令

​ 需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。

1
2
3
4
big(element,binding){
console.log('big',this) //注意此处的this是window
// console.log('big')
element.innerText = binding.value * 10

​ 需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
fbind:{
//指令与元素成功绑定时(一上来)
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}

​ 自定义指令总结:

​ 一、定义语法:

​ (1).局部指令:

​ new Vue({ new Vue({

​ directives:{指令名:配置对象} 或 directives{指令名:回调函数}

​ }) })

​ (2).全局指令:

​ Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

​ 二、配置对象中常用的3个回调:

​ (1).bind:指令与元素成功绑定时调用。

​ (2).inserted:指令所在元素被插入页面时调用。

​ (3).update:指令所在模板结构被重新解析时调用。

​ 三、备注:

​ 1.指令定义时不加v-,但使用时要加v-;

​ 2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。

定义全局指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//定义全局指令
Vue.directive('fbind',{
//指令与元素成功绑定时(一上来)
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
})

vue生命周期

​ 生命周期:

​ 1.又名:生命周期回调函数、生命周期函数、生命周期钩子。

​ 2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。

​ 3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。

​ 4.生命周期函数中的this指向是vm 或 组件实例对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log('mounted')
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy')
},
destroyed() {
console.log('destroyed')
},

生命周期

组件

组件就是一块砖,哪里需要往哪搬。

​ Vue中使用组件的三大步骤:

​ 一、定义组件(创建组件)

​ 二、注册组件

​ 三、使用组件(写组件标签)

​ 一、如何定义一个组件?

​ 使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;

​ 区别如下:

​ 1.el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。

​ 2.data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。

​ 备注:使用template可以配置组件结构。

​ 二、如何注册组件?

​ 1.局部注册:靠new Vue的时候传入components选项

​ 2.全局注册:靠Vue.component(‘组件名’,组件)

​ 三、编写组件标签:

<school></school>

非单文件组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const school = Vue.extend({
template:`
<div>
<h2>{{schname}}</h2>
<h2>{{schaddress}}</h2>
</div>`,
data(){
return{
schname:'ynnubs',
schaddress:'五华区商院路'
}

}
})

​ 几个注意点:

​ 1.关于组件名:

​ 一个单词组成:

​ 第一种写法(首字母小写):school

​ 第二种写法(首字母大写):School

​ 多个单词组成:

​ 第一种写法(kebab-case命名):my-school

​ 第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)

​ 备注:

​ (1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。

​ (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

​ 2.关于组件标签:

​ 第一种写法:

​ 第二种写法:

​ 备注:不用使用脚手架时,会导致后续组件不能渲染。

​ 3.一个简写方式:

​ const school = Vue.extend(options) 可简写为:const school = options

VueComponent

​ 关于VueComponent:

​ 1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。

​ 2.我们只需要写,Vue解析时会帮我们创建school组件的实例对象,

​ 即Vue帮我们执行的:new VueComponent(options)。

​ 3.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!

​ 4.关于this指向:

​ (1).组件配置中:

​ data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。

​ (2).new Vue(options)配置中:

​ data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

​ 5.VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。

​ Vue的实例对象,以后简称vm。

一个重要的内置关系

​ 1.一个重要的内置关系:VueComponent.prototype.proto === Vue.prototype

​ 2.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。

前言:在JS里,万物皆对象。方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它们都会具有对象共有的特点。

即:对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。

image-20220102155502091

单文件组件

创建School.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<div class="demo">
<h2>{{schname}}</h2>
<h2>{{schaddress}}</h2>
</div>
</template>
<script>
export default ({
name:School,
data(){
return{
schname:'ynnubs',
schaddress:'五华区商院路'
}

}
})
</script>

创建App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div>
<School><School>
</div>
</template>

<script>
import School from './School.vue'
export default {
name:'app',
components:{
School
}
}
</script>

<style>

</style>

创建main.js

1
2
3
4
5
6
import App from './App.vue'
new Vue({
el:'#root',
template:`<App></App>`,
components:{App}
})

创建a.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">

</div>
<script src="../js/vue.js"></script>
<script src="./main.js"></script>
</body>
</html>