todolist功能开发
代码
<!DOCTYPE html> <html> <head> <title>vue 入门</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="root"> <div> <input type="text" v-model="value"/> <button @click="add">提交</button> </div> <div> <ul> <li v-for="(item,index) of list" v-bind:key="index">{{item}}</li> </ul> </div> </div> <script> new Vue({ el: "#root" ,//和哪一个dom节点绑定 data: { value: null, list: [] }, methods:{ add: function(){ console.log(123); this.list.unshift(this.value); this.value = ''; } } }) </script> </body> </html>
组件拆分
代码
<!DOCTYPE html> <html> <head> <title>vue 入门</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="root"> <div> <input type="text" v-model="value"/> <button @click="add">提交</button> </div> <div> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item" @dele="dele"></todo-item> </ul> </div> </div> <script> //定义一个全局组件 // Vue.component('todo-item', { // template: '<li>{{content}}</li>' // }) //定义一个局部组件 var TodoItem = { //如果父组件向子组件传值，那么子组件需要定义参数 props: ['content'], template: '<li @click="dele">{{content}}</li>', methods: { dele(){ //console.log(this.index); this.$emit('dele',this.index); } } } new Vue({ el: "#root" ,//和哪一个dom节点绑定 //如果是全局组件，那么需要定义props接收参数 props: ['content'], //如果是局部组件，需要做一个注册 components: { 'todo-item': TodoItem }, data: { value: null, list: [] }, methods:{ add: function(){ console.log(123); this.list.unshift(this.value); this.value = ''; }, dele(index){ this.list.splice(index,1) } } }) </script> </body> </html>
组件和实例的关系
每一个组件就是一个vue实例