vue入门到精通详解介绍（第一部分）data详细介绍

最新推荐文章于 2024-05-08 17:51:53 发布

追梦者123

最新推荐文章于 2024-05-08 17:51:53 发布

阅读量5.8k

点赞数 31

本文链接：https://blog.csdn.net/WYT11/article/details/119703733

版权

第一章

引入vue脚本在html页面上
基本操作

<!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>
<script src="../js/vue.js"></script>
<body>
    <div class="app">
        <h1> hello {{name}} {{demo()}}</h1>
    </div>
   
</body>
<script>
    new Vue({
        el:".app",
        data:{
            name:"张三"
        },
        methods:{
            demo (){
                    return "test  demo"
            }
        }
    })
</script>
</html>

{{}} 里面能写data里面的属性，可以是运算表达式或者三目表达式，或者函数

动态指令
v-bind 可以动态的给标签的属性绑定data里面的值(标签属性)

可以简写为：v-bind:href ==== (:href)
不管{{}}还是v-bind 获取的都是data的第一层数据如果多层就需要从第一层一直.下去去找

{{}}：插值语法
v-bind 指令语法（单向绑定）data里面的值绑定到元素中
v-model (双向绑定) data与元素之间数据互通绑定（只能用在表单元素（输入类元素））

总结：

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

el与data的两种写法

在这里插入图片描述
data不要写成箭头函数，因为调用者是window 要么data:function(){ return {name:'aaaa'}} ,要么 data(){ return{ name:‘aaa’ }}
小结：

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

mvvm的理解

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

Object.defineProperty方法说明

在这里插入图片描述
数据代理

数据代理原理

数据代理详情

1.Vue中的数据代理：
	 通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
	 更加方便的操作data中的数据
3.基本原理：
	 通过Object.defineProperty()把data对象中所有属性添加到vm上。
	为每一个添加到vm上的属性，都指定一个getter/setter。
	在getter/setter内部去操作（读/写）data中对应的属性。

事件处理

v-on:click=“方法名” data 中methods：{}中定义方法，该方法不能是箭头函数可以简写为@click=“方法名”
注意：方法后面的（）可以省略，因为没有参数，也可以加上（）需要传参数的时候，可以使用$event为占位符，在方法中进行event参数占位

只要data里面的数据，vue才会做数据代理

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

vue事件修饰符

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

多个事件修饰，可以使用. 连续写

键盘事件

@keyup 松手之后 @keydown 按下键盘

计算属性

在这里插入图片描述

注意：实际上上面的fullName是vm中的属性不是函数所以插值语法中只能写{{fullName}} 不能写成{{fullName()}}

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

也可以将fullName 简写为函数就当做返回值值，相当于get()方法

监视属性

wathc
在这里插入图片描述

computed和watch之间的区别：
	1.computed能完成的功能，watch都可以完成。
	2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
	1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
	2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
	这样this的指向才是vm 或 组件实例对象。

vue绑定class样式

:class=""

style绑定，可以是一个对象
在这里插入图片描述
：style值可以是一个数组对象

总结：

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

vue条件渲染

v-show="" 结果是一个boolean值，表示当前元素隐藏还是显示（可以是一个Boolean值也可以是表达式，或者逻辑运算）
v-if用法和v-show用法一样
二者的区别是v-show还在页面，只是隐藏起来了，而v-if 是直接从页面去除掉了，不存在了

条件渲染：
	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一定可以获取到。
	注意：template标签只能和v-if结合使用，不能和v-show结合使用

列表

v-for 标签用于循环数据，UI li 应该标记在立标签上面

<ul>
<li p in person > 循环<li> // 或者 <li (per, p ) in person></li>
</ul>
 如果循环的是对象数组 ，里面两个参数的，第一个是结果第二个参数是下标   每个循环的标签应该加上：（：key="index"） 对象里面唯一的数据
 数组，对象，字符串都一样
如果被循环的数据是一个数组，表示循环到到那个数，也可以说循环多少次

v-for 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：
		会产生错误DOM更新 ==> 界面有问题。

4. 开发中如何选择key?:
	1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
	2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
	使用index作为key是没有问题的。

列表过滤

computed:{
	filPerons(){
			return this.persons.filter((p)=>{
			return p.name.indexOf(this.keyWord) !== -1 // keyWord是被监视字段
				})
			}
	}

和watch

watch:{
	keyWord:{ //被监视字段
		immediate:true,
		handler(val){
			this.filPerons = this.persons.filter((p)=>{
				return p.name.indexOf(val) !== -1
							})
						}
					}
				}

二者的区别
watch:
1,是当被监视字段发生改变的时候就执行该字段相应的方法，
2,（加上imediate:true）是表示刚开始加载完就执行该方法
computed:
两个时候调用
1，一上来就调用
2，所监视的字段发生改变的时候
当该字段一旦发生改变就执行相应的方法，一上来就加载computed里面的所有方法（该方法是根据返回值判断的）
注意：computed里面能实现的方法，在watch中都可以实现

vue的set()方法

对象的set方法

Vue.set(vm._data.student,“sex”,“f”) vue.$set(vm.student,“sex”,“f”)
但是二者有局限性都只能是data里面的某个属性的对象，不能直接对data里面的属性操作，（就是说是属性里面的属性）
这样可以给对象添加get,set方法，进而实现动态数据绑定

数组的set方法

数组可以使用这些方法
在这里插入图片描述

push 添加
shift 删除
splice

小总结

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

追梦者123

关注

31
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
vue入门到精通详解介绍（第一部分）data详细介绍

第一章引入vue脚本在html页面上基本操作<!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"
复制链接

扫一扫