vue.js
A progressive framework for building user interfaces.
Official tutorial: https://cn.vuejs.org/v2/guide/
Online editing: https://codepen.io/pen
This blog counts various grammars. In order to facilitate reading, there are only short codes, and if you need to learn in detail, it is recommended to go through the tutorials on the official website~ It is actually very simple.
The core of Vue.js is a system that allows the use of concise template syntax to declaratively render data into the DOM.
First introduce the basic grammar as a foreshadowing
Declarative rendering
The v-bind feature is called an instruction. Instructions are prefixed with v- to indicate that they are special features provided by Vue.
<div id='div1'>
<span v-bind:title="titleContent">鼠标悬停查看title</span>
{
{ name }}
</div>
var vueObj = new Vue({
el:"#div1",
data:{
name:"飞机",
titleContent:"这里是Vue实例中动态的内容。"
}
})
Page effect:
Conditions and cycles
<div id="div1">
<ol v-if="flag">
<li v-for="entity in entitys">
{
{entity.id}}--{
{entity.name}}
</li>
</ol>
</div>
var div1 = new Vue({
el:'#div1',
data:{
flag:true,
entitys:[
{id:5234524,name:'三笠' },
{id:2345241,name:'艾伦' },
{id:2345345,name:'利维' },
{id:3243435,name:'艾尔敏' }
]
}
})
Page effect:
Transition effects are automatically applied when Vue inserts/updates/remove elements .
Process user input
v-on command to add an event listener
<div id="div1">
<p>{
{mess}}</p>
<button v-on:click="reverseStr">反转字符串</button>
<p>{
{inputData}}</p>
<input v-model="inputData">
</div>
var div1 = new Vue({
el:'#div1',
data:{
mess:'进击的巨人1',
inputData:''
},
methods:{
reverseStr:function(){
this.mess = this.mess.split('').reverse().join('')
}
}
})
Page effect:
Componentized application construction
The component system is another important concept of Vue because it is an abstraction that allows us to build large applications using small, independent, and generally reusable components.
<div id="div1">
<ol>
<comp-li
v-for="valItem valList"
v-bind:comp="valItem.val"
></comp-li>
</ol>
</div>
Vue.component('comp-li',{
props: ['comp'],
template: '<li >{
{ comp }}</li>'
})
var div1 = new Vue({
el:'#div1',
data:{
valList:[
{id:'0',val:'吃饭'},
{id:'1',val:'喝水'},
{id:'2',val:'睡觉'}
]
}
})
It is necessary to explain here, the component keyword is to declare the component, the props in it, you can see the v-bind:comp on the corresponding label element, when v-bind:comp="valItem", props:comp gets It is the whole valItem {id:'0',val:'eat'}.
Vue instance
Every Vue application starts by creating a new Vue instance with a Vue function
. The data in Vue is "responsive". When the value of the property changes, the view layer will also change, but these values must be declared When the Vue instance exists.
Quoting the official explanation:
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
However, if you set data.b = 1 the view will not change, so in actual development, the attributes assigned later need to be declared in advance.
In addition, if you want to reject this response, there is a special function: Object.freeze() to prevent Vue from tracking data
<div id="div1">
<p>{
{ address }}</p>
<button v-on:click="address = 'guangzhou' ">Change it</button>
</div>
var obj = {
address: 'guangdong'
}
Object.freeze(obj)
new Vue({
el: '#div1',
data: obj
})
After clicking here, the console will print Vue error
In addition, after declaring a Vue instance, you can also access the members in the Vue instance through attributes: vm.$data, vm.$el
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
Vue life cycle
All objects will have a life cycle, and each complete frame will have a corresponding event callback.
Give a chestnut
new Vue({
el: '#div1',
data: obj,
created:function(){
console.log('艾尔敏，前面就能看到海了');
}
})
created, executed after the Vue instance is loaded. The official website calls them a typo "life cycle dog", which is a hook, which is actually a callback function of the life cycle.
Then put a Vue life cycle diagram: just
look at it roughly, and check it when you use it.
To be continued...
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