1. Preface
Recently I started learning the lightweight mvvm framework. As for Chinese documents, it is very complete. I was learning version 1.0 before, but one day I suddenly opened the official website and found that it had been updated to 2.0. Then I changed all the following to 2.0 syntax. ps: If you happen to be a beginner in Vue, there is a video on MOOC that you can learn from (I just refer to the small toy that wrote a ToDoList, and record the learning process here).
2. The beginning
The mvvm framework is a popular topic on the front end now. If you go to Lagou for a walk around, basically 70% of them have requirements. So it’s not to be false, just to make more money, we should keep up with the pace of the times. I recommend a blog post ‘/xueduanyang/p/’. I think it is quite thorough and can read it dialectically.
Have too much nonsense, now I'm in the main text
/***************************************************************/
In this todolist, the total required points are:
1. Create a Vue instance: Eg:
var vm=new Vue();
2. List rendering: Eg:
v-for="(item,index) in todo_items"；
3. Binding event: Eg:
v-on:click="toogleFinishi(item,index)"；
2.1 Creating a Vue instance
The following method is used in the official website to create an instance
<div >{{ message }}</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Here, this app variable is an instance of our constructor new Vue() constructor, which is an object. Then our operation on this instance can be regarded as operating on an object.
Let’s get the message value of the app now.
First, take data: app.$data. (Data object observed by the Vue instance. The Vue instance proxies access to its data object properties)
Then, take message: app.$.
Through this method, we can get the property value we want in the instance.
Eg：
vm = new Vue({
el : 'test',
data : {
msg : ' app.$ '
}
})
It is possible to pass the examples to each other.
2.2 List loop
We no longer need to use the for() loop to render a dynamic list like native js.
Use: v-for="item in items" directly to render. Similar to the loop method of for in native
<div v-for="item in items">
{{ }}
</div>
2.3 Event binding
In JQ, we often use $().on('click',function(){}); to bind click event.
In Vue we use v-on:click="doSometing('a','b')"; to bind.
Eg：
<button v-on:click="doThis"></button>
With these 3 points, you can start writing this simple ToDoList.
This article has been compiled intoFront-end component learning tutorial》, everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.