Vue基础知识笔记（模板语法、数据绑定、事件处理、计算属性）（一）_模板语法数据绑定事件处理计算属性个人收获-CSDN博客

本文链接：https://blog.csdn.net/qq_48617322/article/details/119352244

系列文章目录

第二章：Vue基础知识（计算属性、监视属性、computed和watch之间的区别、绑定样式）（二）
第三章：Vue基础知识（条件渲染、列表渲染、收集表单数据、过滤器）（三）
第四章：Vue基础知识（内置指令、自定义指令、Vue生命周期）（四）
第五章：Vue基础知识之组件机制（非单文件组件、单文件组件）（五）
第六章：Vue创建脚手架（六）
第七章：Vue使用脚手架（ref、props、mixin、插件、scoped）（七）
第八章：Vue组件通信（组件的自定义事件、全局事件总线、消息订阅与发布、插槽、props）（八）
第九章：Vue使用脚手架（nextTick、Vue封装的过度与动画、vue脚手架配置代理）（九）
第十章：Vuex（十）
第十一章：vue-router（基本使用、路由重定向、多级路由、路由命名、路由的query和params参数、路由的props配置）（十一）
第十二章：vue-router（路由的两种工作模式、router-link的replace属性、编程式路由导航、缓存路由组件keep-alive、路由守卫【全局路由守卫、独享路由守卫、组件内路由守卫】）（十二）
第十三章：Vue组件通信二&数据同步（v-model、属性修饰符.sync、 $a tt rs 与$ listeners、refs. $c hi l d re n 与 re f s .$ parent、provide与inject ）（十三）

一、初始Vue

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3.root容器里的代码被称为【Vue模板】；

4.Vue实例和容器是一一对应的；

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；

6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

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

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? ‘a’ : ‘b’
js代码(语句)
(1). if(){}
(2). for(){}

部分代码:

<body>
<div id="demo">
			<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
		</div>
	<script src="vue.js"></script>
		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

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

运行结果：
在这里插入图片描述

二、Vue模板语法

Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

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

部分代码：

<body>
		<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.baidu.com',
				}
			}
		})
	</script>

运行结果：
在这里插入图片描述

三、Vue数据绑定

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

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

<body>
		<div id="app">
			<!-- 单项数据绑定：<input type="text" v-bind:value="name" />
			<br>
			双项数据绑定：<input type="text" v-model:value="name" /> -->
			
			单项数据绑定：<input type="text" :value="name" />
			<br>
			双项数据绑定：<input type="text" v-model="name" />
		</div>
		<script src="vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					name:"尚硅谷",
				}	
			})
		</script>
	</body>

运行结果：
在这里插入图片描述

四、data与el的2种写法

1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。

2.data有2种写法
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

部分代码：

<body>
			<div id="root">
				<p>你好,{{name}}</p>
			</div>
			<script src="vue.js"></script>
				<script>
				// el的两种写法
					// const v=new Vue({
					// 	// el:"#root",//第一种
					// 	data:{
					// 		name:"芳华"
					// 	}
					// });
					// console.log(v);
					// v.$mount('#root');//第二种
					
				// data的两种写法
				new Vue({
					el:'#root',
					// data:{
					//	name:'芳华'
					//} 
					data(){
						console.log('@@@',this)//此处的this是Vue实例对象
						return{
							name:'芳华'
						}
					}
				})
				</script>
	</body>

五、Object.defineProperty

用来给一个对象添加属性或定义属性用的；
参数：
第一个参数：添加属性的对象；
第二个参数：添加的属性名；
第三个参数：配置属性；

部分代码：

<body>
		<script src="../vue.js"></script>
		<script>
		var number=18;
		
		// 从此处添加属性可随意遍历、修改删除
		var person={
			naem:'张三',
			sex:'男',
			// age:18,
		}
		
		// 此方法不允许枚举（遍历）、修改、删除，需设置属性开启
		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)
					return number=value
				}
		})
		
		
		 console.log(this.person);
		 
		 for(var key in person){
			 console.log('@',person[key]);
		 }
 
		 // keys方法传入一个对象遍历对象为数组
		 console.log(Object.keys(person));
		 
		</script>
	</body>

运行结果：
enumerable设置前：
在这里插入图片描述
enumerable设置后：

设置writable前：

设置writable后：
在这里插入图片描述

设置 configurable前：
在这里插入图片描述

设置 configurable后：
在这里插入图片描述
设置get、set：

六、MVVM模型

1. M：模型(Model) ：data中的数据
2. V：视图(View) ：模板代码
3. VM：视图模型(ViewModel)：Vue实例
在这里插入图片描述
1.data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性及 Vue原型上所有属性，在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)” 效果一致，但后者可以传参；

部分代码：

<body>
		<div id="root">
			<h2>{{mes}}</h2>
			<button v-on:click="show1">点我显示信息1</button>
			<br>
			<button @click="show2($event,'哈哈哈')">点我显示信息2</button>
		</div>
		
		<script src="../vue.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#root',
				data:{
					mes:"Hi vue!",
				},
				
				methods:{
					show1(){
						alert("Nice to meet you!")
					},
					show2(event,str){
						alert(str)
					}
				}
			})
		</script>
	</body>

运行结果：
点击1：
在这里插入图片描述
点击2：

（二）Vue中的事件修饰符

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

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

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

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

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

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

部分代码：

<body>	
		<div id="root">
			<h2>{{mes}}</h2>
			<!-- 阻止默认事件（常用） -->
			<a href="1.vueGrammar.html" @click.prevent="show">点击</a>
			<br/><br/>
			
			<!-- 阻止事件冒泡（常用） -->
			<div style="height: 30px; padding: 5px; background-color: #7FFFD4;" @click="show">
				<button @click.stop="show">click</button>
			</div>
			<br/>
			
			<!-- 事件只触发一次（常用） -->
			<button @click.once="show">click</button>
			<br>
			<br>
			
			<!-- 使用事件的捕获模式 -->
			<div style="height:60px;  background-color: #7FFFD4;"@click.capture="show1(1)">div1
				<div style="height:30px;  background-color: #FF7F50;" @click="show1(2)">div2</div>
			</div>
			<br>
			<br>
			
			<!-- 只有event.target是当前操作的元素时才触发事件； -->
			<div style="height:30px;  background-color: #7FFFD4;" @click.self="show">
				<button @click="show">点我提示信息</button>
			</div>
			
			
		</div>
		
		<script src="../vue.js"></script>
		<script>
		var vm=new Vue({
			el:'#root',
			data:{
				mes:"Hi vue!",
			},
			methods:{
				show(){
					alert("Hi vue!");
				},
				show1(number){
					alert(number);
				}
			}
		})
		</script>
	</body>

运行结果：
在这里插入图片描述

（三）键盘事件

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.自定义键名 = 键码，可以去定制按键别名

部分代码：

<body>
		<div id="root">
			<h2>Hi,Vue！</h2>
			<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"></input>
		</div>
			<script src="../vue.js"></script>
			<script>
			var vm=new Vue({
				el:'#root',
				data:{
				},
				methods:{
					showInfo(e){
						alert(e.target.value);
					},
				},
			})
	
		</script>
	</body>