Quoted from: https://mrbird.cc/Vue-Learn-Note.html mrbird boss blog
Getting started with Vue
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>todoList</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body><div id="app">
<input type="text" v-model="inputValue"/>
<button @click="createTodoList">Submit</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul></div><script>
var app = new Vue({
el: "#app",
data: {
list: [],
inputValue: ''
},
methods: {
createTodoList: function () {
if (!this.inputValue) {
alert('Please enter the content');
return;
}
this.list.push(this.inputValue);
this.inputValue = '';
}
}
});
</script>
- var app = new Vue({}) creates an instance and takes over all the contents of the div with ID app through el: "#app".
- The data attribute is used to load data, including list and inputValue.
- The v-for instruction is used to traverse the set, and here it is used to traverse the values in the list array;
- The v-model instruction is used for bidirectional data binding, that is, the value entered in < input type = "text" v-model = "inputValue" / > will change the value of inputValue in Vue instance, and changing the value of inputValue in Vue instance through JS will also change the value in < input type = "text" v-model = "inputValue" /.
- @The click instruction is used to bind events. Here, the createTodoList event is bound, corresponding to the createTodoList in Vue instance methods.
Global Vue components
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>todoList</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body><div id="app">
<input type="text" v-model="inputValue"/>
<button @click="createTodoList">Submit</button>
<ul>
<todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list">
</todo-item>
</ul></div><script>
Vue.component('TodoItem',{
props: ['content','index'],
template: '<li>{{index+1}}-{{content}}</li>'
});
var app = new Vue({
el: "#app",
data: {
list: [],
inputValue: ''
},
methods: {
createTodoList: function () {
if (!this.inputValue) {
alert('Please enter the content');
return;
}
this.list.push(this.inputValue);
this.inputValue = '';
}
}
});
</script></body></html>
Here we use Vue Component ('TodoItem ', {}) defines a global Vue component named TodoItem, which can be used in any Dom managed by Vue:
- TodoItem component can be used in the way of < todo item >, that is, uppercase can be converted to lowercase, and the second uppercase letter must be prefixed with - after being converted to lowercase;
- The v-bind instruction is used to bind values. Here, the value of the content variable is bound as item (that is, the value of each element in the list) through v-bind:content, and the value of the index variable is bound as index (that is, the subscript of the current loop) through v-bind:index. V-bind can be abbreviated as:;
- props attribute is used to transfer data to the child component. Here, the index and content variables bound from the parent component are passed by the bind instruction;
- Template defines the template, that is, what the Vue component looks like (usually a piece of HTML plus the variable value passed by the parent component).
In this process, we not only learned how to define global Vue components, but also learned how to pass values from parent components to child components.
< div id = "app" > the Dom structure has been taken over by Vue, and it contains < todo item > Vue components. Therefore, we call < div id = "app" > the parent component and < todo item > the child component.
Local Vue components
Define a local component to transform the todoList above:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>todoList</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body><div id="app">
<input type="text" v-model="inputValue"/>
<button @click="createTodoList">Submit</button>
<ul>
<todo-item :content="item"
:index="index"
v-for="(item,index) in list"
@delete="deleteTodoList">
</todo-item>
</ul></div><script>
var TodoItem = {
props: ['content', 'index'],
template: '<li @click="handleItemClick">{{index+1}}-{{content}}</li>',
methods: {
handleItemClick: function () {
this.$emit('delete', this.index)
}
}
};
var app = new Vue({
el: "#app",
components: {
TodoItem: TodoItem
},
data: {
list: [],
inputValue: ''
},
methods: {
createTodoList: function () {
if (!this.inputValue) {
alert('Please enter the content');
return;
}
this.list.push(this.inputValue);
this.inputValue = '';
},
deleteTodoList: function (index) {
console.log(index);
this.list.splice(index, 1);
}
}
});
</script></body></html>