Vue学习(B站尚硅谷)

已于 2023-03-29 17:56:15 修改
阅读量1.7k 收藏 18
点赞数 24
文章标签： 学习 vue 前端
于 2022-11-14 01:38:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55828026/article/details/127426929
版权

Vue学习笔记

目录

第一章 开始

1.1、Vue是什么？

一套用于构建用户界面的渐进式JavaScript框架。
创始人：尤雨溪

1.2、Vue的特点

采用组件化的模式，提高代码复用率、且让代码更好维护。
声明式编码，让编码人员无需直接操作DOM，提高开发效率。

第二章 下载安装

2.1、下载Vue环境

vue官网：https://v2.cn.vuejs.org/
下载地址：https://v2.cn.vuejs.org/v2/guide/installation.html
	开发版本：包含了完整的警告和调试（学习版）
	生产版本：删除了警告

2.2、下载浏览器开发者工具

https://github.com/vuejs/devtools#vue-devtools

2.3、引入

注意：只要是用到vue，都必须导入！！！

<script src="url"></script> //url就是vue的路径

2.4、关闭浏览器开发者提示：

当你使用开发版本而不是生产版本时，这个时候写vue代码，浏览器控制台（console）会提示警告信息。意思为“您正在开发模式下运行Vue。在进行生产部署时，请确保打开生产模式。更多建议请访问…”，这里可以直接修改Vue.config对象下的productionTip,默认开启true，false表示关闭生产提示。Vue.config 获取Vue的全局配置对象，可以在启动应用之前修改。

<script>
	Vue.config.productionTip = false;
</script>

导入vue 和 修改vue配置，并没有使用vue，只是处于待命状态。

第三章 创建第一个Vue对象

3.1、创建vue实例：

3.1.1、模板语法
new Vue({				//只传一个对象参数【实例对象可以不用】
    el:'#root',    		//el用于指定当前vue为哪一个元素使用，通常值为css选择器字符串。
    data: {				//data中的数据，只提供el中的选择器使用。值暂时可以写成对象
        键: '值'，
    }
});
3.1.2、el的第二种写法：

构建出Vue实例，使用：实例.$mount(‘#root’);

let vm = new Vue({
    data: {
        键: '值',
    }
});
vm.$mount('#root');
3.1.3、data的第二种写法：
data(){
	return{
		键: '值',
	}
}

3.2、root容器里的代码被称为【Vue模板】

1、容器和vue实例一一对应。
2、真实开发中只有一个vue实例，并且会配合着组件一起使用。
3、如果data 中的数据发生改变，那么页面中到该函数的地方也会自动更新。

3.3、添加到HTML语法规范

3.3.1、插值法：
插值语法用于解析标签体内容

<div id="root">
	<p>Hello JavaScript!我爱学</p>			//正常写法
	<p>Hello {{name}}!{{love}}</p>			//插入vue数据的写法1
</div>
<script>
	Vue.config.productionTip = false;	//取消浏览器提示
	new Vue({							//Vue对象
		el: '#root',
		data: {
			name: 'JavaScript',			//对应第二个p标签里的数据
			lave: '我爱学'
		}
	});
</script>

{{ 键 }} 花括号内只要是一个JS表达式就可以。例如：{{1+2+3}}或{{name}}

3.3.2、指令语法：
 指令语法用于解析标签（属性、内容、绑定事件等...）

v-bind:属性=“值”，v-bind可以简写成:
v-bind:属性 = “值” 等价于 :属性= “值”
多级数据可以使用 键.键 的形式逐层访问

<div id="box">
	<a :href="url" :name="data2.naem">超链接标签{{apcdewy.name}}</a>
</div>
<script>
	Vue.config.productionTip = false;
	new Vue({
	    el:'#box',
	    data:{
			name:'龙叔'，
			url:"www.baidu.com",
			apcdewy:{
		   	 	name:'渣渣灰'，
			}
	   	}
	});
</script>

第四章 数据绑定

4.1、单向数据绑定（v-bind：）

数据只能从data流向页面

详解 ：vue下的data中的数据改变，就会影响页面的数据，而页面数据如果出现改变，不会影响data下的数据。

4.2、双向数据绑定（v-model:value）

数据可以从data流向页面，也能从页面流向data      //只能应用在表单元素
v-model:value可以简写为v-model

详解：不管是data下的数据还是页面下的数据，一方改变，另一方更着改变。

第四章 MVVM模型简介

MVVM模型是一种架构框架，Vue虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm 这个变量名表示 Vue 实例。

M	=>	模   型	=>	data中的数据
V	=>	视   图	=>	模板代码
VM	=>	视图模型	=>	Vue实例

重点：
1、data中的所以属性都会成为vue实例的属性。
2、vue实例上的属于属性都可以直接使用。

第五章 数据代理

5.1、给对象添加属性而不直接修改对象的好处：

	1、添加的属性拥有更多的选项
	2、添加的属性可以与变量双向值绑定setter/getter

Object.defineProperty(实例对象,"键",{
    value:值,
    enumerable:true,			//控制属性是否可以被枚举，默认false，迭代
    writable:true,       		//控制属性是否可以被修改，默认false
    configurable:true,  		//控制属性是否可以被删除，默认false
    get(){return '';},	   		//当调用这个属性，get就会被调用。返回值就是value值
    set(value){ 变量 = value；}	//当修改这个属性，set就会被调用。用来修改值
});

例子：对象之间绑定，通过对象1可以操作修改对象2的属性。

5.2、vue实例基本原理：

实例化vue对象，将data添加到vue中_data属性下的对象里面，然后再把各个数据添加到新属性下，方便程序员访问，就不用每次都_data.键获取值了，每次获取或修改值都是通过getter/setter方法来进行，获取原data里面的数据。

第六章 事件处理

v-on:click = 方法名（ e v e n t ，参数列表）当这个元素被点击时触发。函数必须写在 v u e 实例下， event，参数列表） 当这个元素被点击时触发。函数必须写在vue实例下， event，参数列表）当这个元素被点击时触发。函数必须写在vue实例下，event是一个默认的参数。
简写：@click，没有参数省略括号，其他事件使用v-on:xxx

//不做数据代理，如果写在data里面会多出数据代理，因为方法一般情况只负责展示效果，不做修改，使用methods更方便。
methods:{
	方法(event,参数列表){//当只有一个一个默认参数event的时候，可以省略掉。
		//此处的this是vm，this可以访vm实现访问data里面的属性。
		event.target.innerHTML = 456;
	}
}

第七章 事件修饰符

与事件处理methods，@xxx配合使用
修饰符意义
trim去除前后空格
number输入的数据强转换为数值型，只能接收数字
lazy懒收集，只有文本框失去焦点才会收集信息
prevent阻止默认事件 （eg:a标签点击会跳转，表单提交等）
stop阻止事件冒泡
once事件只触发一次
capture使用事件的捕获模式
self只有event.target是当前元素的情况下才触发事件。
passive事件的默认行为立即执行，无需等待事件回调执行完毕。（滚动事件）
…事件修饰符可叠加使用
<body>
	<div id="box1" @click="div1">
		<div id="box2" @click="div2">
			<!-- 阻止继续向上冒泡 -->
			<div id="box3" @click.stop="div3">
				<a :href="url" @click.prevent.stop="fun">{{name}}</a>
			</div>
		</div>
	</div>
	<script>
		Vue.config.productionTip=false;
		new Vue({
			el:'#box1',
			data:{
				url:'https://www.baidu.com/',
				name:'百度'
			},
			methods: {
				fun(e) {
					alert("a标签被点击了");
				},
				div1(e){
					alert("div1被点击了");
				},
				div2(e){
					alert("div2被点击了");
				},
				div3(e){
					alert("div3被点击了");
				}
			},
		});
	</script>
</body>

第八章 键盘事件

键盘事件的修饰符：
	回车：enter
	删除：delete
	退出：esc 
	空格：space
	换行：tab（特殊，keydown使用）
	上：up
	下：down
	左：left
	右：right
	系统修饰符：ctrl , alt , shift , meta,

可以通过输出event.keycode得到按键的编码。event.key得到按键的英文
		多个英文使用小写中间使用横线分隔。
@keyup.event="show"	 

<body>
	<input type="text" id="a1" @keyup.enter="name">
	<script>
		Vue.config.proproductionTip = false;
		new Vue({
			el:'#a1',
			// data:{}
			methods: {
				name(e) {
					// 这里写键盘事件触发后执行的代码
					console.log(e.target.value);
				}
			},
		});
	</script>
</body>

name(e) {
	// 这里写键盘事件触发后执行的代码
	if(e.key != 'Enter')		//或者	(e.keycode != 13)
		return;
	console.log(e.target.value);
}

第九章 计算属性

插值语法和指令语法中的值要写的简单明了，需要其他操作一般在Vue内部处理掉

methods:{}创建一个方法。//无缓存
computed:{}创建一个属性:{ get(){} }

<body>
	<div id="a1">
		<div>{{name1}}</div>
		<div>{{name2}}</div>
		<div>{{name3}}</div>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		new Vue({
			el:'#a1',					//绑定节点
			data:{
				name1:'zhang',
				name2:'san'
			},							//数据
			computed: {					//计算属性
				name3: {				//新创建的一个计算属性
					get(){
						console.log("被调用了");
						return this.name1 + '-' + this.name2;
					}
				}
				/*简写
				name3(){
					console.log("被调用了");
					return this.name1 + '-' + this.name2;
				}
				*/
			},
		});
	</script>
</body>

get()返回值就是属性的值。当读取属性的时候就会自动调用get,get不能直接调用，也可以设置setter，setter必须修改到具体属性才会修改，一般在computed中不写set。

定义：要通过已有的属性计算得来。
**computed会自动缓存，当初次使用或修改的时候才会调用重新缓存**
简写：（只考虑读取，不考虑修改才会考虑简写）
	属性（）{}		//使用时不加括号！！
	思考：在插入的是vm下的属性还是方法就能决定是加括号还是不加括号，目前只有methods属性下的方法才加括号。

第十章 侦听属性（监视属性）

10.1、侦听

<body>
	<div id="root">
		<div>{{a}}</div>
		<div>{{b}}</div>
		<!-- <input type="text" v-model:value="b"> -->
		<button @click="name_a">改变a的值</button>
		<button @click="name_b">改变b的值</button>
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				a:1000,
				b:100
			},
			methods: {
				name_a() {
					this.a++;
				},
				name_b() {
					this.b++;
				}
			},
			watch: {
				a:{
					handler(newValue, oldValue) {
						console.log("修改了"+newValue+'  '+oldValue);
					}
				},
				b:{
					handler(newValue, oldValue) {
						console.log("修改了"+newValue+'  '+oldValue);
					}
				}
			},
		});
	</script>
</body>

watch:{
   属性名：{
        immediate: true,  		//初始化时让handler调用。
        deep:true,					//深度测试
        handler（newValue，oldValue）{
       		 //当属性被修改时触发,会传来新值和旧值
        }
    }
}

监视属性必须存在才能被监视，不存在也不会报错。

10.2、监视属性的两种写法：

	1、通过watch配置
	2、通过实例对象，vm.$watch监视

vm.$watch(‘属性’， {。。。handler(x,y){}})

vm.$watch('a',{
	handler(newValue, oldValue){
		console.log("修改了"+newValue+'  '+oldValue);
	}
});

10.3、深度监视(侦听)属性 ：

1、vue中的watch默认不监视对象内部的改变。
2、配置deep:true； 就可以监视对象内部的改变

watch中属性的写法其实需要引号括起来，只是简写省略了，如果需要访问属性对象下的属性，就必须加上引号。

watch:{
	//第一种 只侦听对象内的某一个属性
	'b.x':{
		handler(newValue,oldValue){
			console.log("x被改变了");
		}
	},
	//第二章 侦听整个对象  对象里的某一个属性改变  都会被侦听到
	b:{
		deep:true,
		handler(newValue,oldValue){
			console.log("b被改变了");	
		}
	}
}

10.4、侦听简写：

阉割了初始化调用handler和深度测试，但代码量减少了，方便编写

watch:{被监视属性（newValue, oldValue）{… }}

watch:{
	a(newValue,oldValue){
		console.log("a被改变了");
	}
}

vm.$watch('被监视属性'， function（newValue, oldValue）{})

10.5、computed VS watch 区别：

1、computed能完成的功能，watch也能实现，
2、watch能完成的功能，computed不一定能实现，例如watch可以进行异步操作。

10.6、vue 函数写法 两点原则：

1、所有被vue管理的函数，最好写成普通函数，这样this的指向就是vue 或 组件实例对象。
2、所有不被vue管理的函数（定时器的回调函数，ajax的回调，promise的回调），最好写成箭头函数。
这样this才能指向vm 或 组件实例对象。

第十一章 绑定样式

11.1、绑定class样式

11.1.1、绑定class样式：字符串写法

适用于：单个样式的类名不确定，需要动态指定

<style>
	.a {
		background-color: antiquewhite;
		width: 100px;
		height: 100px;
		margin:50px auto;
	}
	.b {
		background-color: aqua;
		width: 100px;
		height: 100px;
		margin:50px auto;
	}
</style>
<body>
	<div id="root" :class="style1">
		<button @click="fun">点击</button>
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				name:'李明',
				age:12,
				style1:'a'
			},
			methods: {
				fun() {
					this.style1 = 'b';
				}
			},
		});
	</script>
</body>
11.1.2、绑定class样式：数组写法

适用于：样式个数多不确定，可以使用数组包含样式，在通过直接调用数组，可以选择全部调用或按下标单个选择调用。

new Vue({
	el:'#root',
	data:{
		name:'李明',
		age:12,
		style1:['x','y','b'],
		style2:['x','y','b']
	},
	methods: {
		fun() {
			i = ~~(Math.random()*3);
			this.style1 = this.style2[i];
			console.log(this.style2[i]+" "+i);
		}
	},
});
11.1.2、绑定class样式：对象写法

适用于：个数确定，名字确定，但是动态决定用不用。

<body>
	<div id="root" class="a" :class="obj">
		我爱我的祖国！
		<button @click="funx">x</button>
		<button @click="funy">y</button>
	</div>
	
	<script>
		new Vue({
			el:'#root',
			data:{
				name:'李明',
				age:12,
				obj:{
					x:true,
					y:true					
				}
			},
			methods: {
				funx() {
					this.obj.x = !this.obj.x;
				},
				funy() {
					this.obj.y = !this.obj.y;
				}
			},
		});
	</script>
</body>

11.2、绑定style样式

11.2.1、对象写法

:style=“{fontSize:‘xxx’}”
把原来的样式属性改变成首字符不变，后面的单词首字母大写，省略掉横线。
eg:
（原：）background-color: red;
（改：）backgroundColor: ‘red’,
注意：单词写错也不会报错，也不会得到效果，在Vue里面写css编译器默认不会提示，所有可以使用在css块里面写好，复制到vue内，减小出错的概率。

func() {
	this.sty = {
		fontSize:'50px',	//数据用引号括起来
		color:'red'
	}
}
11.2.1、数组写法

适用于：多个样式对象一起使用的情况。

:style="[sty, sty2]"

第十二章 条件渲染

12.1、v-show

语法：v-show=“表达式”
特点：隐藏元素
适用于：切换频率高的情况

<body>
	<div id="root">
		<p v-show="n === 1">这是一个{{name1}}</p>
		<button @click="n++">按钮</button>
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				name1:'段落1',
				n:0,
			},
		});
	</script>
</body>

12.2、v-if

12.2.1、v-if…v-else-if…v-else

语法：v-if=“表达式”…v-else-if=“表达式”…v-else=“表达式”
注意：v-if…v-else-if…v-else必须连续出现，v-if打头（和js选择结构一样）
特点：移除元素（需要注意其他交互，会失去元素焦点）
适用于：切换频率少的情况（主要是删除没有隐藏效率高）

<body>
	<div id="root">
		<p v-if="n === 1">这是一个{{name1}}</p>
		<p v-else-if="n === 2">这是一个{{name2}}</p>
		<p v-else="n === 3">这是一个{{name3}}</p>
		<button @click="n++">按钮</button>
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				name1:'段落1',
				name2:'段落2',
				name3:'段落3',
				n:0,
			},
		});
	</script>
</body>
12.2.2、template模板

template模板不影响结构，但只能和v-if 连用，不能和v-show使用

<body>
	<div id="root">
		<!-- <p v-if="n === 1">这是一个{{name1}}</p>
		<p v-else-if="n === 2">这是一个{{name2}}</p>
		<p v-else="n === 3">这是一个{{name3}}</p> -->
		<template v-if="n != 0">
			<p>这是一个{{name1}}</p>
			<p>这是一个{{name2}}</p>
			<p>这是一个{{name3}}</p>
		</template>
		<button @click="n++">按钮</button>
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				name1:'段落1',
				name2:'段落2',
				name3:'段落3',
				n:0,
			},
		});
	</script>
</body>

第十三章 列表渲染

13.1、v-for 数组遍历

语法：v-for=“(i, index) in 数组” :key=“唯一标识”

i数组[i]
index下标

提示：index可以省略，括号可以省略，in老版本使用of同等功效，：key也可以省略

<body>
	<div id="root">
		<ul v-for="(i,index) in student" :key="i.id">
			<li>
				{{index}}-{{i.name}}-{{i.age}}
			</li>
		</ul>
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				student:[
					{id:'001',name:'张三',age:18},
					{id:'002',name:'李四',age:19},
					{id:'003',name:'王二',age:17}
				],
			}
		});
	</script>
</body>

13.2、遍历对象

value值
key键
<body>
	<div id="root">
		<ul v-for="(value,key) in zhangsan" :key="key">
			<li>
				{{key}}-{{value}}
			</li>
		</ul>
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				zhangsan:{
					id:'202201',
					name:'张三',
					age:18,
				}
			}
		});
	</script>
</body>

13.3、遍历字符串

与遍历数组一样，只是i代表的是单个字符，下标和数组相同

13.4、固定遍历（极少使用）

数据改成固定整数，i的值是1到数据本身，index是0到数据-1。

13.5、key的原理

Vue原始数据，通过虚拟DOM，生成真实 DOM，更改数据后新Vue数据也会生成一个虚拟DOM，然后新虚拟DOM会和旧虚拟DOM，通过key进行比较，文本相同或者新元素相同的直接挪来使用。
也就是说，key决定了比较的结果，如果插入新元素会影响原顺序，那么就必须指定一直独一无的的key值，因为插入后index会更着改变，所以index不可靠，
如果不指定key,那么key的值默认就是index下标。

13.6、列表过滤

直接上代码：

13.6.1、监视属性版本：
<body>
	<div id="root">
		<input type="text" placeholder="输入数据" v-model:value="val">
		<ul v-for="(i, index) in stu" :key="students.id" >
			<li>
				{{i.name}}-{{i.age}}-{{i.sex}}
			</li>
		</ul>
	</div>
	
	<script>
		new Vue({
			el:'#root',
			data:{
				val:'',
				students:[
					{id:01,name:'张一三',age:12,sex:'男'},
					{id:02,name:'张一二',age:15,sex:'男'},
					{id:03,name:'张二三',age:13,sex:'男'},
					{id:04,name:'张二四',age:12,sex:'女'}
				],
				stu:[]
			},
			watch:{
				val:{
					immediate:true,
					handler(va){
						this.stu=this.students.filter((s)=>{
							return s.name.indexOf(va) !== -1;
						})
					}
				}
			}
		});
	</script>
</body>
13.6.1、计算属性版本：
<body>
	<div id="root">
		<input type="text" placeholder="输入数据" v-model:value="val">
		<ul v-for="(i, index) in fun" :key="students.id" >//因为fun返回的就是一些对象序列，所以直接在这里使用了，省去了一个容器。
			<li>
				{{i.name}}-{{i.age}}-{{i.sex}}
			</li>
		</ul>
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				val:'',
				students:[
					{id:01,name:'张一三',age:12,sex:'男'},
					{id:02,name:'张一二',age:15,sex:'男'},
					{id:03,name:'张二三',age:13,sex:'男'},
					{id:04,name:'张二四',age:12,sex:'女'}
				],
			},
			computed: {
				fun() {
					return this.students.filter((s)=>{
						return s.name.indexOf(this.val) != -1
					})
				}
			},
		});
	</script>
</body>

13.7、列表排序

<body>
	<div id="root">
		<input type="text" placeholder="请输入" v-model="val">
		<button @click="x=1">升序</button>
		<button @click="x=2">降序</button>
		<button @click="x=0">复原</button>
		<ul v-for="(i,index) in fun" :key="students.id">
			<li>
				{{i.name}}-{{i.age}}-{{i.sex}}
			</li>
			
		</ul>
		
	</div>
	
	<script>
		new Vue({
			el:'#root',
			data:{
				val:'',
				students:[
					{id:01,name:'张一三',age:12,sex:'男'},
					{id:02,name:'李一二',age:15,sex:'男'},
					{id:03,name:'王二三',age:13,sex:'男'},
					{id:04,name:'张二四',age:11,sex:'女'}
				],
				x:0
			},
			computed: {
				fun() {
					const arr = this.students.filter((s)=>{
						return s.name.indexOf(this.val) !== -1
					})
					if(this.x){
						arr.sort((a,b)=>{
							return this.x == 1 ? a.age-b.age : b.age-a.age
						})
					}
					return arr
				}
			},
		});
	</script>
</body>

13.8、Vue监视数据的原理

1、Vue会监视data中所以层次的数据。

2、如何监测对象中的数据：
通过setter实现监视，且要在实例化对象时就传入要检测的数据
(1).对象中后追加的属性，Vue默认不做响应式。
(2).想要有响应式，就必须使用如下API:
Vue.set(this.属性，‘key’，value)或
vm.$set(this.属性2，‘key’，value)

3、如何监测数组中的数据：
通过包裹数组更新元素的方法实现，push()、pop()、shift()、splice、sort()、reverse()
filter(),可以直接把全部进行赋值，新数组替换旧数组，达到过滤筛选的目的。

实例代码：

<body>
	<div id="root">
		<button @click="age++">年龄+1</button><hr>
		<button @click="addSex">添加性别属性，默认男</button><hr>
		<button @click="changeSex">修改性别</button><hr>
		<button @click.once="addFriend">列表首位添加一个朋友</button><hr>
		<button @click="changeOneFriendname">修改第一个朋友的名字为xxx</button><hr>
		<button @click="addHobby">添加一个爱好</button><hr>
		<button @click="changeOneHobby">修改第一个爱好</button><hr>
		
		<h3>姓名：{{name}}</h1>
		<h3>年龄：{{age}}</h1>
		<h3 v-if="rests.sex">性别：{{rests.sex}}</h1>
		<h3>爱好：</h1>
		<ul v-for="i in hobby">
			<li>
				{{i}}
			</li>
		</ul>
		<h3>朋友：</h1>
		<ul v-for="i in friends">
			<li>
				{{i.name}}-{{i.age}}
			</li>
		</ul>
	</div>
	<script>
		let vm = new Vue({
			el: '#root',
			data: {
				name: '李四',
				age: 20,
				rests:{},
				hobby: ['抽烟', '喝酒', '吃肥肉'],
				friends: [{
						name: '张三',
						age: 18
					},
					{
						name: '王二',
						age: 21
					},
					{
						name: '麻子',
						age: 19
					}
				]
			},
			methods: {
				addSex() {
					vm.$set(this.rests,'sex','男')
				},
				changeSex(){
					if(this.rests.sex == '男')
						this.rests.sex = '女'
					else
						this.rests.sex = '男'
				},
				addFriend(){
					this.friends.unshift({name:'旺财',age:2})
				},
				changeOneFriendname(){
					this.friends[0].name = 'xxx'
				},
				addHobby(){
					this.hobby.push('多和异性交朋友')
				},
				changeOneHobby(){
					this.hobby.shift()
					this.hobby.unshift('打球')
				}
			},
		});
	</script>
</body>

第十四章 收集表单数据

<body>
	<div id="root">
		<form action="" @submit.prevent="dome">
			账号：<input type="text" v-model="username"><br>
			密码：<input type="password" v-model="password"><br>

			性别：男<input type="radio" name="sex" v-model="sex" value="nan">
			<!-- v-model默认收集value，value的值默认为null -->
			女<input type="radio" name="sex" v-model="sex" value="nv"><br>

			年龄：<input type="number" v-model.number="age"><br>

			爱好：打篮球<input type="checkbox" v-model="hobby" value="lanqiu">
			踢足球<input type="checkbox" v-model="hobby" value="zuqiu">
			跑步<input type="checkbox" v-model="hobby" value="paobu"><br>

			所属校区：
			<select v-model="school">
				<option value="">请选择校区：</option>
				<option value="sc">四川</option>
				<option value="cq">重庆</option>
				<option value="bj">北京</option>
				<option value="sh">上海</option>
			</select><br>
			其他：
			<textarea cols="30" rows="5" v-model.lazy="rests" placeholder="请输入其他信息"></textarea><br>
			<input type="checkbox" value="tj" v-model="tj">阅读并接收<a href="#">《用户协议》</a>
			<button>提交</button>
		</form>
	</div>
	<script>
		new Vue({
			el: '#root',
			data: {
				username: '',
				password: '',
				age: undefined,
				sex: 'nan', //默认勾选男
				hobby: [],
				school: 'sh',
				rests: '',
				tj: true
			},
			methods:{
				dome(){
					console.log(this._data);
				}
			}
		});
	</script>
</body>

第十五章 过滤器

定义：对要显示的数据进行特定格式化后在显示（适用于一些简单的逻辑处理）
语法：
1、注册过滤器：Vue。filter(name.callback)或new Vue{filters:{}}；
2、使用过滤器:{{xxx|过滤名}}或v-bind：属性=”xxx" | 过滤器名“；

备注：
1、过滤器也可以接收额外参数、多个过滤器也可以串联；
2、并没有改变原来的数据，时产生新的对应的数据。

第十六章 内置指令

16.1、新学指令：v-text

用法：

<body>
	<div id="root">
		<p>{{name}}</p>
		<p v-text="name">...</p>  //这个里面的数据不会显示，只会显示name的数据
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				name:'hello_world'
			}
		})
	</script>
</body>

v-text 不能解析标签，会直接替换掉原有内容

16.2、新学指令：v-html

用法：

<body>
	<div id="root">
		<p>{{name}}</p>
		<p v-text="name">...</p>		//不支持结构的解析
		<p v-html="name">...</p>		//支持结构的解析
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				name:'<h3>hello_world</h3>'
			}
		})
	</script>
</body>

16.3、新学指令v-cloak

v-cloak 没有属性值，
v-cloak 属性指定的样式在被vue接管时就会消失
v-cloak 一般和属性选择器连用

<head>
	<!-- <script src="vue.js"></script> -->
	<style>
		[v-cloak] {			  //属性选择器
			display: none;
		}
	</style>
</head>
<body>
	<div id="root">
		<p v-cloak>{{name}}</p>
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				name:'123'
			}
		})
	</script>
</body>

16.4、新学指令v-once

v-once 没有属性值
第一次被显示到屏幕上后，vue数据改变，显示数据也不会发生改变。

<body>
	<div id="root">
		<p v-once>n的值是：{{n}}</p>
		<p>n的值是：{{n}}</p>
		<button @click="n++">n+1</button>
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>
</body>

16.5、新学指令v-pre

v-pre 没有参数
v-pre 的作用是：跳过Vue的编译过程，直接拿来使用，加快Vue编译速度。

<body>
	<div id="root">
		<p v-pre>{{x}}</p>
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				x:123
			}
		})
	</script>
</body>

16.6、学过的内置指令汇总

指令意义
v- bind单向数据绑定
v-model双向数据绑定
v- show条件渲染，隐藏元素
v-if…else条件渲染，移除元素（需要注意其他交互，会失去元素焦点）
v- for数组，对象，字符串遍历输出
v-on绑定事件监听，简写@,例如@click
v-text替换元素内容 ，不解析标签
v-html替换元素内容，解析标签
v-cloak不显示没有被Vue编译的元素（没有属性值）
v-once将Vue编译的结果转为静态数据，不参与今后的改变
v-pre跳过Vue编译，提高Vue编译速度

第十七章 自定义指令

17.1、局部式

<body>
	<div id="root">
		<p>{{x}}</p>
		<p v-text="x"></p>
		<p v-big="x"></p>		//自定义指令
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				x:123
			},
			directives:{
				big(element,binding){	//这里要省略v-,element是当前节点对象，binding是当前指令的值的对象
					element.innerHTML = binding.value*10
				}
			}
		})
		
	</script>
</body>

<body>
	<div id="root">
		<p>{{x}}</p>
		<p v-text="x"></p>
		<p v-big="x"></p>				//自定义指令
		<button @click="x++">x+1</button>
		
		<input type="text" v-big2="x">	//自定义指令
	</div>
	
	<script>
		new Vue({
			el:'#root',
			data:{
				x:123
			},
			directives:{
			//这里要省略v-,element是当前节点对象，binding是当前指令的值的对象
				big(element,binding){			//函数式
					element.innerHTML = binding.value*10
				},
				// 自动获取焦点
				big2:{							//对象式
					bind(element,binding){
						element.value = binding.value*10
					},
					inserted(element,binding){
						element.focus()
					},
					update(element,binding){
						element.value = binding.value*10
					}
				}
			}
		})
	</script>
</body>

自定义指令函数式v-big调用情况：
1、指令与元素成功绑定时。
2、模板被解析，big就会被调用。
对象式v-big2调用情况：
1、成功绑定调用bind（）
2、插入页面时调用inserted（）
3、数据更新调用update（）

17.2、全局式

<body>
	<div id="root">
		<p>{{x}}</p>
		<p v-big="x"></p>
		<button @click="x++">x+1</button>
		<input type="text" v-big2="x">
	</div>
	
	<div id="root2">
		<p>{{n}}</p>
		<p v-big="n"></p>
		<button @click="n++">x+1</button>
		<input type="text" v-big2="n">
	</div>
	
	<script>
		Vue.directive('big',function(element,binding){		//不加s
			element.innerHTML = binding.value*10
		})
		Vue.directive('big2',{
			bind(element,binding){
				element.value = binding.value*10
			},
			inserted(element,binding){
				element.focus()
			},
			update(element,binding){
				element.value = binding.value*10
			}
		})
		new Vue({
			el:'#root',
			data:{
				x:123
			},
			// directives:{
			// 	big(element,binding){
			// 		element.innerHTML = binding.value*10
			// 	},
			// 	// 自动获取焦点
			// 	big2:{
			// 		bind(element,binding){
			// 			element.value = binding.value*10
			// 		},
			// 		inserted(element,binding){
			// 			element.focus()
			// 		},
			// 		update(element,binding){
			// 			element.value = binding.value*10
			// 		}
			// 	}
			// }
		})
		new Vue({
			el:'#root2',
			data:{
				n:1
			}
		})
		
	</script>
</body>

17.3、注意事项：

1、指令名
当不止一个单词的时候，必须使用xxx-xxx的格式，例如：big-number，
并且函数不能再简写，必须加引号’xxx-xxx’(){…}

2、directives下的函数this指向总是window

第十八章 生命周期

实现页面加载，字体便自动透明的下降，到0时回转到1重新降低，以此往复

<body>
	<div id="root">
		<h2 :style="{opacity}" @load="begin">你好！</h2>		
	</div>
	<script>
		new Vue({
			el:'#root',
			data:{
				opacity:1
			},
			mounted() {
				setInterval(()=>{
					this.opacity -= 0.01
					if(this.opacity <= 0){this.opacity = 1}
				},10)
			}
		})
	</script>
</body>

生命周期总结：

  1. 又名：生命周期回调函数、生命周期函数、生命周期钩子
  2. 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
  3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
  4. 生命周期函数中的this指向是vm 或 组件实例对象

重要的生命周期函数:

函数调用时机
mounted发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作
beforeDestroy清除定时器、解绑自定义事件、取消订阅消息等收尾工作

在这里插入图片描述

vm.$destroy()销毁vm实例对象

注意：页面不会直接丢失，还存在最后销毁前加载成dom的页面，只是Vue没有了，也不能再通过Vue操作页面

基础篇完结
提示：这只是个人笔记，可能存在问题，建议直接前往b站观看尚硅谷老师的教程，真的嘎嘎细节嘎嘎棒，在这里也感谢老师的教程。

NicheLi
关注
  • 24
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
尚硅谷vue笔记 详细讲解版（尚硅谷 天禹老师）
abjtxf的博客
03-01 6456
详细版的意思就是把老师课上讲的内容都结合自己的思考记录了下来，很适合只会应用而不知原理的同学参考
尚硅谷Vue技术全家桶（1）
anotherQu的博客
08-02 3041
尚硅谷Vue技术全家桶 课程简介 在这个vue2到vue3的过渡时期，需要兼顾2.x和3版本。尚硅谷的vue教程为vue2+vue3,先教vue2，然后vue3。 课程整体设置如下： 1.vue基础 2.vue-cli :vue脚手架，专门做工程开发的 3.vue-router：在vue当中，实现前端路由 4.vuex ：当应用足够复杂时，用来借助保管数据 5.element-ui：常用的经典的UI组件库 【注：UI组件库的作用】 6.vue3: vue3的新特性 vue简介 vue是什么？ vue特
vue3快速上手笔记(尚硅谷)
最新发布
weixin_41844140的博客
05-29 1112
修改名字
尚硅谷课程vue学习（一）
qq_44717133的博客
06-22 742
课程地址：https://www.bilibili.com/video/BV1Zy4y1K7SH?vm中的 data是什么就是什么,methods是什么就是什么，但是methods需要注意选择的是返回值。（2）先创建vue实例，然后再通过vm.$mount(‘#root’)指定el的值。index作为键key就会出现问题，如果顺序打乱就会混乱，id作为key就会更好。模板（原html中的），实例（data中的，也可以说是vm）computed中的get和set方法，set不是必须的。只读不改就可使用简写。
vue学习笔记（一）（学自尚硅谷）
m0_71774042的博客
08-10 396
new Vue({methods:{console.log("您按的键是：" + ev.key);})
VUE 尚硅谷 学习内容详解
starry-sea1412的弃坑之路
05-18 798
Vue.js 是一款渐进式前端框架，采用了 MVVM 架构模式，实现了高效、灵活、易用的前端开发。它具有组件化开发、双向数据绑定、模块化开发、插件系统和易于学习等特点，是目前最为流行的前端 JavaScript 框架之一。
Vue2(尚硅谷)
qq_57216731的博客
10-04 1785
模板语法 Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。 举例:v-bind:href="xxx"或 简写为:href="xxx".xxx同样要写js表达式，且可以直接读取到da
尚硅谷_Vue全家桶_基于VUE_vue；尚硅谷_vue_
10-04
【Vue.js概述】 Vue.js，简称Vue，是一个用于构建用户界面的渐进式框架，它在JavaScript社区中广受欢迎，因为它既易于上手，又能处理...对于想要系统学习Vue.js的人来说，"尚硅谷_Vue全家桶"无疑是一个宝贵的资源。
尚硅谷vue课程笔记整理
05-30
尚硅谷vue课程笔记整理
尚硅谷vue3.0笔记
05-30
尚硅谷vue3.0笔记
尚硅谷_Vue全家桶,尚硅谷vue全家桶word文档
09-10
在这个压缩包中，包含了一个名为"尚硅谷_Vue全家桶.pdf"的文件，它很可能是详细的教学文档，包含了丰富的学习资源。 首先，Vue的核心概念包括它的数据绑定、指令系统和生命周期。数据绑定是Vue的一大特点，它允许...
尚硅谷vue技术核心视频
11-13
尚硅谷vue技术核心视频
尚硅谷Vue硅谷外卖项目视频以及源代码
09-06
尚硅谷Vue硅谷外卖项目视频以及源代码，尚硅谷Vue硅谷外卖项目视频以及源代码
尚硅谷vue教程课件.pdf
12-03
尚硅谷vue教程课件.pdf
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
Vue2【尚硅谷--天禹老师】：Vue组件化编程
m0_63077733的博客
03-05 723
Vue2【尚硅谷--天禹老师】：Vue组件化编程
尚硅谷Vue笔记
m0_56428225的博客
10-17 3974
vue学习笔记
前端vue学习笔记（一）尚硅谷vue基础
weixin_46838605的博客
04-19 1706
目录必备网站关于插件关于注释0 Hello Vue1 Vue模板语法1.1 插值语法1.2 指令语法2 数据绑定3 事件处理事件的基本使用事件修饰符键盘事件 必备网站 尚硅谷B站vue学习视频，天禹老师逻辑很清晰 vue官网，如何食用官网学习视频有讲 element组件官网，在学习的过程中会不断用到，用来查一些前端组件 关于插件 如果想看当前html文件在页面展示出来是什么样子，可以点击右键菜单中的Open with Live Server： 如果你的右键菜单没有Open with Live Server
尚硅谷Vue2.0 全套教程 Part2丨vuejs从入门到精通笔记 | Vue_Test
mh200966的博客
03-02 358
尚硅谷Vue2.0 全套教程 Part2丨vuejs从入门到精通笔记 | Vue_Test
vue3学习笔记尚硅谷
08-12
在尚硅谷的Vue3学习笔记中，有几个与组件相关的内容。首先，在编写组件标签时，可以使用<school></school>标签。其次，可以在Vue组件中使用template来定义组件的结构和样式，也可以将组件的结构和样式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值