vue.js
A progressive framework for building user interfaces.
Official tutorial: https://cn.vuejs.org/v2/guide/
Online editing: https://codepen.io/pen
The core of Vue.js is a system that allows the use of concise template syntax to declaratively render data into the DOM.
Vue template syntax
Interpolation
- Text: { {msg }}
- Only perform interpolation once, and do not change with the object in the subsequent: { {msg }}
- Insert the html tag:
- Features (attributes on html tags):
- JavaScript expression (cannot access user-created global variables): { {msg?'YES':'NO' }}
instruction
- v-if lets Vue determine whether to load this tag:
Now you see me
- v-bind can pass parameters to url:
- v-on is used to monitor DOM events:
- Write JavaScript expressions in square brackets for dynamic parameters, without null or quotation marks or spaces:
<a v-bind:[attributeName]=“url”>
<a v-on:[eventName]=“doSomething”> - Instruction modifier ".":
.prevent tells the v-on instruction to call event.preventDefault() for the triggered event,
such as:
abbreviation
Vue provides abbreviations for commonly used v-bind and v-on, and the official website claims that browsers that support Vue will support this writing:
- v-bind =: Such as:
complete syntax
abbreviation - v-on = @ such as:
complete syntax
<a @click="doSomething"> abbreviation
Calculated attribute
In fact, javascript expressions can be written in Vue's template syntax:
{
{ message.split('').reverse().join('') }}
but in order to enhance readability and later maintainability, Vue instances have a more powerful "calculated" attribute: computed.
var vm = new Vue({
el: '#example',
data: {message: 'Hello'},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
Then directly {
{reversedMessage}}you can get a value, and this message used in the calculation responsive, so when the console message modification value, reversedMessage modifications will follow.
**PS: Calculated attributes are cached. **That is to say, if the value of the responsive dependency (message in the example above) does not change, then multiple calls to the unified calculation attribute will obtain the result of the first calculation. The official explanation is to increase the calculation speed when a large number of calculations are performed on the same value. Therefore, this calculated attribute has a certain monitoring function.
In addition, the above are all getter methods in calculated properties, the official website points out that there are also setter methods:
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
Here is when actively executing:, the vm.fullName = 'willson H'setter method will be called.
I feel it is unnecessary. If you need to modify the fullName, most of the time you need to modify the firstName and lastName. At this time, the computed will be triggered automatically. Adding a setter manually makes Vue look more complicated.
Method attribute methods
Can be called directly in curly braces
<p>Reversed message: "{
{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
The calculation results of the above two examples are exactly the same, and the calculated attributes are cached based on their responsive dependencies. However, the difference is that calculated attributes are cached based on their responsive dependencies. They will be re-evaluated only when the related reactive dependencies change. The method attribute is recalculated every time it is called.
Listening attribute watch
Vue provides a more general way to observe and respond to data changes on Vue instances: listening to properties. This means that when the data source changes, the corresponding method in the listener property will be called.
<div id="div1">
城市：<input v-model="city">
整理：<p>{
{cityStr}}</p>
</div>
var vm = new Vue({
el: '#div1',
data: {
city: '',
cityStr: ''
},
watch: {
city: function (val) {
if(val.indexOf('市')<0){
this.cityStr = val + '市'
}else{
this.cityStr = val
}
}
}
})
The example I gave is relatively simple. The examples given on the official website involve the lodash tool library and the axios http library. If you are interested, you can take a look at the examples on the official website. The
listener is mainly used when you need to customize the listener. In fact, you can use it most of the time. Calculating attributes can be solved.
Copyright statement: The content of the article is summarized on the Internet. If it violates the rights of the original author, please contact me for deletion or authorization