VUE2
Template syntax
The difference syntax is used in the tag body, and the attribute is: (v-bind:) that is, the instruction syntax
[external link image transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-g8cocv8f-1662560470884) (C: \ users \ administrator \ appdata \ roaming \ typora \ typera user images \ image-2022082523807795. PNG)]
Syntax in Vue instantiation
Two methods of data binding
-
v-bind single data binding
Abbreviation: value = "name"
-
v-model binomial data binding
It can only be applied to form class elements (input class with value)
Abbreviation: v-model = "name"
Two methods of binding container el
-
Specify "new" at the beginning
new vue({ el:"#root", data:{} }) -
I didn't know at first, and then I added
const x = new vue({ data:{} }) x.$mount("#root")
Two ways to write data
-
Object type (I won't talk about it)
-
Functional (this must be used when designing components)
data:function(){//Cannot use arrow function return{ name:"sss" }//The return value is the function I need } //Can be abbreviated data(){//Cannot use arrow function return{ name:"sss" }//The return value is the function I need }
Methods in Vue instances
new vue({
el:"#root",
data:{},
methods:{
xxx(e){
...
}
}
})
- this in methods refers to vm or component instance object
Data proxy (Object.defineProperty())
let num = 18;
let person={
name:"55",
sex:"male"
}
//Data agent prototype
Object.defineProperty(person,"age",{
// value = 18,
//enumerable:false,
//configurable:false,
//writable:false,
//The above three default values are all false
get(){
log(...)
return num //Take this variable as a value
},
set(value){
log(...)
num=value //!!!!!!! There is no such step, but it is impossible to bind them together and change their values
}
})
Instruction grammar
Two methods of data binding
-
v-bind single data binding
Abbreviation: value = "name"
-
v-model binomial data binding
It can only be applied to form class elements (input class with value)
Abbreviation: v-model = "name"
event processing
####1. Click event binding
<button v-on:click="show">Click me</button>
Abbreviation:
<button @click="show">Click me</button>
If the function needs to pass parameters
<button @click="show($event,66)">Click me</button> //$event stands for e. if you want to use = >, just take a place If not=>Can be omitted
2. Event modifier
- Can be written continuously
- Example 1: @ click.stop.prevent = "show"
- Example 2: check the key combination: @ keyup.ctrl.y = "show"
//Block default behavior (common) <button @click.prevent="show($event,66)">Click me</button> //Prevent bubbling (common) <button @click.stop="show($event,66)">Click me</button> //Event is triggered only once (one-time event) (common) <button @click.once="show($event,66)">Click me</button> //Event capture mode <button @click.capture="show($event,66)">Click me</button> //Only e.target is the element of the current operation can trigger the event <button @click.self="show($event,66)">Click me</button> //The default behavior of the event is to execute immediately without waiting for the event callback to complete <button @click.passive="show($event,66)">Click me</button>
####3. Scroll bar event binding
<div @scroll="show">Get rid of me</div>
####4. Mouse wheel event binding
<div @wheel="show">Get rid of me</div>
####5. Keyboard event binding
<input @keyup="show">input</input> <input @keydown="show">input</input> //Press a key to trigger (alias) <input @keyup.enter="show">input</input>
Monitoring properties
//The first is the writing method of monitoring attributes (applicable to determining what to monitor at the beginning)
const vm = new vue({
el:"#root",
data:{},
methods:{},
watch:{
xxx:{
deep:true,//Enable multi-level monitoring of all attributes
immediate:false,
handler(newvalue,oldvalue){
log...
}
"num.a": {}//Monitor the change of an attribute of multi-level structure
}
}
})
//The second way to write monitoring attributes (applicable to those who are not sure what to monitor at the beginning)
vm.$watch("xxx",{
immediate:false,
handler(newvalue,oldvalue){
...
}
})
###Monitoring attribute abbreviation
(it can be abbreviated without other configuration items, only handler)
watch:{
isHot(newValue,oldValue){
...
}
}
//Second
vm.$watch("...",function(newValue,oldValue){
...
})
conditional rendering
"Boolean / expression that can be converted to Boolean"
1. v-show=""
2. v-if=""
v-else-if=""
v-else>
- And no interruption is allowed
- It can be used with template without affecting the final structure
List rendering
v-for="(value,index in xxx)"
- list
- object
- character string
- Specified number of cycles
"key":
Interview question: what is the role of key in vue?
Vue monitoring principle
Add monitorable data after
Vue.set()
vm.$set()
Built in instructions (important)
###1. v-text
Structure resolution is not supported, about equal to innerText
2. v-html
Support structure resolution, about equal to innerHtml
3. v-cloak
-
Is a special property with no value
-
It will be deleted when vue takes over
-
Can cooperate with css
[v-cloak]{ display:none }
4. v-once
- After the first dynamic rendering, it is regarded as static data and will not change
5. v-pre
- vue does not compile
- Skip code without compilation to improve performance
6. User defined instructions
-
Customize this window in the command
-
When will custom instructions be called?
-
- When the instruction and element are successfully bound (at the beginning)
- When the template of the instruction is parsed again
-
Functional formula
-
-
new Vue({ el:"#root", data:{ name:"hhh", n:1 }, directives:{ big(ele,bingding){ ele.innerText = bingding.value*10 } } })
-
-
Object type
-
new Vue({ el:"#root", data:{ name:"hhh", n:1 }, directives:{ big:{ bind(ele,binding){ //Element binding }, inserted(ele,binding){ //When the element is placed on the page }, update(ele,binding){ //When binding element is updated } } } })
-
-
summary
Life cycle (important)
1. Illustration
- summary
Important properties of components
render function
-
Used in scaffolding, because the introduced vue is a compact version without a template compiler
-
render:h=>h(App) //Replace the following two lines //<template><App></App></template> //components:{App}
Modify scaffold default configuration
- Configuration of entry file and syntax check
- You can modify the vue.config.js file by querying the official document
ref attribute
-
Used to get the element as a substitute for id
-
What you get with html elements is real dom elements, and what you get with component elements is component instance objects (vc)
-
How to use: mark first, then get
-
<h1 ref="title"> Hello </h1> -
console.log(this.$refs.title)
-
props configuration
-
Function: let components accept external data
-
use:
-
Transfer data
<SchoolMsg name="xxx" age="18"></SchoolMsg> //If you want to pass a numeric type, add a colon <SchoolMsg name="xxx" :age:"18"></SchoolMsg>
-
There are three ways to receive data:
-
-
Simply accept without limitation
methods:{}, props:["name","age"]
-
-
-
Restriction type:
props:{ name:String, age:Number }
-
-
-
Complete writing, limit type, limit necessity, specify default value
props:{ name:{ type:String, requirea:true }, age:{ type:Number, default:99 } }
-
-
-
-
Note: the props property is read-only, and vue will detect it and won't let you modify it. If you want to modify, you can back up the data to be modified to data, and then modify the data of data
//backups data(){ return{ myName:this.name } }
mixin
-
Essence: in fact, it is code reuse, which extracts the common code configuration of multiple components into a mixed object
-
usage method:
-
Definition: blending
-
Create a new mixin.js
-
Write common configuration
export const mixin = { data(){}, methods:{} } export const mixin2 = { data(){}, methods:{} }
-
-
Introduction and use
-
Global blending:
import {mixin,mixin2} from './xxx/mixin.js' Vue.mixin(xxx) -
Local mixing:
import {mixin} from './xxx/mixin.js' mixins:[xxx]
-
-
vue plug-in (Plugins.js)
-
Essence: an object containing the install method. The first parameter is Vue, and the second parameter is the data passed by the plug-in user
export default{ install(Vue){ ... //1. Add a global filter Vue.filter("Filter name",function(val){ return val.xxxxxx }) //2. Add global instruction Vue.derective("Instruction name",{ bind(ele,bingding){ ... ele.value = bingding.value }, inserted(ele,binding){ ... }, updata(ele,binding){ ... ele.value = bingding.value } }) //3. Configure global mixing Vue.mixin({ //Example: data(){ return{ ... } } }) //4. Add instance method Vue.prototype.$myMethods=function(){...} Vue.prototype.$myPrototype = xxx Vue.prototype.hello=()=>{alert("555")} } } -
use:
import Plugins from './.../Plugins.js' Vue.use(Plug in name)
scoped
-
Function: prevent multi component class name conflicts
-
use:
<style scoped>....</style>
Component custom event (for child to parent)
binding
-
The first @ / v-on method
<student @zidingyi="demo(This is the function you want to callback)"/>
methods:{ demo(name){ console.log("I received some data:" +name) } }student component
//< button @ Click = "chufa" > Click to trigger custom events < / button > methods:{ chufa(){ this.$emit("zidingyi",this.name)//this.name is the parameter I want to pass. You can pass more than one parameter to pass from child to parent } } -
The second method is ref
<student ref="student"/>
mounted(){ this.$refs.student.$on("zidingyi",this.demo) //this.$refs.student.$once("zidingyi",this.demo) //this. The demo is either configured in the parent component or called back directly to use the arrow function, otherwise there will be problems with this pointing (pointing to emit his component) }student component
//< button @ Click = "chufa" > Click to trigger custom events < / button > methods:{ chufa(){ this.$emit("zidingyi",this.name)//this.name is the parameter I want to pass. You can pass more than one parameter to pass from child to parent } }
Unbind
jiebang(){
this.$off("zidingyi")//Unbinding zidingyi
this.$off(["zidingyi","zidingyi"])//Unbind two
this.$off()//Unbind all
this.$destroy()//Destroy this component and unbind all related custom events
}
Component binding native dom events
The native modifier is required, otherwise the component will regard it as a custom event
<demo @click.native="show"></demo>
Component global event bus (important)
-
Applicable to communication between any components
-
Installing the global time bus
new Vue({ ... beforeCreate(){ Vue.prototype.$bus=this }, ... }) -
Use event bus
-
Accept data. If a wants to receive data, a binds a custom event to bus
methods:{ demo(data){ console.log("I got it."+data) } }, mounted(){ this.$bus.$on("zidingyi",this.demo) } -
Components that provide data, trigger custom events, and transmit data to be sent at the same time
//Writable in a function this.$bus.$emit("zidingyi",Data to be transmitted xxx)
-
-
Unbind event
-
It is better to unbind the event with the beforeCreate hook in the component a bound with the custom event
... beforeCreate(){ this.$bus.$off("zidingyi") } ...
-
Message subscription and Publication (PubSub JS)
-
Installation: NPM I PubSub JS
-
use:
- Receive data (subscribe to messages). If a wants to receive data, a subscribes to a message for bus
import pubsub from 'pubsub-js' methods:{ demo(msgName,data){ console.log("I got it."+data) } }, mounted(){ this.pubId=pubsub.subscribe("hello",this.demo) this.pubId=pubsub.subscribe("hello",(msgName,data)=>{ ... }) }-
Components that provide data, trigger custom events, and transmit data to be sent at the same time
import pubsub from 'pubsub-js' //Writable in a function pubsub.publish("hello",Data to be transmitted xxx) -
Unsubscribe
It is better to unbind the event with the beforeCreate hook in component a that has subscribed to the message
... beforeCreate(){ pubsub.unsubscribe(this.pubId) } ...
$nextTick hook (important)
-
Syntax:
this.$nextTick(function(){ ... }) -
Function: perform callback after the next dom update
-
When to use: if you want to do some operations based on the updated new dom after changing the data, you can perform those operations in this hook