• Vue.js 2.0 基础知识之学习笔记 从入门到放弃系列

    系列文章目录

    提示：阅读本章之前，请先阅读目录

    文章目录

    前言

    Vue.js 2.0 最基础的内容，笔记

    vue3: https://github.com/Panyue-genkiyo/vue3-learning
    vue2依据脚手架:https://github.com/Panyue-genkiyo/vue-advance
    vue基础不依赖脚手架:https://github.com/Panyue-genkiyo/vue-learning

    初识Vue.js

    我们通过引入Vue.js，就实现最简单的使用vue

    <!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>Hello</title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
Hello world!
<script type="text/javascript">
  Vue.config.productionTip = false;
</script>
</body>
</html>

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

    在这里插入图片描述

    通过设置，Vue.config.productionTip = false;
    来控制，控制台的提示，这个提示，是指生产环境，最好使用生产版本的vue

    在这里插入图片描述

    在这里插入图片描述

    实例化Vue，让Vue运行起来

    通过new Vue()来实例化

    <!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>Hello</title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <h1>My Name: {{name}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    // 实例化
    const x = new Vue({
      "el": "#root",
      "data": {
        "name": "smobee"
      }
    });
  </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述

    favicon图标加载问题

    我是在Visual Studio Code 启动的，Open With Live Server，所以，就是带有端口号的访问页面
    在这里插入图片描述

    在这里插入图片描述
    会报一个，找不到图标的错误提示，这个是浏览器默认的行为

    我们可以通过按住Shift+刷新，强制刷新，就可以看到这个报错

    如果，我们是直接以文件绝对路径访问，则不存在这个问题

    在这里插入图片描述

    在这里插入图片描述

    Vue模板支持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>Hello</title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <h1>My Name: {{name}}</h1>
    <h1>Now Time: {{Date.now()}}</h1>
    <h1>Add: {{1+1}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    // 实例化
    const x = new Vue({
      "el": "#root",
      "data": {
        "name": "smobee"
      }
    });
  </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    在这里插入图片描述

    一个Vue容器只会接管一个元素

    <!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>Hello</title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <h1>My Name: {{name}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    // 实例化
    const x = new Vue({
      "el": "#root",
      "data": {
        "name": "smobee"
      }
    });
    const x1 = new Vue({
      "el": "#root",
      "data": {
        "name": "xmfboss"
      }
    });
  </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    在这里插入图片描述

    一个元素只能被一个Vue接管

    <!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>Hello</title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div class="root">
    <h1>My Name: {{name}}</h1>
  </div>
  <div class="root">
    <h1>My Name: {{name}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    // 实例化
    const x = new Vue({
      "el": ".root",
      "data": {
        "name": "smobee"
      }
    });
  </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

    指令语法 v-bind: 和 简写 :

    <!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>Hello</title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <h1>My Name: {{name}}</h1>
    <input type="text" v-bind:value="comment">
    <!-- 简写 -->
    <input type="text" :value="result">
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    // 实例化
    const x = new Vue({
      "el": "#root",
      "data": {
        "name": "smobee",
        "comment": "hello, smobee",
        "result": 123456
      }
    });
  </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    在这里插入图片描述

    el的两种写法

    const v = new Vue({
	// 这是第一种写法，注释掉了
	// el: "#root",
	data: {
		name: "test"
	}
})
// 这是第二种写法
v.$mount("#root")

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    data的两种写法

    第一种
new Vue({
	el: "#root",
	data: {
		name: "hello"
	}
})
第二种
new Vue({
	el: "#root",
	data: function(){
		// 这里的this，是vue实例本身
		console.log(this)
		return {
			name: "hello"
		}
	}
})
第二种简写
new Vue({
	el: "#root",
	data(){
		// 这里的this，是vue实例本身
		console.log(this)
		return {
			name: "hello"
		}
	}
})
错误示范，如果使用箭头函数，this会是window实例
new Vue({
	el: "#root",
	data: () => {
		// 这里的this，是vue实例本身
		console.log(this)
		return {
			name: "hello"
		}
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    MVVM模型

    在这里插入图片描述

    数据代理，Obeject.defindProperty

    在这里插入图片描述

    let number = 100;
let person = {
	name: "xiaofeng",
	sex: "man"
}
Object.defindProperty(person, 'age', {
	value: number,
	enumberable: true, // 控制是否可被遍历（枚举）
	writable: true, // 控制是否可被修改
	configurable: true, // 控制是否可被删除
	get: function() {
		console.log("有人正在读取我")
		return number
	},
	set(val){
		console.log("有人正在设置我的值是：", value)
	}
})



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    事件处理

    在这里插入图片描述

    <button v-on:click="onClickOpen">我是按钮1</button>
<button v-on:click="onClickClose("hello", $event)">我是按钮1</button>

const vm = new Vue({
	el: "#root",
	data: {
		name: "hello",
		onClickEdit() {
			console.log("其实我放到这里，也可以调用，只不过会使用数据代理的方式")
		}
	},
	methods: {
		onClickOpen(event) {
			console.log("这里的this就是vm本身", this === vm)
			console.log("这里的event，是元素本身", event)
			console.log("我可以输出按钮的文字", evnet.innertText)
		},
		onClickClose(str, evnet) {
			console.log("我传递了一个字符串", str)
			console.log("我可以把event传递进来", event)
		},
		onClickTest: (event) => {
			console.log("这里的event，箭头函数，是window对象", event)
		}
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    修饰符

    prevent：阻止默认事件
stop：阻止冒泡
once：只执行一次
capture：使用事件的捕获模式
self：只有event.target是自己的时候，才会触发
passive：事件的默认，立即执行，无需等待事件回调后执行

<a href="baidu.com" @click.prevent="open">prevent 只执行click事件</a>

<div @click="open">
	<p @click.stop="open">我是里面，阻止了冒泡，不会影响外面</p>
</div>

<div @click="open">
	<a href="baidu.com"  @click.stop.prevent="open">我是里面，阻止了冒泡，并组织默认事件</a>
</div>

<button @click.once="open">我只会被调用一次哦</butoon>

<div @click.self="open">
	只有event.target是外面的元素，才会触发click
	<p @click="open">我是里面</p>
</div>

scroll，是滚动条，响应事件，键盘上下滑动和鼠标滚轮，就会触发onClick事件
<ul @scroll="onClick">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

开启了passive之后，会先滚动滚动条，如果没有开启，会等onClick执行完后才会滚动滚动条
<ul @wheel.passive="onClick">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

onClick() {
	for (int i = 0; i < 100000; i++) {
		console.log(i)
	}
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    键盘事件

    // keyup是指，按键按下并放开
<input type="text" @keyup="onClick"></input>
// keydown是指，按键按下就触发
<input type="text" @keydown="onClick"></input>

// 示例
<input type="text" @keyup.enter="onClick"></input>
<input type="text" @keyup.Enter="onClick"></input>
<input type="text" @keyup.esc="onClick"></input>
<input type="text" @keyup.space="onClick"></input>
<input type="text" @keyup.delete="onClick"></input>
<input type="text" @keyup.up="onClick"></input>
<input type="text" @keyup.down="onClick"></input>
<input type="text" @keyup.left="onClick"></input>
<input type="text" @keyup.right="onClick"></input>
// tab比较特殊，因为会移出焦点
<input type="text" @keydown.tap="onClick"></input>
// 两个单词组成的，要用-隔开
<input type="text" @keyup.caps-lock="onClick"></input>
// 系统按键，需要搭配第二键使用
<input type="text" @keyup.ctrl="onClick">同时按下ctrl+其他按键，并放开</input>
<input type="text" @keyup.alt="onClick"></input>
<input type="text" @keyup.shift="onClick"></input>
<input type="text" @keyup.meta="onClick">win键</input>
// 小提示，组合键的
<input type="text" @keyup.ctrl.y="onClick">同时按下ctrl+y，并放开</input>
// 还可以自定义名称
Vue.config.keyCodes.huichejian = 13

onClick(e) {
	// 输出当前按键的编码
	console.log(e.keyCode)
	if (e.keyCode === 13) {
		console.log("回车键")
	}
	console.log("当前输入框的value值", e.target.value)
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    计算属性

    // 计算属性，更新数据的情况:
// 1. 首次加载
// 2. 依赖的数据发生了变化，计算属性也会重新计算一次
// 底层原理，是用了Object.defindProperty的getter和setter方法
<div>{{fullname}}</div>

const vm = Vue({
	el: "#root",
	data: {
		name: "A",
		name2: "B"
	},
	computed: {
		fullname: {
			get(){
				return this.name + this.name2
			},
			set(){
				console.log("有人想改我的值")
			}
		}
		// 简写，只实现get
		fullname() {
			return this.name + this.name2
		}
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    计算属性和方法组合应用

    <span>{{message}}</span>
<div @click="isValue = !isValue">测试</div>
<div @click="onChangeValue">测试</div>
<div @click="window.alert("我可以用此方法，调用window参数")">测试</div>

const vm = Vue({
	el: "#root",
	data: {
		isValue: true,
		window
	},
	computed: {
		message() {
			return isValue ? "A" : "B"
		}
	},
	methods: {
		onChangeValue() {
			this.isValue = !this.isValue
		}	
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    watch监视器

    const vm = Vue({
	el: "#root",
	data: {
		name: "123"
	},
	computed: {
		newName() {
			return this.name + '123'
		}
	},
	watch: {
		name: {
			// 第一次会自动调用一次
			immediate: true,
			handler(newValue, oldValue) {
				console.log("我被改变了", newValue, oldValue)
			}
		},
		newName: {
			// 我也可以同样监听计算属性
			immediate: true,
			handler(newValue, oldValue) {
				console.log("我被改变了", newValue, oldValue)
			}
		},
		// 简写
		newName(newValue, oldValue) {
			console.log("我被改变了", newValue, oldValue)
		}
	}
})
// 第二种写法
vm.$watch('name', {
	immediate: true,
	handler(newValue, oldValue) {
		console.log("我被改变了", newValue, oldValue)
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    高级用法

    const vm = Vue({
	el: "#root",
	data: {
		numbers: {
			a: 1,
			b: 2
		}
	},
	watch: {
		// 单独监听，a的变化
		'numbers.a': {
			handler() {
				console.log("我被更改了")
			}
		},
		// 使用深度监听器
		numbers: {
			deep: true,
			handler() {
				console.log("我被更改了")
			}
		}
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    watch 异步函数

    const vm = Vue({
	el: "#root",
	data: {
		name: "hello"
	},
	watch: {
		name() {
			// 等一秒钟再执行，这里使用箭头函数是因为，setTimeout是Vue帮我们调用js去运行的，异步的，所以箭头函数在调用的时候，就会自动去找外层的主体，就是name()，而外层的name()就是Vue管理的
			setTimeout(()=> {
				console.log("Hello 我执行了")
			}, 1000)
			// 如果是普通函数，那么，普通函数就是浏览器管理的
			setTimeout(fucntion(){
				console.log("Hello 我执行了")
			}, 1000)
		}
	}

})

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

    class样式绑定

    <div class="test-class" :class="newClass">单纯绑定</div>
<div class="test-class" :class="objectClass">通过对象绑定，true为开启</div>
<div class="test-class" :class="arrClass">数组绑定，有几个则绑定几个</div>

const vm = Vue({
	el: "#root",
	data: {
		newClass: "helloAClass",
		objectClass: {
			A: false,
			B: true,
			C: false
		},
		arrClass: ["a", "b", "c"]
	}

})

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

    style样式绑定

    <div class="test-class" :style="newStyle">单纯绑定</div>
<div class="test-class" :style="objectStyle">通过对象绑定，true为开启</div>
<div class="test-class" :style="arrStyle">数组绑定，有几个则绑定几个</div>

const vm = Vue({
	el: "#root",
	data: {
		newStyle: "font-size: 10px",
		objectStyle: {
			fontSize: "20px",
			color: "red"
		},
		objectStyle2: {
			fontSize: "20px",
			color: "red"
		},
		arrStyle: [objectStyle, objectStyle2]
	}

})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    v-if和v-show

    <div v-show="false"> 实际上，只是给style加一个属性：display: none</div>
<div v-if="true">只有条件符合，才会渲染</div>
// template 只能搭配v-if使用，并且不影响结构
<template v-if="true">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
</template>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    v-for，列表渲染

    // 遍历数组,testArr=[1,2,3,4]
<div>
	<span v-for="(data, index) in testArr" :key="index">
		{{data}}
	</span>
</div>
// 遍历数组,data=[1,2,3,4]，in可以写成of
<div>
	<span v-for="(data, index) of testArr" :key="index">
		{{data}}
	</span>
</div>
// 遍历对象，testObject={name: "123", age: 12, sex="1"}
<div>
	<span v-for="(value, key) of testObject" :key="key">
		{{key}}:{{value}}
	</span>
</div>
// 遍历字符串，testString="hello"
<div>
	<span v-for="(str, index) of testString" :key="index">
		{{str}}
	</span>
</div>
// 遍历指定次数
<div>
	<span v-for="(number, index) in 10" :key="index">
		{{number}}
	</span>
</div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    v-for的key作用

    在这里插入图片描述
    在这里插入图片描述

    列表过滤

    // 用watch监听
const vm = Vue({
	el: "#root",
	data: {
		search: "",
		list: [
			{name: "ABCD", age: 18},
			{name: "1236", age: 18},
			{name: "EDFGBD", age: 18},
			{name: "QAZWSXED", age: 18}
		],
		newList: []
	},
	watch: {
		search: {
			// 这里开启immediate，是因为首次会先调用一次watch
			immediate: true,
			handler(value) {
				this.newList = this.list.filter((obj) => {
					return obj.name.indexof(value) !== -1
				})
			}
		}
	}
// 用computed计算属性
const vm = Vue({
	el: "#root",
	data: {
		search: "",
		list: [
			{name: "ABCD", age: 18},
			{name: "1236", age: 18},
			{name: "EDFGBD", age: 18},
			{name: "QAZWSXED", age: 18}
		]
	},
	computed: {
		// 这里用计算属性，能够实现和watch一样的效果，是因为里面依赖了this.search，search一旦被更新，计算属性就会调用一次
		comList() {
			return this.list.filter((obj) => {
				return obj.name.indexof(this.search) !== -1
			})
		}
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    列表过滤

    // 用computed计算属性
const vm = Vue({
	el: "#root",
	data: {
		// 0 原，1 升序，2降序
		sortType: 0
		search: "",
		list: [
			{name: "ABCD", age: 18},
			{name: "1236", age: 18},
			{name: "EDFGBD", age: 18},
			{name: "QAZWSXED", age: 18}
		]
	},
	computed: {
		// 这里用计算属性，能够实现和watch一样的效果，是因为里面依赖了this.search，search一旦被更新，计算属性就会调用一次
		comList() {
			const arr = this.list.filter((obj) => {
				return obj.name.indexof(this.search) !== -1
			})
			// 这里进行排序处理
			if (this.sortType > 0) {
				arr.sort((p1, p2) => {
					return this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age
				})
			}
			return arr
		}
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    Vue监视数据

    在这里插入图片描述

    data: {
	// 数组下标，是没有添加setter和getter的，所以，直接修改数组下标，vue是监视不到变化，页面数据就不会刷新
	list: [
		// 只有对象里面的属性，才会添加getter和setter
		{name: "hello", age: 18}
	]
}

// 要想实现让vue监视到数组的变化，要使用指定的7个函数
// 或者使用vue提供的方法，Vue.set()，但是只能对data下面属性的属性进行添加，不能直接添加到data

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    Vue表单数据

    在这里插入图片描述

    // 修饰符
<input v-model.trim="text">去除前后空格</input>
<input type="number" v-model.number="text">配合type使用，只能输入数字</input>
<input v-model.lazy="text">失去焦点后，响应</input>

    • 1
    • 2
    • 3
    • 4

    Vue的过滤器filters

    // 单个过滤器
<div>{{name | testFilter}}</div>
// 单个过滤器，并且传值
<div>{{name | test2Filter("hello")}}</div>
// 串联过滤器
<div>{{name | testFilter | newFilter}}</div>

filers: {
	testFilter(val) {
		return "修改" + val
	},
	testFilter(val, text) {
		return "修改" + val + text
	},
	newFilter(val) {
		return "串联" + val
	}
}

// 全局过滤器
Vue.filter("globalFilter", function(val) {
	return val
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    v-text 文本指令

    在这里插入图片描述

    <div v-text="name">这里面的div内容无效，会被v-text直接替代</div>

data: {
	name: "
    会直接输出文本内容，相当于格式化
    "    
}

    • 1
    • 2
    • 3
    • 4
    • 5

    v-html

    <div v-html="text">会直接解析内容</div>

data: {
	text: "
    hello
    "    
}

    • 1
    • 2
    • 3
    • 4
    • 5

    v-cloak

    在这里插入图片描述

    <div v-cloak>在vue没有加载之前，可以配合css隐藏掉</div>

css样式
[v-cloak] {
	display: none;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    v-once

    在这里插入图片描述

    // 只会读取一次值
<div v-once>{{name}}</div>

    • 1
    • 2

    v-pre

    <div v-pre>直接跳过vue的解析，提高效率</div>

    • 1

    自定义指令

    // 1. 初始化会触发自定义指令的刷新
// 2. 所在的模板，被重新解析，自定义指令也会重新刷新
<div v-hello="name">我是特殊内容</div>


data: {
	name: "hahaha"
},
directives: {
	// 简写
	hello(elements, binding) {
		elements.innerText = "My name is:" + binding.value
	}
	// 高级写法
	hello: {
		bind(elements, binding) {
			console.log("初始化调用")
		},
		inserted(elements, binding) {
			console.log("插入元素时，调用")
		},
		update(elements, binding) {
			console.log("更新数据时，调用")
		}
	},
	// 有多个单词这样写
	'hello-xixi-haha'(elements, binding) {
		elements.innerText = "My name is:" + binding.value
	}
}

// 全局指令
Vue.directives("hello", function(elements, binding) {
	elements.innerText = "My name is:" + binding.value
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    更新日志

    提示：将会持续优化更新

    20221203
    Vue模板支持js表达式
    一个Vue容器只会接管一个元素
    一个元素只能被一个Vue接管
    指令语法 v-bind: 和 简写 :

    20221202
    初识Vue.js
    实例化Vue，让Vue运行起来
    favicon图标加载问题

  • 相关阅读:
    1+x（Java）中级题库易混淆理论题(三)
    python3.11教程2：基础数据类型（数字和字符串）、组合数据类型（集合、元组、列表、字典）
    第1章、温故而知新
    OpenShift 4 - 用 Operator 部署 Redis 集群
    未来智能汽车数字化转型之路必不可少强大的高级排产软件
    Leetcode 刷题日记 剑指 Offer II 053. 二叉搜索树中的中序后继
    Mask-RCNN入门(balloon数据集、TensorFlow-DirectML)的N个坑
    阿里P9大牛徒手编写的这份十亿级并发手册，教你彻底玩懂高并发，赶紧收藏
    数据分析案例：基于水色图像的水质识别
    力扣(LeetCode)864. 获取所有钥匙的最短路径(C++)
  • 原文地址：https://blog.csdn.net/wg8ofk08/article/details/128144453