【vue】VUE基础语法(一)

一、上篇遗留问题：

关于methods，官方文档中有这么一段描述：
注意不应该使用箭头函数来定义method函数(例如：plus:()=>this.a++)
问题一：为什么methods中不能使用箭头函数？
可以到是可以，但是不能使用this，会出现问题
this通俗的讲就是方法的上一层所指代的对象

//方法foo定义方式一：
	const foo =function(){
		console.log(this)
	}
	foo();//这里this，取function的上一层，上一层是script了，所以这里的this是window
	
	const obj ={bar:foo};
	obj.bar();//这里this，取function的上一层，上一层是{bar:foo}了，所以这里的this是bar
//方法foo定义方式二：
	const foo =()=>{
		console.log(this)
	}
	
	foo();//箭头函数是不绑定this的，所以只要是箭头函数的this，就指的是默认的window
	
	const obj ={bar:foo};
	obj.bar();//箭头函数是不绑定this的，所以只要是箭头函数的this，就指的是默认的window

问题二：不是用箭头函数的情况下，this到底指向的是什么？（一道面试题）
https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA
把这篇文章读懂就知道了

二、VScode添加代码片段方法

步骤：
1、复制自己需要生成代码片段的代码
2、https://snippet-generator.app/在该网站中生成代码片段
3、在vscode中配置代码片段，复制到大括号里，如果有多个代码片段，中间用逗号隔开

三、vue3基本指令

3.1 Mustache双大括号语法：

3.2 v-once语法：

其子组件或子标签中所有内容都指挥渲染一次。

3.3 v-text语法：

跟{{}}语法等价，或者说不如{{}}好用，因为不能写表达式啥的，所以很少用

3.4 v-html语法：

如果我们想展示的内容是html，但是vue不会对html做解析的，如果我们希望内容被解析出来可以使用v-html

3.5 v-pre语法：

加了这个，那么{{}}会失去作用

3.6 v-cloak语法：

有时候，浏览器会出现{{message}}的问题，即先把{{message}}呈现在浏览器上，然后再解析，解析成功 后，这个属性(v-cloak会消失)，使用时结合css使用

四、v-bind

以上讲的主要是将值插入到模板内容中
但是，除了内容需要动态决定外，某些属性值我们也希望动态绑定
比如动态绑定a元素的href属性
绑定属性我们使用v-bind
缩写：：

4.1 v-bind的基本使用

4.2 v-bind绑定class-对象语法

4.3 v-bind绑定class-数组语法

4.4 v-bind绑定style-对象语法

4.5 v-bind绑定style-数组语法

4.6 v-bind动态绑定属性名称

4.7 v-bind属性直接绑定一个对象

五、v-on

缩写：@
参数：event
预期：function、Inline Statement(行内语句)、Object
用法：绑定事件监听
修饰符：相当于对事件进行了一些特殊的处理

5.1 v-on的基本使用

5.2 v-on的参数传递

5.3 v-on的修饰符

一、上节课遗留问题：

关于methods，官方文档中有这么一段描述：
注意不应该使用箭头函数来定义method函数(例如：plus:()=>this.a++)
问题一：为什么methods中不能使用箭头函数？
可以到是可以，但是不能使用this，会出现问题
this通俗的讲就是方法的上一层所指代的对象

//方法foo定义方式一：
	const foo =function(){
		console.log(this)
	}
	foo();//这里this，取function的上一层，上一层是script了，所以这里的this是window
	
	const obj ={bar:foo};
	obj.bar();//这里this，取function的上一层，上一层是{bar:foo}了，所以这里的this是bar
//方法foo定义方式二：
	const foo =()=>{
		console.log(this)
	}
	
	foo();//箭头函数是不绑定this的，所以只要是箭头函数的this，就指的是默认的window
	
	const obj ={bar:foo};
	obj.bar();//箭头函数是不绑定this的，所以只要是箭头函数的this，就指的是默认的window

问题二：不是用箭头函数的情况下，this到底指向的是什么？（一道面试题）
https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA
把这篇文章读懂就知道了

二、VScode添加代码片段方法

步骤：
1、复制自己需要生成代码片段的代码
2、https://snippet-generator.app/在该网站中生成代码片段
3、在vscode中配置代码片段，复制到大括号里，如果有多个代码片段，中间用逗号隔开

三、vue3基本指令

3.1 Mustache双大括号语法：

3.2 v-once语法：

其子组件或子标签中所有内容都指挥渲染一次。

3.3 v-text语法：

跟{{}}语法等价，或者说不如{{}}好用，因为不能写表达式啥的，所以很少用

3.4 v-html语法：

如果我们想展示的内容是html，但是vue不会对html做解析的，如果我们希望内容被解析出来可以使用v-html

3.5 v-pre语法：

加了这个，那么{{}}会失去作用

3.6 v-cloak语法：

有时候，浏览器会出现{{message}}的问题，即先把{{message}}呈现在浏览器上，然后再解析，解析成功 后，这个属性(v-cloak会消失)，使用时结合css使用

四、v-bind

以上讲的主要是将值插入到模板内容中
但是，除了内容需要动态决定外，某些属性值我们也希望动态绑定
比如动态绑定a元素的href属性
绑定属性我们使用v-bind
缩写：：

4.1 v-bind的基本使用

4.2 v-bind绑定class-对象语法

4.3 v-bind绑定class-数组语法

4.4 v-bind绑定style-对象语法

4.5 v-bind绑定style-数组语法

4.6 v-bind动态绑定属性名称

4.7 v-bind属性直接绑定一个对象

五、v-on

缩写：@
参数：event
预期：function、Inline Statement(行内语句)、Object
用法：绑定事件监听
修饰符：相当于对事件进行了一些特殊的处理

5.1 v-on的基本使用

5.2 v-on的参数传递

5.3 v-on的修饰符