vue学习笔记整理

已于 2022-03-21 13:50:15 修改
阅读量819 收藏
点赞数
文章标签： vue.js 学习 前端
于 2022-03-17 14:48:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48020259/article/details/123547780
版权

vue学习笔记整理

初识VUE

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】；
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

1.遵循 MVVM 模式

2.编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3.它本身只关注 UI, 也可以引入其它第三方库开发项目

一、MVVM模型

1.模式演示

vue 参考MVVM模型设计出独有的模型

M：模型(Model) ：对应 data 中的数据，数据是函数对象，存储方式（Key:Value）

V：视图(View) ：模板->解析形成页面

VM：视图模型(ViewModel) ： Vue 实例对象 ，因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

Data Bindings（数据绑定）:通过数据绑定，把数据摆到页面上的位置
DOM Listeners（页面监听）:页面的改变会映射为数据的改变，例：“input输入框 使用V-model 输入框的内容会改变data中的数据”

在这里插入图片描述代码演示
在这里插入图片描述

2.总结

MVVM模型的作用就是将数据和DOM结构进行连接

二、模板语法

1.插值语法

  • 功能：用于解析标签体内容。
  • 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法

  • 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
  • 举例：v-bind:href=“xxx” 或 简写为:href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
  • 备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。

3.代码演示

	<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'尚硅谷',
					url:'http://www.atguigu.com',
				}
			}
		})
	</script>

三、数据绑定

1.单向绑定(v-bind)

数据只能从data流向页面。

1.双向绑定(v-model)：

数据不仅能从data流向页面，还可以从页面流向data。
备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

四、data与el的2种写法

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

1.el有2种写法

指定的容器

<div id="root">
		<h1>你好，{{name}}</h1>
	</div>

(1).new Vue时候配置el属性。

<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//el的两种写法
		 const v = new Vue({
			el:'#root', //第一种写法
			data:{
				name:'尚硅谷'
			}
		})
</script>

(2).先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值。

<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//el的两种写法
		 const v = new Vue({
			data:{
				name:'尚硅谷'
			}
		})
		v.$mount('#root')
</script>

2.data有2种写法

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

(1).对象式

data:{
				name:'尚硅谷'
			}

(2).函数式

data(){
				console.log('@@@',this) //此处的this是Vue实例对象
				return{
					name:'尚硅谷'
				}
			}

五、数据代理

  • 通过数据代理的添加的数据，不可被枚举，不可更改，不可删除
  • 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

1.Object.defineproperty

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(Object.keys(person))

			console.log(person)
		</script>

2.Vue中的数据代理

  1. Vue中的数据代理： 通过vm对象来代理data对象中属性的操作（读/写）
  2. Vue中数据代理的好处： 更加方便的操作data中的数据
  3. 基本原理： 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'宏福科技园'
			},			
		});
		vm.name = '1';
	</script>

在这里插入图片描述

六、事件的基本使用：

1.事件的基本使用

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

时间想要传参的同时，获取event，需要用$event占位

<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- <button v-on:click="showInfo">点我提示信息</button> -->
			<button @click="showInfo1">点我提示信息1（不传参）</button>
			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
			},
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>

2.Vue中的事件修饰符

  • 1.prevent：阻止默认事件（常用）；
  • 2.stop：阻止事件冒泡（常用）；
  • 3.once：事件只触发一次（常用）；
  • 4.capture：使用事件的捕获模式；
  • 5.self：只有event.target是当前操作的元素时才触发事件；
  • 6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
	<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

2.Vue中的键盘事件

  • 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.keyCodes.自定义键名 = 键码，可以去定制按键别名
	<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})

e.key:得到按键名称
e.keycode:得到按键编码

七、计算属性

  • 1.定义：要用的属性不存在，要通过已有属性计算得来。
  • 2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
  • 3.get函数什么时候执行？ (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。
  • 4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
  • 5.备注：
    （1）.计算属性最终会出现在vm上，直接读取使用即可。
    （2）.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
	<body>
	
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			测试：<input type="text" v-model="x"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			<!-- 全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			methods: {
				demo(){
					
				}
			},
			computed:{
				fullName:{
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						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>

七、条件渲染

使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

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元素未被移除，仅仅是使用样式隐藏掉

3v-if和v-show的区别

原理

  • v-show指令：元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏
  • v-if指令：满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示

八、列表渲染

1.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可能会引发的问题：
    （1）若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

    （2）如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。

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

  • 使用唯一标识作为key每条数据渲染出的真实DOM的key是固定的，新增的数据不会影响原有的数据

  • 使用index或者未设置key（未设置key，vue默认key为index）每条数据从虚拟DOM渲染到真实DOM时Key都会从0开始遍历。

  • 虚拟DOM对比算法（diff算法）：对比之前的数据，有相同的数据，直接复用之前的真实DOM

2.列表过滤

原理：使用filter函数来进行过滤（filter函数会保返回值为true的数据），将输入的内容与数组进行匹配（indexof），若输入内容与数组内容不匹配，则返回-1

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>
		</body>

watch实现

  1. 为了不改变原数组，需要将过滤后的数组放到新数组filPerons:[]中
  2. 因为新数组filPerons:[]在列表渲染是空数组，所以需要使用immediate:true（表示列表渲染完立即监听一次）
<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
	
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			})
			</script>

用computed实现

	<script type="text/javascript">
			Vue.config.productionTip = false
				new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
		</script>

列表排序

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<button @click="sortType = 2">年龄升序</button>
			<button @click="sortType = 1">年龄降序</button>
			<button @click="sortType = 0">原顺序</button>
			<ul>
				<li v-for="(p,index) of filPerons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
					<input type="text">
				</li>
			</ul>
		</div>
		</body>

在列表渲染的基础上添加sort函数

<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0, //0原顺序 1降序 2升序
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						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>

八、检测数据原理（响应式）

1.实现原理

vue中数据改变时会调用data中的set方法，set方法一调用，就会进行模板解析，生成虚拟DOM

关于vue监视对象：
直接添加的sex属性，没有getter和setter，无法实现响应式
在这里插入图片描述利用Vue.set()添加的sex属性，有getter和setter，可以实现响应式
在这里插入图片描述

2.替换数组

变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：


example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

2.总结

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

九.render

render: h => h(App),

完整写法

render(h){
	return h('h1','你好啊')
}
  • vue.js与vue.runtime.xxx.js的区别： vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
  • vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
  • 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

十.自定义事件

通过父组件给子组件绑定一个自定义事件实现：子给父传递数据

1.原理

  1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

  2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

  3. 绑定自定义事件：

    1. 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

    2. 第二种方式，在父组件中：

      <Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}

    3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  4. 触发自定义事件：this.$emit('atguigu',数据)

  5. 解绑自定义事件this.$off('atguigu')

  6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

  7. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

实践

子组件

methods: {
	sendStudentlName(){
					//触发Student组件实例身上的atguigu事件
					this.$emit('atguigu',this.name,666,888,900)
					// this.$emit('demo')
					// this.$emit('click')
				},
},

父组件第一种写法：（第一种写法，使用@或v-on）

<div class="app">
<Student @atguigu="getStudentName" @demo="m1"/>
</div>

methods: {
getStudentName(name,...params){
				console.log('App收到了学生名：',name,params)
				this.studentName = name
			},
			}

父组件第二种写法，使用ref

<Student ref="student" @click.native="show"/>

mounted() {
			this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
		},
weixin_48020259
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值