vue核心

最新推荐文章于 2024-05-20 11:30:24 发布

有爱的萌哥

最新推荐文章于 2024-05-20 11:30:24 发布

阅读量143

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/GJM_Memory/article/details/123395846

版权

初识vue

初识vue：
           1.想让vue工作，就必须创建一个vue实例，且要传入一个配置对象
           2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的vue语法
           3.root容器里的代码被称为 vue模板
           4.vue实例和容器是一一对应的
           5.真实开发中只有一个vue实例，并且会配合着组件一起使用
           6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
           7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

<!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>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		初识vue：
			1.想让vue工作，就必须创建一个vue实例，且要传入一个配置对象
			2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的vue语法
			3.root容器里的代码被称为 vue模板
			4.vue实例和容器是一一对应的
			5.真实开发中只有一个vue实例，并且会配合着组件一起使用
			6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
			7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
		 -->
		<div id="root">
			<h1>hello {{name}}</h1>
		</div>
		<script>
			Vue.config.productionTip = false //阻止vue在启动时生成生产提示

			// 创建Vue实例
			new Vue({
				el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
				data: {	//data中用于存储数据，数据供el所指定的容器去使用
					name: 'world'
				}
			})
		</script>
	</body>
</html>

vue模板语法

vue模板语法有2大类：
       1.插值语法：
       功能：用于解析标签体内容。
       写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
       2.指令语法：
       功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）。
       举例：v-bind:href="xxx"或简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
       备注：vue中有很多的指令，且形式都是：v-???，此处只是拿v-bind举个例子。

<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr>
			<h1>指令语法</h1>
			<a v-bind:href="url">百度</a>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false
			new Vue({
				el: '#root',
				data: {
					name: 'vue',
					url: 'https://www.baidu.com'
				}
			})
		</script>

数据绑定

vue中有两种数据绑定的方式：
       1.单向绑定（v-bind）：数据只能从data流向页面。
       2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。
       备注：
           1.双向绑定一般都应用在表单类元素上（如：input、select等）
           2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。

<div id="root">
			<!-- 普通写法 -->
			<!-- 单向数据绑定：<input type="text" :value="name" /><br />
			双向数据绑定：<input type="text" v-model:value="name" /> -->
			
			单向数据绑定：<input type="text" :value="name" /><br />
			双向数据绑定：<input type="text" v-model="name" />
			
			
			<!-- 如下代码是错误的。因为v-model只能应用在表单类元素（输入类元素）上 -->
			<!-- <h2 v-model:x="name">你好</h2> -->
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false
			new Vue({
				el: '#root',
				data:{
					name:'world'
				}
			})
		</script>

el与data的两种写法

el与data的两种写法
               el有两种写法
                   1.new Vue时配置el属性
                   2.先创建vue实例，随后再通过vm.$mount('#root')指定el的值
               data有两种写法
                   1.对象式
                   2.函数式
                   如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错
               一个重要的原则：
                   由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了。

<div id="root">
			<h1>你好，{{name}}</h1>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			// // el的两种写法
			// const v=new Vue({
			// 	// el:'#root',	//第一种写法
			// 	data:{
			// 		name:'世界'
			// 	}
			// })
			// setTimeout(()=>{
			// 	v.$mount('#root')	//第二种写法
			// },3000)
			
			// data的两种写法
			new Vue({
				el:'#root',
				// // data的第一种写法：对象式
				// data:{
				// 	name:'世界'
				// }
				
				data:function(){
					console.log(this)	//此处的this是vue实例对象，不要写成箭头函数，否则this就是window对象
					return{
						name:'世界'
					}
				}
			})
			
		</script>

MVVM模型

MVVM模型
               1.M：模型（Model）：data中的数据
               2.V：视图（View）：模板代码
               3.VM：视图模型（ViewModel）：vue实例
           观察发现：
               1.data中的所有属性，最后都出现在了vm身上。
               2.vm身上所有的属性及vue原型上所有属性，在vue模板中都可以直接使用。

<div id="root">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			const vm=new Vue({
				el:'#root',
				data:{
					name:"北京大学",
					address:"北京"
				}
			})
			console.log(vm)
		</script>

数据代理

回顾Object.defineProperty方法

<script type="text/javascript">
			let number=18
			let person={
				name:'张三',
				sex:'男'
			}
			Object.defineProperty(person,'age',{
				// value:18,
				// enumerable:true	,//控制属性是否可以枚举，默认值是false
				// writable:true	,//控制属性是否可以被修改，默认值是false
				// configurable:true,//控制属性是否可以被删除，默认值是false
				
				// 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
				get(){
					console.log('有人读取age属性了')
					return number
				},
				// 当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体指
				set(value){
					console.log('有人修改了age属性，且值是：'+value)
					number=value
				}
			})
			console.log(person)
			// console.log(Object.keys(person))

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
vue中数据代理的好处：
更加方便的操作data中的数据

基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部操作（读/写）data中对应的属性。

事件处理

事件的基本使用：
               1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
               2.事件的回调需要配置在methods对象中，最终会在vm上
               3.methods中配置的函数，不要用箭头函数！否则this就不是vm了
               4.methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组件实例对象
               5.@click="demo"和@click="demo($event)"效果一致，但后者可以传参

<div id="root">
			<h2>欢迎来到{{name}}</h2>
			<button v-on:click="showInfo1">点我提示信息1（不传参）</button>
			<button @click="showInfo2(66,$event)">点我提示信息2（传参）</button>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			new Vue({
				el:'#root',
				data:{
					name:'召唤师峡谷'
				},
				methods:{
					showInfo1(event){
						console.log('123')
					},
					showInfo2(number,enevt){
						console.log(number,event)
					}
				}
			})
		</script>

vue中的事件修饰符：
               1.prevent：阻止默认事件（常用）
               2.stop：阻止事件冒泡（常用）
               3.once：事件只触发一次（常用）
               4.capture：使用事件的捕获模式
               5.self：只有event.target是当前操作的元素时才触发事件
               6.passive：事件的默认行为立即执行，无需等待事件的回调执行完毕

<div id="root">
			<h2>欢迎来到{{name}}</h2>
			<!-- 阻止默认事件（常用） -->
			<a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button type="button" @click.stop="showInfo()">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<a href="https://www.baidu.com" @click.stop.prevent="showInfo()">百度</a>
			</div>
			<!-- 事件只触发一次（常用） -->
			<button type="button" @click.once="showInfo()">点我提示信息</button>
		
			<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>
			<!-- 只有event.target是当前操作的元素时才触发事件 -->
			<div class="demo1" @click.self="showInfo">
				<button type="button" @click="showInfo">点我提示信息</button>
			</div>
			<!-- 事件的默认行为立即执行，无需等待事件的回调执行完毕 -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
			
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			new Vue({
				el:'#root',
				data:{
					name:"召唤师峡谷"
				},
				methods:{
					showInfo(e){
						alert("123")
						// console.log(e.target)
					},
					showMsg(msg){
						console.log(msg)
					},
					demo(){
						for(var i=0;i<10000;i++){
							console.log("1111111")
						}
					}
				}
			})
		</script>

1.vue中常用的按键别名：
               回车=》enter
               删除=》delete（捕获“删除”和“退格”键）
               退出=》esc
               空格=》space
               换行=》tab（特殊，必须配合keydown使用）
               上=》up
               下=》down
               左=》left
               右=》right
           2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
           3.系统修饰键（用法特殊）：Ctrl、alt、shift、meta
               1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才会被触发。
               2）配合keydown使用：正常触发事件
           4.也可以使用keyCode去指定具体的按键（不推荐）
           5.Vue.config.keyCode.自定义键名=键码，可以去定制按键别名

<div id="root">
			<h2>欢迎来到{{name}}</h2>
			<input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showInfo" />
			<!-- <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo" /> -->
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			Vue.config.keyCodes.huiche=13
			new Vue({
				el:'#root',
				data:{
					name:"召唤师峡谷"
				},
				methods:{
					showInfo(e){
					 	// if(e.keyCode!==13) return
						console.log(e.target.value)
					}
				}
			})
		</script>

计算属性

计算属性：
               1.定义：要用的属性不存在，要通过已有属性计算得来。
               2.原理：底层借助了Object.defineproperty方法提供的getter和setter。
               3.get函数什么时候执行？
                   1）初次读取时会执行一次。
                   2）当依赖的数据发生改变时会被再次调用。
               4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
               5.备注：
                   1）计算属性最终会出现在vm上，直接读取使用即可。
                   2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

插值语法实现

<div id="root">
			姓：<input type="text" v-model="firstName"><br><br>
			名：<input type="text" v-model="lastName"><br><br>
			全名：<span>{{firstName}}--{{lastName}}</span>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			new Vue({
				el:'#root',
				data:{
					firstName:'张',
					lastName:'三'
				}
			})
		</script>

methods实现

<div id="root">
			姓：<input type="text" v-model="firstName"><br><br>
			名：<input type="text" v-model="lastName"><br><br>
			全名：<span>{{fullName()}}</span>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			new Vue({
				el:'#root',
				data:{
					firstName:'张',
					lastName:'三'
				},
				methods:{
					fullName(){
						return this.firstName+this.lastName
					}
				}
			})
		</script>

计算属性实现

<div id="root">
			姓：<input type="text" v-model="firstName"><br><br>
			名：<input type="text" v-model="lastName"><br><br>
			全名：<span>{{fullName}}</span>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			const vm=new Vue({
				el:'#root',
				data:{
					firstName:'张',
					lastName:'三'
				},
				computed:{
					fullName:{
						// 当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
						// get什么时候调用？1.初次读取fullName时 2.所依赖的数据发生变化时
						get(){
							console.log('get被调用了')
							return this.firstName+this.lastName
						},
						// set什么时候调用？当fullName被修改时
						set(value){
							console.log('set'+value)
							const arr=value.split('-')
							this.firstName=arr[0]
							this.lastName=arr[1]
						}
					}
				}
			})
		</script>

计算属性简写

Vue.config.productionTip = false
			const vm = new Vue({
				el: '#root',
				data: {
					firstName: '张',
					lastName: '三'
				},
				computed: {
					// 完整写法
					// fullName:{
					// 	get(){
					// 		console.log('get被调用了')
					// 		return this.firstName+'-'+this.lastName
					// 	},
					// 	set(value){
					// 		console.log('set'+value)
					// 		const arr=value.split('-')
					// 		this.firstName=arr[0]
					// 		this.lastName=arr[1]
					// 	}
					// }
					// 简写
					fullName() {
						console.log('get被调用了')
						return this.firstName+'-'+this.lastName
					}
				}

			})
		</script>

监视属性

监视属性watch：
               1.当被监视的属性变化时，回调函数自动调用，进行相关操作
               2.监视的属性必须存在，才能进行监视
               3.监视的两种写法：
                   1）new Vue时传入watch配置
                   2）通过vm.$watch监视

<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
		<script>
			Vue.config.productionTip = false
			const vm = new Vue({
				el: '#root',
				data: {
					isHot: true
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽'
					}
				},
				methods: {
					changeWeather() {
						this.isHot = !this.isHot
					}
				},
				// watch:{
				// 	isHot:{
				// 		// immediate:true,	//初始化时让handler调用一下
				// 		// handler什么时候调用？当isHot发生改变时。
				// 		handler(newValue,oldValue){
				// 			console.log('isHot被修改了',newValue,oldValue)
				// 		}
				// 	}
				// }
			})

			vm.$watch('isHot', {
				immediate: true, //初始化时让handler调用一下
				// handler什么时候调用？当isHot发生改变时。
				handler(newValue, oldValue) {
					console.log('isHot被修改了', newValue, oldValue)
				}
			})
		</script>

深度监视：
               1）vue中的watch默认不监测对象内部值的改变。（一层）。
               2）配置deep:true可以检测对象内部值改变（多层）。
           备注：
               1）vue自身可以检测对象内部值的改变，但vue提供的watch默认不可以。
               2）使用watch时根据数据的具体结构，决定是否采用深度监视。

<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
			<hr >
			<h3>a的值是：{{numbers.a}}</h3>
			<button type="button" @click="numbers.a++">点我让a+1</button>
			<h3>b的值是：{{numbers.b}}</h3>
			<button type="button" @click="numbers.b++">点我让b+1</button>
		</div>
		<script>
			Vue.config.productionTip = false
			const vm = new Vue({
				el: '#root',
				data: {
					isHot: true,
					numbers:{
						a:1,
						b:1
					}
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽'
					}
				},
				methods: {
					changeWeather() {
						this.isHot = !this.isHot
					}
				},
				watch:{
					isHot:{
						// immediate:true,	//初始化时让handler调用一下
						// handler什么时候调用？当isHot发生改变时。
						handler(newValue,oldValue){
							console.log('isHot被修改了',newValue,oldValue)
						}
					},
					// 监视多级结构中某个属性的变化
					// 'numbers.a':{
					// 	handler(){
					// 		console.log('a被改变了')
					// 	}
					// },
					// 监视多级结构中所有属性的变化
					numbers:{
						deep:true,
						handler(){
							console.log('numbers改变了')
						}
					}
				}
			})
		</script>

简写

<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
		<script>
			Vue.config.productionTip = false
			const vm = new Vue({
				el: '#root',
				data: {
					isHot: true,
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽'
					}
				},
				methods: {
					changeWeather() {
						this.isHot = !this.isHot
					}
				},
				watch: {
					// 正常写法
					// isHot: {
					// 	// immediate:true,	//初始化时让handler调用一下
					// 	// deep:true,	//深度监视
					// 	handler(newValue, oldValue) {
					// 		console.log('isHot被修改了', newValue, oldValue)
					// 	}
					// },
					// 简写
					// isHot(newValue,oldValue){
					// 	console.log('isHot被修改了', newValue, oldValue)
					// }
				}
			})

			// vm.$watch('isHot', {
			// 	// immediate:true,	//初始化时让handler调用一下
			// 	// deep:true,	//深度监视
			// 	handler(newValue, oldValue) {
			// 		console.log('isHot被修改了', newValue, oldValue)
			// 	}
			// })

			vm.$watch('isHot', function(newValue, oldValue) {
				console.log('isHot被修改了', newValue, oldValue)
			})
		</script>

绑定样式

绑定样式：
               1.class样式
                   写法:class="xxx" xxx可以是字符串、对象、数组。
                       字符串写法适用于：类名不确定，要动态获取
                       对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
                       数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
               2.style样式
                   :style="{fontSize:xxx}" 其中xxx是动态值
                   :style="[a,b]" 其中a、b是样式对象。

<style type="text/css">
			.basic{
				width: 200px;
				height: 150px;
				border: 5px red solid;
			}
			.normal{
				background-color: #87CEEB;
			}
			.happy{
				background-color: #FFA500;
			}
			.sad{
				background-color: green;
			}
			.zhaohuanshi1{
				background-color: #87CEEB;
			}
			.zhaohuanshi2{
				border-radius: 30px;
			}
			.zhaohuanshi3{
				border: 5px black dashed;
			}
		</style>


<div id="root">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood()">{{name}}</div>
			<br>
			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div>
			<br>
			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态觉得用不用 -->
			<div class="basic" :class="classObj">{{name}}</div>
			<br>
			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="[styleObj,styObje2]">{{name}}</div>
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			new Vue({
				el:'#root',
				data:{
					name:'召唤师',
					mood:'normal',
					classArr:['zhaohuanshi1','zhaohuanshi2','zhaohuanshi3'],
					classObj:{
						zhaohuanshi1:true
					},
					styleObj:{
						fontSize:'40px'
					},
					styObje2:{
						backgroundColor:'red'
					},
					styleArr:[
						{
							fontSize:'40px'
						},
						{
							backgroundColor:'green'
						}
					]
				},
				methods:{
					changeMood(){
						const arr=['happy','sad','normal']
						const index=Math.floor(Math.random()*3)
						this.mood=arr[index]
					}
				}
			})
		</script>

条件渲染

1.v-if
写法：
1）v-if="表达式"
2）v-else-if="表达式"
3）v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被打断
2.v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。

 <div id="root">
			 <h2>当前的n值是：{{n}}</h2>
			 <button type="button" @click="n++">点我n+1</button>
			 <!-- 使用v-show做条件渲染 -->
			<h2 v-show="false">欢迎来到{{name}}</h2>
			
			<!-- 使用v-if做条件渲染 -->
			<h2 v-if="false">欢迎来到{{name}}</h2>
			
			<!-- v-if和v-else-if -->
			<div v-if="n===1">Angular</div>
			<div v-else-if="n===2">React</div>
			<div v-else-if="n===3">Vue</div>
			<div v-else>javascript</div>
			
			<!-- v-if与template的配合使用 -->
			<template v-if="n===1">
				<h2>你好</h2>
				<h2>世界</h2>
			</template>
		 </div>
		 <script type="text/javascript">
		 	Vue.config.productionTip=false
			new Vue({
				el:'#root',
				data:{
					name:'召唤师峡谷',
					n:0
				}
			})
		 </script>

列表渲染

基本列表

v-for指令：
               1.用于展示列表数据
               2.语法：v-for="(item,index) in xxx" :key="yyy"
               3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表</h2>
			<ul>
				<li v-for="(p,index) in persons" :key="index">
					{{p.name}}--{{p.age}}
				</li>
			</ul>
			<!-- 遍历对象 -->
			<h2>汽车信息</h2>
			<ul>
				<li v-for="(value,k) of cars" :key="k">
					{{k}}--{{value}}
				</li>
			</ul>
			<!-- 遍历字符串 -->
			<h2>测试遍历字符串</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{index}}--{{char}}
				</li>
			</ul>
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数</h2>
			<ul>
				<li v-for="(number,index) of 5">
					{{number}}--{{index}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					cars:{
						name:'奥迪A8',
						price:'7块',
						color:'彩色'
					},
					str:'hello'
				}
			})
		</script>

key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）
               1.虚拟DOM中key的作用：
                   key是虚拟DOM对象的标识，当数据发生变化时，vue会根据新数据生成新的虚拟DOM，随后vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下：
               2.对比规则：
                   1）旧虚拟DOM中找到了与新虚拟DOM相同的key：
                       ①若虚拟DOM中内容没变，直接使用之前的真实DOM
                       ②若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
                   2）旧虚拟DOM中未找到与新虚拟DOM相同的key
                       创建新的真实DOM，随后渲染到页面。
               3.用index作为key可能会引发的问题：
                   1）若对数据进行：逆序添加、逆序删除等破坏顺序操作：
                       会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。
                   2）如果结构中还包含输入类的DOM：
                       会产生错误更新==>界面有问题。
               4.开发中如何选择key？
                   1）最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
                   2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表</h2>
			<button type="button" @click.once="add">添加一个老刘</button>
			<ul>
				<li v-for="(p,index) in persons" :key="p.id">
					{{p.name}}--{{p.age}}
					<input type="text">
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
				},
				methods:{
					add(){
						const p={id:'004',name:'老刘',age:40}
						this.persons.unshift(p)
					}
				}
			})
		</script>

列表过滤

<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keywords">
			<ul>
				<li v-for="(p,index) in filPersons" :key="index">
					{{p.name}}--{{p.age}}--{{p.sex}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			// 用watch实现
			// new Vue({
			// 	el:'#root',
			// 	data:{
			// 		keywords:'',
			// 		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:[]
			// 	},
			// 	watch:{
			// 		keywords:{
			// 			immediate:true,
			// 			handler(val){
			// 				this.filPersons=this.persons.filter((p)=>{
			// 					return p.name.indexOf(val)!=-1
			// 				})
			// 			}
			// 		}
			// 	}
			// })
			
			// 用computed实现
			new Vue({
				el:'#root',
				data:{
					keywords:'',
					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:'男'}
					]
				},
				computed:{
					filPersons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keywords)!=-1
						})
					}
				}
			})
		</script>

列表排序

<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keywords">
			<button type="button" @click="sortType=2">年龄升序</button>
			<button type="button" @click="sortType=1">年龄降序</button>
			<button type="button" @click="sortType=0">原顺序</button>
			<ul>
				<li v-for="(p,index) in filPersons" :key="p.id">
					{{p.name}}--{{p.age}}--{{p.sex}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			
			new Vue({
				el:'#root',
				data:{
					keywords:'',
					sortType:0,		//0原顺序 1降序 2升序
					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:'男'}
					]
				},
				computed:{
					filPersons(){
						const arr= this.persons.filter((p)=>{
							return p.name.indexOf(this.keywords)!=-1
						})
						// 判断是否需要排序
						if(this.sortType){
							arr.sort((p1,p2)=>{
								return this.sortType===1?p2.age-p1.age:p1.age-p2.age
							})
						}
						return arr
					}
				}
			})
		</script>

模拟一个数据检测

<script type="text/javascript">
			let data = {
				name: '北京大学',
				address: '北京'
			}
			// 创建一个监视的实例对象，用于监视data中属性的变化
			const obs = new Observer(data)
			console.log(obs)
			
			// 准备一个vm实例对象
			let vm={}
			vm._data=data=obs

			function Observer(obj) {
				// 汇众对象中所有的属性形成一个数组
				const keys = Object.keys(obj)
				// 遍历
				keys.forEach((k) => {
					Object.defineProperty(this, k, {
						get() {
							return obj[k]
						},
						set(val) {
							console.log(`${k}被改了，我要去解析模板，生成虚拟DOM....我要开始忙了`)
							obj[k] = val;
						}
					})
				})
			}
		</script>

Vue.set的实验

<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
			<h2>校长是：{{leader}}</h2>
			<hr >
			<h1>学生信息</h1>
			<button type="button" @click="addSex">添加一个性别属性，默认值是男</button>
			<h2>学生姓名：{{student.name}}</h2>
			<h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
			<h2>学生年龄：真实{{student.age.rAge}}，对外{{student.age.rAge}}</h2>
			<h2>朋友们</h2>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			
			const vm=new Vue({
				el:'#root',
				data:{
					name:'北京大学',
					address:'北京',
					student:{
						name:'Tom',
						age:{
							rAge:40,
							sAge:29
						},
						friends:[
							{name:'Jerry',age:35},
							{name:'Tony',age:36}
						]
					}
				},
				methods:{
					addSex(){
						// Vue.set(this.student,'sex','男')
						this.$set(this.student,'sex','男')
					}
				}
			})
		</script>

总结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的根数据对象添加属性！！！

<div id="root">
			<h1>学生信息</h1>
			
			<button type="button" @click="student.age++">年龄+1岁</button><br>
			<button type="button" @click="addSex">添加性别属性，默认值：男</button><br>
			<button type="button" @click="student.sex='未知'">修改性别</button><br>
			<button type="button" @click.once="addFriend">在列表首位添加一个朋友</button><br>
			<button type="button" @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br>
			<button type="button" @click="addHobby">添加一个爱好</button><br>
			<button type="button" @click="updateHobby">修改第一个爱好为：开车</button><br>
			<button type="button" @click="removeSmoke">过滤掉爱好中的抽烟</button>
			
			<h2>学生姓名：{{student.name}}</h2>
			<h2>学生年龄：{{student.age}}</h2>
			<h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
			<h2>爱好</h2>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
			</ul>
			<h2>朋友们</h2>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			
			const vm=new Vue({
				el:'#root',
				data:{
					student:{
						name:'Tom',
						age:18,
						hobby:['抽烟','喝酒','烫头'],
						friends:[
							{name:'Jerry',age:35},
							{name:'Tony',age:36}
						]
					}
				},
				methods:{
					addSex(){
						// Vue.set(this.student,'sex','男')
						this.$set(this.student,'sex','男')
					},
					addFriend(){
						this.student.friends.unshift({name:'jack',age:70})
					},
					updateFirstFriendName(){
						this.student.friends[0].name='张三'
					},
					addHobby(){
						this.student.hobby.push('学习')
					},
					updateHobby(){
						// this.student.hobby.splice(0,1,'开车')
						// Vue.set(this.student.hobby,0,'开车')
						this.$set(this.student.hobby,0,'开车')
					},
					removeSmoke(){
						this.student.hobby=this.student.hobby.filter((h)=>{
							return h!='抽烟'
						})
					}
				}
			})
		</script>

收集表单数据

收集表单数据：
               若：<input type="text">，则v-model收集的是value值，用户输入的就是value值。
               若：<input type="radio">，则v-model收集的是value值，且要给标签配置value值。
               若：<input type="checkbox">
               1.没有配置input的value属性，则v-model收集的就是checked（勾选or未勾选，是布尔值）
               2.配置input的value属性：
                   1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）
                   2）v-model的初始值是数组，那么收集的就是value组成的数组
               备注：v-model的三个修饰符：
                   lazy：失去焦点再收集数据
                   number：输入字符串转为有效的数字
                   trim：输入首尾空格过滤

<div id="root">
			<form @submit.prevent="demo">
				账号：<input type="text" v-model.trim="userInfo.account"><br>
				密码：<input type="password" v-model="userInfo.password" /><br>
				年龄：<input type="number" v-model.number="userInfo.age" /><br>
				性别：
				男<input type="radio" name="sex" v-model='userInfo.sex' value="male" />
				女<input type="radio" name="sex" v-model='userInfo.sex' value="female" /><br>
				爱好：
				学习<input type="checkbox" v-model="userInfo.hobby" value="study"/>
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game"/>
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"/><br>
				所属校区
				<select v-model="userInfo.city">
					<option value="">请选择校区</option>
					<option value ="beijing">北京</option>
					<option value ="shanghai">上海</option>
					<option value ="shenzhen">深圳</option>
					<option value ="wuhan">武汉</option>
				</select><br>
				其他信息：
				<textarea v-model.lazy="userInfo.other"></textarea>
				<br>
				<input type="checkbox" v-model="userInfo.agree" />阅读并接收<a href="">《用户协议》</a>
				<br>
				<button type="submit">提交</button>
			</form>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			new Vue({
				el:"#root",
				data:{
					userInfo:{
						account:'',
						password:'',
						age:'',
						sex:'female',
						hobby:[],
						city:'',
						other:'',
						agree:""
					}
				},
				methods:{
					demo(){
						console.log(JSON.stringify(this.userInfo))
					}
				}
			})
		</script>

过滤器

                定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
               语法：
                   1.注册过滤器：Vue.filter(name,callback)或 new Vue{filters:{}}
                   2.使用过滤器：{{xxx | 过滤器名}}或v-bind:属性="xxx | 过滤器名"
               备注：
                   1.过滤器也可以接收额外参数、多个过滤器也可以串联
                   2.并没有改变原本的数据，是产生新的对应的数据

<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是：{{fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
		</div>
		
		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			// 全局过滤器
			Vue.filter('mySlice',function(value){
				return value.slice(0,4)
			})
			new Vue({
				el:'#root',
				data:{
					time:Date.now()
				},
				computed:{
					fmtTime(){
						return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
					}
				},
				methods:{
					getFmtTime(){
						return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
					}
				},
				filters:{
					timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){
						return dayjs(value).format(str)
					}
				}
			})
			
			new Vue({
				el:'#root2',
				data:{
					msg:'hello world'
				}
			})
		</script>

内置指令

v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换节点中的内容，{{xx}}则不会。

<div id="root">
			<div>{{name}}</div>
			<div v-text="name"></div>
			<div v-text="str"></div>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			new Vue({
				el:'#root',
				data:{
					name:'你好世界',
					str:'<h3>你好</h3>'
				}
			})
			
		</script>

v-html指令：
               1.作用：向指定节点中渲染包含html结构的内容。
               2.与插值语法的区别：
                   1）v-html会替换掉节点中所有的内容，{{xx}}则不会
                   2）v-html可以识别html结构
               3.严重注意：v-html有安全性问题！！！
                   1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
                   2）一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！

<div id="root">
			<div v-text="name"></div>
			<div v-html="str"></div>
			<div v-html="str2"></div>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			new Vue({
				el:'#root',
				data:{
					name:'你好世界',
					str:'<h3>你好</h3>',
					str2:'<a href=javascript:location.href="http://www.baidu.com">世界</a>'
				}
			})
			
		</script>

v-cloak指令（没有值）：
1.本质是一个特殊属性，vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.config.productionTip=false
			
			new Vue({
				el:'#root',
				data:{
					name:''
				}
			})
		</script>

v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<div id="root">
			<h2 v-once>初始化的n值是：{{n}}</h2>
			<h2>当前的n值是：{{n}}</h2>
			<button type="button" @click="n++">点我n+1</button>
		</div>
		
		<script type="text/javascript">
			new Vue({
				el:'#root',
				data:{
					n:1
				}
			})
		</script>

v-pre指令：
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<div id="root">
			<h2 v-pre>vue其实很简单</h2>
			<h2 v-pre>当前的n值是：{{n}}</h2>
			<button v-pre @click="n++">点我n+1</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#root',
				data:{
					n:1
				}
			})
		</script>

自定义指令

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

<div id="root">
			<h2>当前的n值是：<span v-text="n"></span></h2>
			<h2>放大10倍后的n值是：<span v-big="n"></span></h2>
			<button type="button" @click="n++">点我n+1</button>
			<hr>
			<input type="text" v-fbind:value="n" />
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false
			Vue.directive('fbind',{
				// 指令与元素成功绑定时（一上来）
				bind(element, binding) {
					element.value=binding.value
				},
				// 指令所在元素被插入页面时
				inserted(element, binding) {
					element.focus()
				},
				// 指令所在模板被重新解析时
				update(element, binding) {
					element.value=binding.value
				}
			})
			new Vue({
				el: '#root',
				data: {
					n: 1
				},
				directives: {
					// big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
					big(element, binding) {
						console.log('big',this)		//此处的this是window
						element.innerText = binding.value * 10
					},
					// fbind: {
					// 	// 指令与元素成功绑定时（一上来）
					// 	bind(element, binding) {
					// 		element.value=binding.value
					// 	},
					// 	// 指令所在元素被插入页面时
					// 	inserted(element, binding) {
					// 		element.focus()
					// 	},
					// 	// 指令所在模板被重新解析时
					// 	update(element, binding) {
					// 		element.value=binding.value
					// 	}
					// }
				}
			})
		</script>

           自定义指令总结：
               一、定义语法：
                   1）局部指令：
                       new Vue({
                           directives:{指令名:配置对象}
                       })
                       或
                       new Vue({
                           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或组件实例对象。

<div id="root">
			<h2>当前的n值时候：{{n}}</h2>
			<button type="button" @click="add">点我n+1</button>
			<button type="button" @click="bye">点我销毁vm</button>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false
			new	Vue({
				el:'#root',
				data:{
					n:0
				},
				methods:{
					add(){
						this.n++
					},
					bye(){
						this.$destroy()
					}
				},
				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')
				}
			})
		</script>

常用的生命周期钩子：
               1.mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作。
               2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾工作。
           关于销毁vue实例
               1.销毁后借助vue开发者工具看不到任何信息。
               2.销毁后自定义事件会失效，但原生DOM事件依然有效。
               3.一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。

有爱的萌哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue核心

目录初识vuevue模板语法数据绑定el与data的两种写法MVVM模型数据代理事件处理计算属性监视属性绑定样式条件渲染列表渲染收集表单数据过滤器内置指令自定义指令生命周期初识vue初识vue： 1.想让vue工作，就必须创建一个vue实例，且要传入一个配置对象 2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的vue语法 3.root容...
复制链接

扫一扫