Vue学习记录
Vue学习记录
文章目录
- Vue学习记录
- 初识VUE
- 模板语法
- 数据绑定
- el与data的两种写法
-
- el的写法
- data的两种写法
- 理解MVVM
- 数据代理
-
- Object.defineProperty()方法
- 数据代理
- vue中的数据代理
- 事件处理
-
- 事件基本处理
- 事件修饰符
- 键盘事件
- 计算属性
-
- 插值语法
- methods方法
- 计算属性
- 监视事件
-
- 天气案例
- 监视属性
-
- 深度监视
- 监视简写
- 计算属性和监视属性的差别
- 条件渲染
- 列表渲染
-
- key的作用和原理
- 列表过滤
- 列表排序
- vue监视数据
- 收集表单数据
- 其他内置指令
-
- v-text
- v-html
- v-cloak
- v-once
- v-pre
- 自定义指令
-
- 函数式指令
- 对象式
- 自定义指令总结
- 生命周期
-
- 生命周期钩子
- 组件化编程
-
- 组件的理解
- 非单文件组件
- 组件的嵌套
- 组件的小结
- 单文件组件
初识VUE
- 想让vue工作，必须创建一个vue实例，并且传入配置对象
- 容器内的代码符合html规范，只不过有一些特殊的vue语法，类似Django
- root容器内的代码称为vue模板
- vue实例和容器是一一对应的
- 真实开发中只有一个vue实例，并且会配合组件一起使用
- {{xxx}}表达式中的xxx要写js表达式，能自动读取到data中的所有属性，注意区分js表达式和js代码
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>初识vuetitle>
<script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
<h1>hello {{ name }}h1>
div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue(
{
el: '#root',
data: {name:'黄12'},
}
);
script>
body>
html>
模板语法
- 插值语法
- 用于解析标签体内容
- 写法：{{}}
- 指令语法，v-bind:
- 用于解析标签（标签属性、标签体内容、绑定事件等）
- vue中有很多指令，形式都是v-???
- 语法v-xxx:属性名（事件名）=‘vue变量或函数’
- 简写:属性名（事件名）=‘vue变量或函数’
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<h1>插值语法h1>
<h3>welcome, {{name}}h3>
<hr/>
<h1>指令语法h1>
<a v-bind:href="url">点我去{{school.name}}学习1a>
<a v-bind:href="url">点我去{{school.address}}学习2a>
div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue(
{
el: '#root',
data: {
name: 'jack',
url: 'http://www.w3.org',
school: {
name: 'zhuhe',
address: 'jianli',
}
},
}
)
script>
body>
html>
数据绑定
vue中的两种数据绑定方式
- 单向绑定v-bind，绑定的是属性名，比如value、name、class等等数据只能从data流向页面，可简写成:value
- 双向绑定v-model，data和页面双向流动
- 双向绑定只能用于表单类元素中，如input select textarea等
- v-model:value可简写成v-model，因为v-model就是为value而生
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据绑定title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<p>
单向数据绑定：<input type="text" name="dan" :value="name">
p>
<p>
双向数据绑定：<input type="text" name="dan" v-model:value="name">
p>
<h2 v-model:xhr="name">helloh2>
div>
<script type="text/javascript">
Vue.productionTip = false;
new Vue(
{
el: document.getElementById('root'),
data: {
name: 'huangg&zhuli',
}
}
)
script>
body>
html>
el与data的两种写法
el的写法
- 在vue对象中写一个键值对
- 实例化一个vue对象v，然后修改v的原型对象属性值$mount，将属性挂载到标签上去
data的两种写法
- 对象式
- 函数式，必须要return
以后学习组件，只能用函数式，否则报错
另外，由vue管理的函数，不能写成箭头函数，写成箭头函数，this指向的是Windows对象实例
理解MVVM
M-模型，即数据
V-视图，即模板代码
VM-视图模型，即vue实例
和Django中的MTV几乎一样，数据-模板-视图
数据代理
Object.defineProperty()方法
先要理解一下Object.defineProperty()方法，用于定义对象的属性，有三个参数
- obj，要修改的对象
- ‘x’，要定义的属性
- {}定义的内容，通常要写的属性就在这里，通常会在这里定义两个方法，即get()和set()，get必须返回一个值，也就是定义的属性值，set是修改属性值
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
let age = 19;
let person = {
name: 'hg',
gender: 'female'
};
Object.defineProperty(person, 'age', {
// value: 18,
// enumerable: true, // 控制属性是否可以枚举，默认false
// writable:true, // 控制属性是否可以修改，默认false
// configurable: true, // 控制属性是否可以删除，默认false
get() {
console.log('someone call the get！！！')
return age
},
set(value){
console.log('someone correct the age, and value is ' + value +'!!!');
age = value;
}
});
console.log(person);
script>
body>
html>
数据代理
定义：通过一个对象代理对另一个对象中的属性的操作，主要是读和写
使用Object.defineProperty()方法，通过get和set方法来实现
vue中的数据代理
- Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写) - Vue中数据代理的好处:
更加方便的操作data中的数据 - 基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1hlTK4hq-1652958943839)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220516150109912.png)]
事件处理
事件基本处理
事件的基本使用:
- 使用v-on:xxx或 @xxx绑定事件，其中xxx是事件名;
- 事件的回调需要配置在methods对象中，最终会在vm上:
- methods中配置的函数，不要用箭头函数!否则this就不是vm了;
- methods中心置的函数，都是被Vue所管理的再数，this的指向是vm 或 组件实例对象
- @click="demo"和 @click="demo($event)”效果一致，但后者可以传参;
代码示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理title>
<script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
<h2>welcome to {{name}} for learningh2>
<p>
<button v-on:click="showInfo">点我一下button>
p>
<p>
<button onclick="alert('~~~')">点我一下2button>
p>
<p>
<button @click="showInfo2($event, 666)">点我一下3button>
p>
div>
<script>
Vue.config.productionTip = false;
let vm = new Vue({
el: '#root',
data: {
name: 'hg',
},
methods: {
showInfo() {alert('hello my classmate')},
showInfo2(event, number) {alert('hello my classmate ~~~')},
},
});
// let btn = document.getElementById('btn');
// btn.onclick = function (){alert('hello classmate~')};
script>
body>
html>
事件修饰符
写在@click之后的函数（简写的函数）
vue中的事件修饰符有以下几种：
- prevent:阻止默认事件(常用)
- stop:阻止事件冒泡(常用);
- once:事件只触发一次(常用);
- capture:使用事件的捕获模式;
- self:只有event.target是当前操作的元素是才触发事件;
- passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
做个示例
<body>
<div id="root">
<h2>welcome to {{name}} for learningh2>
<a href="http://www.baidu.com" @click.prevent="showInfo">click to get imformationa>
div>
<script>
Vue.config.productionTip = false;
let vm = new Vue(
{
el:'#root',
data: {name:'zhuhe'},
methods:{
showInfo(){alert('将跳转至百度首页')},
}
}
)
script>
body>
在不添加修饰符prevent时，点击后先alert，然后再跳转，添加修饰符后，默认事件跳转不再执行
键盘事件
-
Vue中常用的按键别名:
回车 => enter
删除 => delete(捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab（特殊，配合keydown）
上=> up
下 => down
左 => left
右 => right
-
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
-
系统修饰键(用法特殊):ctrl、alt、shift、meta
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用:正常触发事件。
-
也可以使用keyCode去指定具体的按键(不推荐)
-
Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
一个示例
<body>
<div id="root">
<h2>welcome to {{name}} for learningh2>
<p>
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
p>
div>
<script>
Vue.config.productionTip = false;
let vm = new Vue(
{
el:'#root',
data: {name:'zhuhe'},
methods:{
showInfo(e){
// if(e.keyCode != 13)return
console.log(e.target.value)
},
}
}
)
script>
回车键调用函数
JavaScript中注释起来的那句代码是通过keycode来识别enter键的
计算属性
以实现姓名联动为例，介绍分别使用插值语法、methods方法和计算属性来实现
最终效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pmDJiq2T-1652958943840)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220517090436860.png)]
插值语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
<p>
姓:<input id="fn" type="text" v-model="firstname">
p>
<p>
名:<input id="ln" type="text" v-model="lastname">
p>
<p>姓名：{{firstname}} - {{lastname}}p>
div>
<script>
Vue.config.productionTip = false;
let fn = document.getElementById('fn').value;
let ln = document.getElementById('ln').value;
console.log(fn);
let vm = new Vue(
{
el: '#root',
data:{
firstname: fn,
lastname: ln,
},
// methods写法
// methods:{
// fullName(){
// console.log('fullName has been called')
// return this.firstname + '-' + this.lastname;
// }
// },
// computed:{
// // 完整写法，写get和set
// // fullName:{
// // get(){
// // return this.firstname + '-' + this.lastname;
// // }
// // }
//
// // 简单写法，不用写get
// fullName(){
// return this.firstname + '-' + this.lastname;
// }
// }
}
);
script>
body>
html>
methods方法
methods方法在上面的代码中已经给出，只是注释起来了
首先，把模板中的 姓名：{{firstname}} - {{lastname}} 姓名：{{fullName()}} ，然后在vue中添加methods属性，属性中添加一个fullName方法，模板中调用这个方法，注意是fullName()
计算属性
同样在上面的代码中给出，即在vue中添加computed属性，完整写法是把get方法写出来，模板中调用的时候写成 姓名：{{fullName}}
还可以简写，当计算属性中只有get方法没有set方法时，可以把fullName属性改写成fullName方法，但是模板中调用的时候还是属性，而非方法，也就是模板中仍然保持不变
监视事件
天气案例
点击按钮，切换天气
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换天气title>
<script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
<h3>今天天气很{{info}}h3>
<button @click="changeWeather">切换天气button>
div>
body>
<script>
Vue.config.productionTip = false;
let vm = new Vue({
el:'#root',
data:{isHot: true},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
}
})
script>
html>
这个简单的案例中，前面很多的知识点都用到了，methods方法，计算属性等等
再次强调：vue中的this一直指向的是实例化的vue对象，也就是代码中的VM，但是如果用箭头函数的话，就会指向外面的window
监视属性
监视属性watch:
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视!!
3.监视的两种写法:
(1).newVue时传入watch配置
(2).通过vm.$watch监视
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换天气—监视对象title>
<script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
<h3>今天天气很{{info}}h3>
<button @click="changeWeather">切换天气—监视对象button>
div>
body>
<script>
Vue.config.productionTip = false;
let vm = new Vue({
el: '#root',
data: {isHot: true},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
// watch: {
// isHot: {
// handler(newVal, oldVal) {
// console.log("isHot has been updated", newVal, oldVal)
// }
// },
//
// },
});
vm.$watch('isHot', {
handler(newVal, oldVal) {
console.log("isHot has been updated", newVal, oldVal)
}
})
script>
html>
监视的对象是vm的属性isHot，也可以监视info方法
vue中的$符号是所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突，必须要写，否则报错
vm.$watch('info', {
handler(newVal, oldVal) {
console.log("info has been updated", newVal, oldVal)
}
上面这段代码是info的监视方法，注意，原始代码中info写的是一个方法，但要说明的是，这是被简写后的写法，完整写法应该是
computed:{
// 完整写法，写get和set
info:{
get(){
return this.this.isHot ? '炎热' : '凉爽';
}
}
本质上，info还是一个属性，所以用引号监视
深度监视
(1).Vue中的watch默认不监测对象内部值的改变(一层)。
(2).配置deep:true可以监测对象内部值改变(多层)。
备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
监视简写
-
watch属性中简写
watch: { // 完整写法 // isHot: { // handler(newVal, oldVal) { // console.log("isHot has been updated", newVal, oldVal) // } // }, // 简写，不需要配置其他属性，比如immediate、deep等属性 isHot(newVal, oldVal){ console.log("isHot has been updated", newVal, oldVal) } } -
vm.$watch中简写
// vm.$watch('isHot', { // handler(newVal, oldVal) { // console.log("isHot has been updated", newVal, oldVal) // } // }); vm.$watch('isHot',function(newVal, oldVal){ console.log("isHot has been updated", newVal, oldVal) })
注意：只有在不需要配置其他属性，比如immediate、deep等属性，才能使用简写，这个和之前的监视属性一样，简写的方法也一样
计算属性和监视属性的差别
computed和watch之间的区别:
- computed能完成的功能，watch都可以完成。
- watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作。两个重要的小原则:
- 所被Vue管理的两数，最好写成普通函数，不要写成箭头函数，这样this的指向才是vm或组件实例对象。
- 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。
条件渲染
-
v-if
写法:
-
v-if=“表达式”
-
v-else-if=“表达式”
-
v-else=“表达式”
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title> <script src="../vue.js">script> head> <body> <div id="box"> <div v-if="type === 'A'"> A div> <div v-else-if="type === 'B'"> B div> <div v-else-if="type === 'C'"> C div> <div v-else> Not A/B/C div> <hr /> <div v-if="type==='A'">ok!!!div> <div v-else>no!!!div> <hr /> <my-form :login-type="loginType">my-form> <button @click="toggleFun">toggle loginTypebutton> div> <script> var MyForm = { //template:"#myForm" props:['loginType'], template:`` } var app = new Vue({ el:'#box',// ().$mount("#box"); data:{ type:'C', loginType:'username' }, components:{ "my-form":MyForm }, methods:{ toggleFun: function() { this.loginType = this.loginType === 'username'? 'email':'username'; } }, created:function (){ } }); script> body> html> -
-
v-show
写法:v-show=“表达式”
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
-
备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
列表渲染
学的好痛苦，直接上代码吧
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染title>
<script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
<ul>
<li v-for="person in persons" :key="person.id">
{{person.name}} - {{ person.age}}
li>
ul>
div>
<script>
Vue.config.productionTip = false;
let vm = new Vue(
{
el: '#root',
data: {
persons: [
{id: '001', name: 'zs', age: 18},
{id: '002', name: 'ls', age: 19},
{id: '003', name: 'ww', age: 20},
]
},
}
)
script>
body>
html>
使用v-for循环，:key动态赋值，且必须是唯一值
key是给节点唯一的标识
key的作用和原理
react、vue中的key有什么作用?(key的内部原理)
-
虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下: -
对比规则:
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key: ①若虚拟DOM中内容没变，直接使用之前的真实DOM!
②若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。（2）旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。
-
用index作为key可能会引发的问题:
- 若对数据进行:逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。
- 如果结构中还包含输入类的DOM:会产生错误DOM更新==> 界面有问题。
-
开发中如何选择key?
- 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
列表过滤
实现一个模糊搜索功能
界面如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KEBC6Yhb-1652958943840)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220518103721656.png)]
通过关键字搜索，页面上展示有关键字的人员信息
上代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表筛选title>
<script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
<h2>人员列表h2>
<p>
<input type="text" placeholder="请输入名字" v-model="keyword">
p>
<ul>
<li v-for="(person, index) in filPersons" :key="person.id">
{{person.name}} - {{ person.age}} - {{person.sex}}
li>
ul>
div>
<script>
Vue.config.productionTip = false;
let vm = new Vue(
{
el: '#root',
data: {
keyword: '',
persons: [
{id: '001', name: '马冬梅', age: 18, sex: '女'},
{id: '002', name: '周冬雨', age: 19, sex: '女'},
{id: '003', name: '周杰伦', age: 20, sex: '男'},
{id: '004', name: '温兆伦', age: 21, sex: '男'},
],
filPersons: [],
},
methods: {},
watch: {
keyword: {
immediate:true,
handler(value) {
this.filPersons = this.persons.filter((p) => {
return p.name.indexOf(value) !== -1
})
}
}
}
}
)
script>
body>
html>
注意使用的是监听方法，监听用在属性发生变化时执行，实现的逻辑过程如下：
-
后台传过来persons数据，这里是前端写好了，需要从这些数据中模糊筛选
-
创建一个搜索的关键字keyword
-
创建一个空的filPersons对象，用来存放模糊筛选结果
-
编写监听方法：
-
搜索框中用v-mode双向绑定属性keyword，只要搜索框中的内容变化，那么keyword也变化
-
监视事件中，监听的是属性keyword，也就是说keyword发生变化的话，将会执行监听方法
-
监听方法可以简写，简写应该写成如下代码：
watch: { keyword(value) { this.filPersons = this.persons.filter((p) => { return p.name.indexOf(value) !== -1 }) } }这里有几个注意事项
-
persons是一个数组，数组的筛选用到了filter()方法
-
indexOf(value)方法用来获取字符value在p.name中的索引，如果不在索引中，则返回-1，所以p.name.indexOf(value) !== -1实际上返回的是一个布尔值
-
回到filter()方法，filter的参数array.filter(function(currentValue, index, arr), thisValue)，解释如下：
- array是需要筛选的数组
- function(currentValue, index, arr)是执行筛选的函数，只有currentValue是必须写的值，示例中也只写了这个值，currentValue是当前元素的值
- filter返回数组中满足条件的数据
-
监听方法将返回到的值写入到filPersons数组中，前端模板中遍历这个数组，然后展示关键字搜索结果
这种写法有个明显的缺陷，就是刚开始的时候，filPersons数组是个空数组，所以前端页面不显示任何列表标签。
有两种解决方法：
（1）将persons中的数据复制给filPersons
（2）不使用简写的监听方法，写完整的监视事件，就是上面写的完整代码，但是添加了一个
immediate:true，它的作用是让监听立即执行，为啥立即执行就能正常呢，因为立即执行的时候，搜索框里面是空值，空值它是在任何字符串中的，使用indexOf返回0，所以就可以了 -
总体来说，非常麻烦，老师提供了一种使用计算属性来实现的方法，相对来说更简单一点，但是我并没有完全理解，就不记录了，上一下代码
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表筛选title> <script src="../js/vue.js" type="text/javascript">script> head> <body> <div id="root"> <h2>人员列表h2> <p> <input type="text" placeholder="请输入名字" v-model="keyword"> p> <ul> <li v-for="(person, index) in filPersons" :key="person.id"> {{person.name}} - {{ person.age}} - {{person.sex}} li> ul> div> <script> Vue.config.productionTip = false; let vm = new Vue( { el: '#root', data: { keyword: '', persons: [ {id: '001', name: '马冬梅', age: 18, sex: '女'}, {id: '002', name: '周冬雨', age: 19, sex: '女'}, {id: '003', name: '周杰伦', age: 20, sex: '男'}, {id: '004', name: '温兆伦', age: 21, sex: '男'}, ], // filPersons: [], }, methods: {}, // watch: { // keyword: { // immediate:true, // handler(value) { // this.filPersons = this.persons.filter((p) => { // return p.name.indexOf(value) !== -1 // }) // } // } // } computed: { filPersons() { return this.persons.filter((p) => { return p.name.indexOf(this.keyword) !== -1 }) } }, } ) script> body> html>ps：后面应该理解了用计算属性，计算属性就是通过计算生成filPersons这个列表，它的get方法就是获取筛选的结果，直接return筛选结果就是把数组对象赋值给了filPersons
-
列表排序
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表排序title>
<script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
<h2>人员列表h2>
<p>
<input type="text" placeholder="请输入名字" v-model="keyword">
<button @click="sortType = 2">年龄升序button>
<button @click="sortType = 1">年龄降序button>
<button @click="sortType = 0">原始顺序button>
p>
<ul>
<li v-for="(person, index) in filPersons" :key="person.id">
{{person.name}} - {{ person.age}} - {{person.sex}}
li>
ul>
div>
<script>
Vue.config.productionTip = false;
let vm = new Vue(
{
el: '#root',
data: {
sortType:0, // 排序类型， 0--原顺序， 1--降序， 2--升序
keyword: '',
persons: [
{id: '001', name: '马冬梅', age: 30, sex: '女'},
{id: '002', name: '周冬雨', age: 38, sex: '女'},
{id: '003', name: '周杰伦', age: 19, sex: '男'},
{id: '004', name: '温兆伦', age: 17, sex: '男'},
],
// filPersons: [],
},
computed: {
filPersons() {
const arr = this.persons.filter((p) => {
return p.name.indexOf(this.keyword) !== -1
})
if(this.sortType){
arr.sort((p1, p2) =>{
return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
})
}
return arr
}
},
}
)
script>
body>
html>
复习几个知识点：
- vue中的事件处理
@click="sortType = 2"表达的意思是点击处理sortType = 2这个事件 - JavaScript中的sort排序方法，参数是排序函数，传参a,b，返回a-b是升序，返回b-a是降序
vue监视数据
Vue监视数据的原理:
1.vue会监视data中所有层次的数据。
2.如何监测对象中的数据?
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API:
Vue.set(target,propertyName/index，value)或 vm.$set(target,propertyName/index，value)
3.如何监测数组中的数据?
通过包裹数组更新元素的方法实现，本质就是做了两件事:
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法:
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set()或vm.$set()
特别注意:Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性!!!
收集表单数据
先上前端界面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E8pbvMkJ-1652958943841)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220518163422469.png)]
上代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>收集表单数据title><script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
<form>
<label for="demo">账号：label>
<input type="text" id="demo" v-model.trim="account">
<p>
密码：
<input type="password" v-model="password">
p>
<p>
性别：
男<input type="radio" name="sex" value="male" v-model="sex">
女<input type="radio" name="sex" value="female" v-model="sex">
p>
<p>
年龄：
<input type="number" v-model.number="age">
p>
<p>
爱好：
学习<input type="checkbox" v-model="hobby" value="study" >
打球<input type="checkbox" v-model="hobby" value="sport">
游戏<input type="checkbox" v-model="hobby" value="play">
p>
<p>
所属校区
<select v-model="city">
<option value="">请选择校区option>
<option value="bj">北京option>
<option value="sh">上海option>
<option value="sz">深圳option>
<option value="wh">武汉option>
select>
p>
<p>
其他信息：
<textarea name="" id="" cols="30" rows="10" v-model="other" placeholder="请在此输入需要补充的内容">textarea>
p>
<p>
<input type="checkbox" checked="true" v-model="agree">阅读并接受用户协议
<a href="">《用户协议》a>
p>
<button @click.prevent="print">提交button>
form>
div>
<script>
Vue.config.productionTip = false;
let vm = new Vue(
{
el:"#root",
data:{
account:'',
password:'',
sex: 'male',
age: 18,
hobby: [],
city:'sh',
other:'',
agree:''
},
methods:{
print(){
console.log(this.$data)
}
}
}
)
script>
body>
html>
总结：
-
若:
，则v-model收集的是value值，用户输入的就是value值。 -
若:
，则v-model收集的是value值，且要给标签配置value值。 -
若:
-
没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
-
配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
-
-
备注——v-model的三个修饰符:
-
lazy:失去焦点再收集数据
-
number:输入字符串转为有效的数字
-
trim:输入首尾空格过滤
-
其他内置指令
现阶段学习过的指令：
- v-bind :单向绑定解析表达式，可简写为:xxx
- v-model :双向数据绑定
- v-for :遍历数组/对象/字符串
- v-on :绑定事件监听，可简写为@
- v-if :条件渲染(动态控制节点是否存存在)
- v-else :条件渲染(动态控制节点是否存存在)
- v-show:条件渲染(动态控制节点是否展示)
v-text
- 作用:向其所在的节点中渲染文本内容。
- 与插值语法的区别:v-text会替换掉节点中的内容，{{xx}}则不会
<div id="root">
<div>你好，{{name}}div>
<div v-text="name">div>
<div v-text="str">div>
div>
str:
hello
h3>v-text输出的就是上面完整的字符串，不支持DOM文档结构解析
少用v-text，都用插值语法
v-html
支持结构解析
如果把换成则直接输出解析后的hello
1.作用:向指定节点中渲染包含html结构的内容
2.与插值语法的区别:
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。(2).v-html可以识别html结构。
3.严重注意:v-html有安全性问题!!!
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!
v-cloak
v-cloak指令没有值
本质是一个特殊属性，vue实例创建完毕并接管容器后，会删除v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
html代码
<div>
<h2 v-cloak>{{name}}h2>
div>
<script>script>
css样式
[v-cloak]{display:none}
v-once
指令没有值，保持原始值不更新，初次动态渲染后，视为静态内容，后续的数据改变不影响数据的变化
v-pre
添加后不解析任何vue语法，不加也行
自定义指令
函数式指令
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令title>
<script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
<h2>当前n值是：{{n}}h2>
<h2>n放大10倍：<span v-big="n">span>h2>
<button @click="n++">点我n+1button>
div>
<script>
Vue.config.productionTip = false;
let vm = new Vue(
{
el:'#root',
data: {n: 1},
directives:{
big(element, binding){
element.innerHTML = binding.value * 10
}
}
}
)
script>
body>
html>
依然是vm中的属性，添加directives属性，在属性中添加方法，方法的参数有两个
element是绑定的标签元素
binding是一个对象，是绑定的对象，并非n这么简单，有函数名，有调用方式，有值
对象式
上面的函数式只写了一个big函数，写法是不完整的，简单的功能能实现，复杂的会有问题
应该把directives属性中的三个属性写成对象式，分别是
- bind
- inserted
- update
自定义指令总结
需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。自定义指令总结:
一、定义语法:
(1).局部指令: I
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.是什么:Vue在关键时刻帮我们调用的一些特殊名称的的数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期雨数中的this指向是vm或 组件实例对象。
生命周期钩子
总共4对
常用的生命周期钩子:
1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
代码实例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期title>
<script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
<h3 :style="{opacity}">欢迎学习vueh3>
<button @click="stop">点我停止切换button>
div>
<script>
Vue.config.productionTip = false;
let vm = new Vue(
{
el:'#root',
data: {opacity: 1},
methods: {
stop(){
// clearInterval(this.timer)
this.$destroy()
}
},
mounted(){
this.timer = setInterval(()=>{
console.log('setInterval')
this.opacity -= 0.01
if(this.opacity <=0){this.opacity = 1}
}, 20)
},
beforeDestroy(){
console.log('vm即将终止')
clearInterval(this.timer)
},
}
)
script>
body>
html>
组件化编程
组件的理解
组件——实现应用中局部功能代码和资源的集合
非单文件组件
一个文件中包含了多个组件
Vue中使用组件的三大步骤:
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
如何定义一个组件?
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但区别如下:
1.el不要写，为什么? -最终所有的组件都要经过一个vm的管理。由vm中的e1决定服务哪个容器
2.data必须写成函数，为什么? – 避免组件被复用时，数据存在引用关系。备注:使用template可以配置组件结构。
如何注册组件?
1.局部注册:靠new Vue的时候传入components选项
2.全局注册:靠Vue.component(组件名’,组件)
三、编写组件标签:
代码示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
<school>school>
<hr>
<student>student>
<hello>hello>
div>
<div id="root2">
<hello>hello>
div>
<script>
Vue.config.productionTip = false;
// 创建school组件
const school = Vue.extend(
{
data() {
return {
schoolName: 'soochoow universty',
address: 'suzhou'
}
},
template: `
学校名称：{{ schoolName }}
学校地址：{{ address }}
`
}
)
// 创建student组件
const student = Vue.extend(
{
data() {
return {
studentName: 'hg',
age: 18
}
},
template: `
学生姓名：{{studentName}}
学校年龄：{{age}}
`
}
)
// 创建hello组件用于全局注册
const hello = Vue.extend({
template:`
hello, {{name}}全局注册
`,
data(){
return {
name: 'zl'
}
}
})
// 全局注册
Vue.component('hello', hello)
new Vue(
{
el: '#root',
// 注册组件--局部注册
components: {
school: school,
student: student
},
}
)
script>
body>
html>
前端页面展示效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R0E5dUou-1652958943841)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220519123917542.png)]
组件标签和命名的几个注意点
1.关于组件名:
-
一个单词组成:
第一种写法(首字母小写):school
第二种写法(首字母大写):School
-
多个单词组成:
第一种写法(kebab-case命名):my-school
第二种写法(CamelCase命名):MySchool(需要Vue脚手架支持) -
备注:
(1)组件名尽可能回避HTML中已有的元素名称，例如:h2、H2都不行。(2)可以使用name配置项指定组件在开发者工具中呈现的名字。
-
关于组件标签:
第一种写法:第二种写法:
备注:不用使用脚手架时， -
一个简写方式:
const school =Vue.extend(options)可简写为:constschool=options
组件的嵌套
先上代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件嵌套title>
<script src="../js/vue.js" type="text/javascript">script>
head>
<body>
<div id="root">
div>
<div id="root2">
<hello>hello>
div>
<script>
Vue.config.productionTip = false;
// 创建student组件
const student = Vue.extend(
{
data() {
return {
studentName: 'hg',
age: 18
}
},
template: `
学生姓名：{{ studentName }}
学校年龄：{{ age }}
`
}
)
// 创建school组件
const school = Vue.extend(
{
data() {
return {
schoolName: 'soochoow universty',
address: 'suzhou'
}
},
template: `
学校名称：{{ schoolName }}
学校地址：{{ address }}
hello, {{ name }}全局注册
`,
data() {
return {
name: 'zl'
}
}
})
// 定义APP组件
const app = Vue.extend({
template: `
嵌套组件的写法：
-
首先创建一个子组件student：
const student = Vue.extend( { data() { return { studentName: 'hg', age: 18 } }, template: `` } )学生姓名：{{ studentName }}
学校年龄：{{ age }}
-
再创建一个父组件school
const school = Vue.extend( { data() { return { schoolName: 'soochoow universty', address: 'suzhou' } }, template: ``, // 注册组件（局部） components: {student} } )学校名称：{{ schoolName }}
学校地址：{{ address }}
注意，父组件中通过components添加子组件，并在父组件的模板中添加子组件标签
与此同时，再创建一个hello组件，地位是与school平级的，只是其中没有子组件了
-
创建一个app，统领所有组件，也就是hello和school
const app = Vue.extend({ template: ``, components: { school, hello, // student, } })注意，app的子组件中不能再包括其子组件的组件，也就是不能包括school中的student
-
创建vm实例，并注册app
new Vue( { template:``, el: '#root', // 注册组件--局部注册 components: { app, }, } ) 这里有一点值得注意，就是可以直接在vm对象中添加模板，这样就不用在原来的模板中去写app标签了
但是有个问题我没搞明白，就是注意看，我的hello组件是全局注册的，在原始模板中我添加了一个div#root2的域，其中添加了hello组件，但网页上并没有显示这个hello标签，很纳闷，看以后能不能搞明白吧
组件的小结
关于VueComponent:
1.school组件本质是一个名为VueComponent的构造两数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写
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
记录到这里，还讲了一个非常重要的内置关系，没有听懂，涉及到原型对象，结论是这么一句话：
组件实例对象的显示原型对象的隐式原型对象等于vm的原型对象
即VueComponent.prototype.__proto__===Vue.prototype
单文件组件
一个文件中只包含1个组件，及后缀为vue的文件
大型项目都是单文件组件