1. Questions left over from last lesson:
There is a description in the official document about methods:
Note that arrow functions should not be used to define method functions (for example, plus:()=>this.a++)
Question 1: Why can't arrow functions be used in methods?
Yes, you can, but you can't use this. There's a problem
this is the object that the previous layer of the method refers to.
//Method foo is defined as:
const foo =function(){
console.log(this)
}
foo();//Here this takes the upper layer of the function and the upper layer is script, so this is window here
const obj ={bar:foo};
obj.bar();//Here this, takes the upper level of function and the upper level is {bar:foo}, so this is bar here
//Method foo is defined in two ways:
const foo =()=>{
console.log(this)
}
foo();//The arrow function is not bound to this, so as long as this is the arrow function, it refers to the default window
const obj ={bar:foo};
obj.bar();//The arrow function is not bound to this, so as long as this is the arrow function, it refers to the default window
Question 2: What exactly does this point to without using the arrow function? (an interview question)
https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA
You'll know by reading this article
2. VScode Add Code Snippet Method
Steps:
1. Copy the code you need to generate the snippet
2. https://snippet-generator.app/ Generate snippets in this site
3. Configure snippets in vscode, copy them into curly brackets, if there are multiple snippets, separated by commas
3. Basic instructions for vue3
3.1 Mustache double brace syntax:
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- 1.Basic Use
2.Expression
3.Functions can also be called
4.It can also be called conputed(Computing attributes)
5.Ternary operator
-->
<h2>{{message}}-{{message}}</h2>
<h2>{{counter*10}}</h2>
<h2>{{ message.split(" ").reverse().join(" ") }}</h2>
<h2>{{reverse()}}</h2>
<h2 @click="changeshow()">{{isshow?"Ha ha ha":"Interesting"}}</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-on syntax:
All content in its subcomponents or sublabels commands rendering 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 syntax:
Equivalent to the {{}} syntax, or less useful than {{}} because you can't write anything in an expression, so it's rarely used
<body>
<div id = "app"></div>
<template id="lyjtemplate">\
<!-- They are equivalent -->
<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 syntax:
If what we want to show is html, but vue does not parse html, we can use v-html if we want the content to be parsed out
<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;">Ha ha ha</span>',
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
3.5 v-pre Syntax:
Add this and {{}} will be useless
<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 syntax:
Sometimes the browser has the problem of {{message}}, that is, the {{message}} is displayed on the browser, then parsed. After parsing successfully, this property (v-cloak disappears) is used with 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>
IV. v-bind
The main point is to insert values into the template content
However, in addition to content being dynamically determined, we also want to dynamically bind certain attribute values
For example, dynamically binding the href attribute of an element
Binding Properties We use v-bind
Abbreviation::
Basic use of 4.1 v-bind
<body>
<div id = "app"></div>
<!-- vue2 in template There can only be one root element in a template
There are two, because at this time vue3 -->
<template id="lyjtemplate">
<img v-bind:src="imgUrl" alt="">
<a :href="link">Use Baidu Search</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 binding class-object syntax
<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">
<!-- Object syntax: basic use -->
<div :class="className">Ha ha ha</div>
<!-- Object syntax:{'active':boolean}，Determining the Front Based on the Back Boolean Value class Do you want to bind -->
<div :class="{'active':isActive}">Interesting</div>
<button @click=changeClass>switch class</button>
<!-- You can also have multiple key-value pairs -->
<div :class="{'active':isActive,'title':true}">Interesting</div>
<!-- Be careful title Not added'',Then automatically convert to'title' -->
<div class= "abc" :class="{'active':isActive,title:true}">Interesting</div>
<!-- Put objects in a separate property -->
<div class="abc cba" :class="classObj"></div>
<!-- Put the returned object into the returned method,obtain class Method must be added(),however@click This method does not require an additional() -->
<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 binding class-array syntax
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- Array syntax: basic use -->
<div :class="['abc',title]">Ha ha ha</div>
<!-- Array syntax: use of ternary operators -->
<div :class="['abc',title,isActive?'active':'']">Ha ha ha</div>
<!-- Array syntax: nested object syntax-->
<div :class="['abc',title,{active:isActive}]">Ha ha ha</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 binding style-object syntax
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- Object syntax: basic use -->
<div style="color: blue;">Ha ha ha</div>
<!-- Note: If the variable name has a short horizontal line, a single quotation mark must be added, otherwise the camel will not report an error -->
<div :style="{color:'red','font-size':finalFontSize}">Interesting</div>
<!-- Note: The results need to be stitched, so do this -->
<div :style="{color:'blue','font-size':preFontSize +'px'}">Interesting</div>
<!-- Object syntax: can style Pull out -->
<div :style="finalStyleObj">Gaga</div>
<!-- Object syntax: can style Pull out and write in method -->
<div :style="getFinalStyleObj()">Gaga</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',//Without'', no direct compilation will pass
fontWeight:700,
backgroundColor:'red'
}
}
},
methods: {
getFinalStyleObj(){
return {
'font-size':'50px',//Without'', no direct compilation will pass
fontWeight:700,
backgroundColor:'red'
};
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
4.5 v-bind binding style-array syntax
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- Array syntax: basic use -->
<!-- Note that single and multiple quotation marks are mainly used to distinguish between internal and external levels, otherwise they are used roughly the same -->
<div :style="[style1Obj,{textDecoration:'underline'}]">Ha ha ha</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 dynamic binding property name
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- Binding property name syntax: basic use(Be careful data()Property name must be lowercase in) -->
<div :[attrName]="attrValue">Ha ha ha</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 property binds an object directly
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- Property directly binds to an object syntax-->
<div v-bind="info">Ha ha ha</div>
<div :="info">Hahaha 2</div>
<!-- The purpose is to -->
<div name="lyj" age="18" height="1.88">Equivalent Result</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. v-on
Abbreviation: @
Parameter:event
Expected: function, Inline Statement, Object
Usage: Bind event listening
Modifier: Equivalent to some special handling of the event
Basic use of 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">
<!-- Complete Grammar -->
<button v-on:click="btnClick">Button 1</button>
<div class="area" v-on:mousemove="mouseMove">div</div>
<!-- Grammatical Sugar -->
<button @click="btnClick">Button 2</button>
<!-- Bind an expression: Inline StateMent-->
<button @click="counter++">{{counter}}</button>
<!-- Bind an object: Object-->
<div class="area" v-on="{click:btnClick,mousemove:mouseMove}">v-on Bind Object</div>
<br>
<!-- Bind an object: Object(Grammatical Sugar)-->
<div class="area" @="{click:btnClick,mousemove:mouseMove}">v-on Binding Object Syntax Sugar</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("Button hit");
},
mouseMove(){
console.log("Mouse moved")
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
Parameter Transfer of 5.2 v-on
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<!-- stay dom When an event is triggered, a browser generates one event -->
<button @click="btn1Click()">Button 1</button>
<!-- If the parameter except event Want to pass on something else,$event You can get the event object when the event occurs -->
<button @click="btn2Click($event,'lyj')">Button 2</button>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:"#lyjtemplate",
data:function(){
return {
message:"hello world!",
}
},
methods: {
btn1Click(event){//Here comes a default event
console.log(event);
},
btn2Click(event,name){
console.log(event,name);
}
},
}
Vue.createApp(App).mount("#app");
</script>
</body>
Modifier for 5.3 v-on
<body>
<div id = "app"></div>
<template id="lyjtemplate">
<div @click="divClick">
<!-- Without modifiers.stop，Events will bubble up and execute multiple methods -->
<button @click.stop="btnClick">Button</button>
</div>
<!-- If not added.enter Then press down any key on the keyboard,And if you leave your finger, it will execute enterKey Method -->
<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>