Learning notes:Vue.js Basic Knowledge
Basic knowledge
Root instance of constructor Vuenew Vue({})
And start the Vue application.
var app = Vue({
el: "#app",
data: {},
methods: {}
});
Variableapp
On behalf of this Vue instance.
Among them, the essential options areel
A that specifies a DOM element that already exists in a page to mount a Vue instance, which can beHTMLElement
, or CSS selectors.
var app = Vue({
el: document.getElementById('app')
});
After the mount is successful, you can use theapp.$el
Access this element. Vue provides many commonly used instance properties and methods, all of which are based on$
The beginning.
data
Option is used to declare data that requires bidirectional binding within the application. It is recommended that all data to be used should be available in advancedata
Internal statement, improve the maintainability of the business.
Vue instancenew Vue({})
, which can be used hereapp
Actingdata
All properties in the object can be accessed as followsdata
Data in:
console.log(app.name);
In addition to explicitly declaring data, it can also point to an existing variable, and a two-way binding is established between them by default. When any one is modified, the other will also change accordingly.
var myData = {
a: 1
};
var app = Vue({
el: "#app",
data: myData
});
app.a = 2;
console.log(myData.a);//2
myData.a = 3;
console.log(app.a);//3
Life cycle
Vue’s Lifecycle Hook:
-
created
: Called after the instance is created. Data observation is completed at this stage, but not mounted.$el
Not yet available. (This is useful when initialization is required to process some data) -
mounted
:el
Called after being mounted on the instance, the first business logic starts here. -
beforeDestroy
: Called before the instance is destroyed. Mainly untie some useaddEventListener
Monitoring events, etc.
These hooks are associated withel
Anddata
Similarly, it is also written into Vue instance as an option and hookedthis
Pointing to the Vue instance that called it.
Interpolation and Expression
Use (Mustache syntax){{}}
Is the most basic text interpolation method, it will automatically display our two-way bound data in real time.
v-html
Directly output HTML instead of parsed plain text.
<div id="app">
<span v-html="link"></span>
</div>
new Vue({
el: "#app",
data: {
link: '<a href="#">this is a link.</a>'
}
});
Link’s content will be rendered into aa
Tags, not plain text.
If user-generated content is usedv-html
After the output, it may lead to XSS attack, so to process the content submitted by the user at the server, you can generally<>
Escape.
If you want to display{{}}
Label, without replacement, usev-pre
You can skip the compilation of this element and its child elements.
- In
{{}}
In addition to simple binding attribute values, JavaScript expressions can also be used for simple operations, ternary operations, etc. - Vue supports only a single expression, not statements and process control.
- User-defined global variables cannot be used in expressions, only global variables in Vue whitelist can be used, for example
Math
AndDate
.
Filter
Vue.js supports{{}}
Add a pipe character to the end of the interpolation(|)
Filter data, often users format text, such asAll letters are capitalized、Currency thousands are separated by commasWait. The filtering rules are customized by adding options to Vue instancesfilter
To set.
<div id="app">
{{date | formatDate}}
</div>
Filters can also be connected in series and can receive parameters:
<!--串联-->
{{message | filterA | filterB}}
<!--接收参数-->
{{message | filterA('arg1','arg2')}}
Filters should be used to handle simple text transformations, and if more complex data transformations are to be implemented, computational properties should be used.
Command event
Instruction (Directives
) is the most commonly used function in Vue.js templates, which is prefixed withv-
. The main responsibility of an instruction is to apply certain behaviors to the DOM when the value of its expression changes.
v-bind
The basic purpose of is to dynamically update attributes on HTML elements, such asid
、class
Wait.
Another very important instruction isv-on
A used to bind event listeners.
On common elements,v-on
You can listen for native DOM events exceptclick
There are alsodbclick
、keyup
、mousemove
Wait. An expression can be a method name, and these methods are written in Vue citymethods
Property and is in the form of functions whosethis
Pointing to the current Vue instance itself, it can be used directly.this.xxx
To access or modify data in the form of.
Vue.js willmethods
In the method of proxy, can like access Vue data call method:
<div id="app">
<p v-if="show">这是一段为本</p>
<button @click="handleClose">点击隐藏</button>
</div>
new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClose: function () {
this.close()
},
close: function () {
this.show = false
}
}
});
InhandleClose
Through the method directlythis.close()
Calledclose()
Function.
var app = new Vue({
el: "#app",
data: {
show: true
},
methods: {
init: function (text) {
console.log(text);
},
},
mounted: function () {
this.init('在初始化时调用');
}
});
app.init('通过外部调用');
syntactic sugar
Grammatical sugar refers to adding a method to achieve the same effect without affecting the function, thus facilitating program development.
Vue.jsv-bind
Andv-on
Instructions all provide grammatical sugar, or abbreviations, such asv-bind
Abbreviated as:
, mostly fora
、img
Label;v-on
Abbreviated as@
Forinput
、button
Label.