Vue学习笔记（vue_basci） --- 尚硅谷_尚硅谷vue学习笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/wykkk1/article/details/122852991

一、初识Vue

1.1 Hello案例

结论：

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

注意区分：js表达式和 js代码(语句)

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

(1). a

(2). a+b

(3). demo(1)

(4). x === y ? 'a' : 'b'

2.js代码(语句)

(1). if(){}

(2). for(){}

<title>初始vue</title>
    <!-- 引入vue -->
    <script  type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello.{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //阻止 vue 在启动时生成生产提示

        //创建vue实例
        new Vue({
            el:'#root',  //el同于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{//data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象
                name:'尚硅谷'
            }
        })
    </script>
</body>

若出现两个相同的类，但只有一个Vue实例，则只有第一个类可以接收到Vue实例。

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello.{{name}}1</h1>
    </div>
    <div id="root">
        <h1>hello.{{name}}2</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //阻止 vue 在启动时生成生产提示

        //创建vue实例
        new Vue({
            el:'#root',  //el同于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{//data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象
                name:'尚硅谷'
            }
        })
    </script>
</body>

运行结果：

若创建两个Vue容器，接收同一个类，且两个容器中所存储的数据不同，则只能接收到第一个容器所存储的数据。

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello.{{name}}{{address}}</h1>
    </div>

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

        //创建vue实例
        new Vue({
            el:'#root',  //el同于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{//data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象
                name:'尚硅谷'
            }
        })

        new Vue({
            el:'#root',  //el同于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{//data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象
                address:'大雁塔'
            }
        })
    </script>
</body>

运行结果：

若类与容器一一对应，则正常显示结果

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

        //创建vue实例
        new Vue({
            el:'#root',  //el同于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{//data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象
                name:'尚硅谷',
                address:'大雁塔'
            }
        })

        new Vue({
            el:'#root2',  //el同于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{//data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象
                name:'小明',
                address:'大雁塔'
            }
        })
    </script>

运行结果：

二、Vue模板语法

2.1 插值语法

功能：用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.2 指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。

举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子，并且不是所有的v-????都可以简写

代码部分：

<body>
    <!-- 准备好一个容器 -->

    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="school.url.toUpperCase">点我去{{school.name}}学习1</a>
        <a :href="school.url">点我去{{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.baidu.com'
              }
          }
      })
</script>

三、数据绑定

Vue中有两种数据绑定的方式：

单向数据绑定：v-bind ：数据只能从data流向页面

双项数据绑定：v-model （只能应用于输入类元素，单选框，多选框，select框等等具有value值的输入框）

这两个注意它们不同的简写方式：v-bind为：value=“ ” v-model为： v-model：“ ”

<body>
<!-- 
			Vue中有2种数据绑定的方式：
					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" v-bind:value="name"><br/>
        双项数据绑定:<input type="text" v-model:value="name"><br/>

        <!-- 以下代码是错误的，因为V-model只能应用在表单类元素上(输入类元素) -->
        <h3 v-model:x="name">你好啊</h3>
    </div>
</body>

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

    new Vue ({
        el:'#root',
        data:{
            name:'尚硅谷'
        }
    })


</script>

运行结果：

四、el和data的两种写法

1.el有2种写法

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

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

2.data有2种写法

(1).对象式

(2).函数式

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

3.一个重要的原则：

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

<body>
    <!-- 
			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实例了。
		-->
        
    <div id="root">
        <h1>你好,{{name}}</h1>
    </div>
</body>

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

    // // el的两种写法
    // const v = new Vue ({
    //     // el:'#root',//第一种写法
    //     data:{
    //         name:'尚硅谷'
    //     }
    // })
    // console.log(v);
    // v.$mount('#root') //第二种写法

    //data的两种写法
    new Vue({
        el:'#root',
        //data的第一种写法：对象式
        // data:{
        //     name:'尚硅谷'
        // }

        //data的第二种写法：函数式
        data:function(){
            // data:()=>{}    //data函数不能写为箭头函数，否则this指向的是window
            console.log('@@@',this); //此处的this是vue实例对象
            return{
                name:'尚硅谷'
            }
        }
    })
    </script>

五、MVVM模型

MVVM模型

1. M：模型(Model) ：data中的数据

2. V：视图(View) ：模板代码

3. VM：视图模型(ViewModel)：Vue实例

观察发现：

1.data中所有的属性，最后都出现在了vm身上。

2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接用。

	<body>
		<!-- 
			MVVM模型
						1. M：模型(Model) ：data中的数据
						2. V：视图(View) ：模板代码
						3. VM：视图模型(ViewModel)：Vue实例
			观察发现：
						1.data中所有的属性，最后都出现在了vm身上。
						2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
		-->
		<!-- 准备好一个容器-->
	<!-- View -->
		<div id="root">
			<h1>学校名称:{{name}}</h1>
			<h1>学校地址:{{adress}}</h1>
            <!-- 下面的代码为vm直接调用Vue中的属性 -->
			<!-- <h1>测试一下1:{{1+1}}</h1>
			<h1>测试一下2:{{$options}}</h1>
			<h1>测试一下3:{{$emit}}</h1>
			<h1>测试一下4:{{_c}}</h1> -->
		</div>
	</body>

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

	const vm = 	new Vue  ({  //viewmodel
			el:'#root',
			data:{
				// Model
				name:'尚硅谷',
				adress:'北京',
				a:1
			}
		})
		console.log(vm);
	</script>

六、数据代理

6.1 Object.defineproperty方法

首先,let直接声明的person对象，可以在浏览器中直接修改对象中类的值。

而使用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函数就会被调用，且返回值就是age的值
			get:function(){
				return number;
			},

			//当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
			set(value){
				console.log('有人修改了age属性，且值是',value);
				number = value;
			}
		})


		// console.log(Object.keys(person));

		// for(let key in person){
		// 	console.log(key[person]);
		// }

		// console.log(Object.keys(person));
		console.log(person);
		</script>

6.2 何为数据代理

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

<body>
		<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x;
				},
				set(value){
					obj.x = value;
				}
			})
		</script>
	</body>

6.3 Vue中的数据代理

验证getter线，只需在代码中将data.name做修改，并在调试窗口验证

验证setter线，在调试窗口使用vm.name进行修改name操作，此时触发了vm身上name属性setter方法的调用，setter就会收到修改的‘atguigu’，随后setter会把原来name里面的值改为修改后的‘atguigu’

验证方法:data.name,但是data不是全局变量，拿不到data

解决方法：使用let新定义一个data

验证结果：

当在控制台修改vm.name时，页面发生相应改变的原理

数据代理图示：

结论：

1.Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处：

更加方便的操作data中的数据

3.基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性。

七、事件处理

7.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)" 效果一致，但后者可以传参；

注：代码中的showInfo可以放入data配置项中，但是不建议这样做，最好的方法还是放入method中。因为放入data中会使showInfo变为数据代理，而这个方法本身是不需要的，所以放入method中比较合理。

<body>
		<!-- 
				事件的基本使用：
							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">点我提示信息(不传参)</button>
			<button @click="showInfo2(66,$event)">点我提示信息(传参)</button>
		</div>
	</body>

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

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

7.2 事件修饰符

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；

2.stop：阻止事件冒泡（常用）；

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
				Vue中的事件修饰符：
						1.prevent：阻止默认事件（常用）；
						2.stop：阻止事件冒泡（常用）；
						3.once：事件只触发一次（常用）；
						4.capture：使用事件的捕获模式；
						5.self：只有event.target是当前操作的元素时才触发事件；
						6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件（常用） -->
			<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息1</button>
			</div>
			<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息2</button>
			<!-- 使用事件的捕获模式 -->
			<div class="box1"  @click.capture="showMessage(1)">
				div1
				<div class="box2"  @click="showMessage(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件 -->
			<!-- 加在这里的意思是，如果触发了这个div身上的click，并且e.target是div时，才能调用showInfo -->
			<!-- 即从某种程度上，e.target也能阻止冒泡 -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息1</button>
			</div>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<!-- 滚动条的滚动 -->
			<ul @scroll="demo" class="list">
				<!-- 鼠标滚轮的滚动 -->
				<!-- <ul @whell="demo" class="list"> -->
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					// e.preventDefalut();
					alert('同学你好！')
					// console.log(e.target);
				},
				showMessage(msg){
				console.log(msg);
				},
				demo(){
				for(let i = 0; i <1000; i++){
					console.log('#');
				}
				console.log('tired');
				}
			}
		})
	</script>
</html>

7.3 键盘事件

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){
					// if(e.keyCode !== 13){
					// 	console.log(e.target.value);
					// }
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>

八、计算属性与监视

计算属性：

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/>
			全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			}
		})
	</script>

method实现

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName()}}</span>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			},
			methods: {
				fullName(){
					console.log('@---fullName')
					return this.firstName + '-' + this.lastName
				}
			},
		})
	</script>

计算属性实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_计算属性实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			计算属性：
					1.定义：要用的属性不存在，要通过已有属性计算得来。
					2.原理：底层借助了Objcet.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/>
			测试：<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>
</html>

计算属性的实现（简写）

只有考虑读取，不考虑修改的时候才能使用简写属性

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

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

		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:function(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})
	</script>