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双大括号语法：
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- 1.基本使用
2.表达式
3.也可以调用函数
4.也可以调用conputed(计算属性)
5.三元运算符
-->
<h2>{
{message}}-{
{message}}</h2>
<h2>{
{counter*10}}</h2>
<h2>{
{ message.split(" ").reverse().join(" ") }}</h2>
<h2>{
{reverse()}}</h2>
<h2 @click="changeshow()">{
{isshow?"哈哈哈":"呵呵呵"}}</h2>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
message:"hello world!",
counter:100,
isshow:true
}
},
methods: {
reverse(){
return this.message.split(" ").reverse().join(" ");
},
changeshow(){
this.isshow = !this.isshow;
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
3.2 v-once语法：
其子组件或子标签中所有内容都指挥渲染一次。
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<h2>{
{counter}}</h2>
<div v-once>
<h2>{
{counter}}</h2>
</div>
<button @click="increment()">+1</button>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
counter:100,
}
},
methods: {
increment(){
this.counter++;
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
3.3 v-text语法：
跟{ {}}语法等价，或者说不如{ {}}好用，因为不能写表达式啥的，所以很少用
<body>
<div id = "app"></div>
<template id="lyjtemplate">\
<!-- 二者等价 -->
<h2 v-text="message"></h2>
<h2>{
{message}}</h2>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
message:"hello world!",
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
3.4 v-html语法：
如果我们想展示的内容是html，但是vue不会对html做解析的，如果我们希望内容被解析出来可以使用v-html
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<div>{
{message}}</div>
<div v-text="message"></div>
<div v-html="message"></div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
message:'<span style="color: red;background: blue;">哈哈哈</span>',
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
3.5 v-pre语法：
加了这个，那么{ {}}会失去作用
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<h2 v-pre>{
{message}}</h2>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
message:"hello world!",
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
3.6 v-cloak语法：
有时候，浏览器会出现{ {message}}的问题，即先把{ {message}}呈现在浏览器上，然后再解析，解析成功 后，这个属性(v-cloak会消失)，使用时结合css使用
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<h2 v-cloak>{
{message}}</h2>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
message:"hello world!",
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
四、v-bind
以上讲的主要是将值插入到模板内容中
但是，除了内容需要动态决定外，某些属性值我们也希望动态绑定
比如动态绑定a元素的href属性
绑定属性我们使用v-bind
缩写：：
4.1 v-bind的基本使用
<body>
<div id = "app"></div>
<!-- vue2中template模板中只能有一个根元素
这里有两个，因为这时vue3 -->
<template id="lyjtemplate">
<img v-bind:src="imgUrl" alt="">
<a :href="link">百度一下</a>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
imgUrl:"https://avatar.csdnimg.cn/D/4/B/1_qq_42425551_1593106626.jpg",
link:"https://www.baidu.com"
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
4.2 v-bind绑定class-对象语法
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- 对象语法：基本使用 -->
<div :class="className">哈哈哈</div>
<!-- 对象语法：{'active':boolean}，根据后边的布尔值决定前边的class要不要绑定 -->
<div :class="{'active':isActive}">呵呵呵</div>
<button @click=changeClass>切换class</button>
<!-- 也可以有多个键值对 -->
<div :class="{'active':isActive,'title':true}">呵呵呵</div>
<!-- 注意title没加'',那么自动转化为'title' -->
<div class= "abc" :class="{'active':isActive,title:true}">呵呵呵</div>
<!-- 将对象放到一个单独的属性中 -->
<div class="abc cba" :class="classObj"></div>
<!-- 将返回的对象放到返回的方法中,得到class的方法必须加(),但是@click这种方法不需要加() -->
<div class="abc cba" :class="getClassObj()"></div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
className:"lyj",
isActive:true,
classObj:{
'active':true,
title:true
}
}
},
methods: {
changeClass(){
this.isActive=!this.isActive;
},
getClassObj(){
return {
'active':true,
title:true
};
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
4.3 v-bind绑定class-数组语法
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- 数组语法：基本使用 -->
<div :class="['abc',title]">哈哈哈</div>
<!-- 数组语法：三元运算符使用 -->
<div :class="['abc',title,isActive?'active':'']">哈哈哈</div>
<!-- 数组语法：嵌套对象语法-->
<div :class="['abc',title,{active:isActive}]">哈哈哈</div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
message:"hello world!",
title:"cba",
isActive:true,
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
4.4 v-bind绑定style-对象语法
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- 对象语法：基本使用 -->
<div style="color: blue;">哈哈哈</div>
<!-- 注意：如果变量名带着短横线，那么必须加上单引号，否则会报错，驼峰不会报错 -->
<div :style="{color:'red','font-size':finalFontSize}">呵呵呵</div>
<!-- 注意：结果需要拼接，那么这么操作 -->
<div :style="{color:'blue','font-size':preFontSize +'px'}">呵呵呵</div>
<!-- 对象语法：可以将style抽离出去 -->
<div :style="finalStyleObj">嘎嘎嘎</div>
<!-- 对象语法：可以将style抽离出去写在方法中 -->
<div :style="getFinalStyleObj()">嘎嘎嘎</div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
message:"hello world!",
finalFontSize:"30px",
preFontSize:'30',
finalStyleObj:{
'font-size':'50px',//这里不加'',那么直接编译都不通过
fontWeight:700,
backgroundColor:'red'
}
}
},
methods: {
getFinalStyleObj(){
return {
'font-size':'50px',//这里不加'',那么直接编译都不通过
fontWeight:700,
backgroundColor:'red'
};
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
4.5 v-bind绑定style-数组语法
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- 数组语法：基本使用 -->
<!-- 注意单引号和多引号主要用于区分内外级别，否则用法大致相同 -->
<div :style="[style1Obj,{textDecoration:'underline'}]">哈哈哈</div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
message:"hello world!",
style1Obj:{
color:'red',
fontSize:'30px',
},
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
4.6 v-bind动态绑定属性名称
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- 绑定属性名称语法：基本使用(注意data()中必须小写属性名称) -->
<div :[attrName]="attrValue">哈哈哈</div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
message:"hello world!",
attrName:"abc",
attrValue:"123"
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
4.7 v-bind属性直接绑定一个对象
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- 属性直接绑定一个对象语法-->
<div v-bind="info">哈哈哈</div>
<div :="info">哈哈哈2</div>
<!-- 目的是这样的 -->
<div name="lyj" age="18" height="1.88">等价结果</div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
info:{
name:'lyj',
age:'18',
height:'1.88'
}
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
五、v-on
缩写：@
参数：event
预期：function、Inline Statement(行内语句)、Object
用法：绑定事件监听
修饰符：相当于对事件进行了一些特殊的处理
5.1 v-on的基本使用
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.area {
width:200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- 完整语法 -->
<button v-on:click="btnClick">按钮1</button>
<div class="area" v-on:mousemove="mouseMove">div</div>
<!-- 语法糖 -->
<button @click="btnClick">按钮2</button>
<!-- 绑定一个表达式：Inline StateMent-->
<button @click="counter++">{
{counter}}</button>
<!-- 绑定一个对象：Object-->
<div class="area" v-on="{click:btnClick,mousemove:mouseMove}">v-on绑定对象</div>
<br>
<!-- 绑定一个对象：Object(语法糖)-->
<div class="area" @="{click:btnClick,mousemove:mouseMove}">v-on绑定对象语法糖</div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
counter:100,
message:"hello world!",
}
},
methods: {
btnClick(){
console.log("按钮发生了点击");
},
mouseMove(){
console.log("鼠标发生了移动")
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
5.2 v-on的参数传递
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- 在dom中，触发事件时会在浏览器生成一个event -->
<button @click="btn1Click()">按钮1</button>
<!-- 如果参数中除了event还想传别的东西,$event可以获取到事件发生时的事件对象 -->
<button @click="btn2Click($event,'lyj')">按钮2</button>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
message:"hello world!",
}
},
methods: {
btn1Click(event){//这里会有一个默认的event传过来了
console.log(event);
},
btn2Click(event,name){
console.log(event,name);
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
5.3 v-on的修饰符
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<div @click="divClick">
<!-- 如果不加修饰符.stop，那么事件会冒泡向上传递，执行多个方法 -->
<button @click.stop="btnClick">按钮</button>
</div>
<!-- 如果不加.enter那么键盘上任何键摁下去,并且手指离开了都会执行enterKey方法 -->
<input type="text" @keyup.enter="enterKey">
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
message:"hello world!",
}
},
methods: {
divClick(){
console.log("divclick")
},
btnClick(){
console.log("btnClick")
},
enterKey(){
console.log("enterKey",event.target.value);
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>