vue2基础系列教程之todo的实现及面试高频问题

关键知识点

• v2里面，当在同一个元素或组件上同时使用v-for和v-if,v-for的权限高于v-if

• v-show和v-if的区别主要有

  • v-if是惰性的，v-show是及时的
  • v-if值为false时，不会生成dom,v-show不管值是true或false,都会生成dom,修改的是dom的display属性
  • v-if用在组件上，会触发组件的生命周期的重新渲染，v-show不会
  • v-if可以用在template上，v-show不行，只能用在元素或组件上

• v-for迭代的数据可以是array，也可以是object,如果是object，则内部使用的Object.keys进行的迭代。

• 在迭代ul中元素时，我们要注意一点，由于ul内部只能显示li标签，所以我们在封装子组件时要注意必须如下处理，使用is='组件名字'，避免不同的浏览器渲染不同，导致出现bug
  -

实现效果

<div id="app">...<todo-form :todos="todos"/>
</div>

form表单的封装

const form = `<div id="todo-list-example"><form v-on:submit.prevent="addNewTodo"><label for="new-todo">Add a todo</label><inputv-model="newTodoText"id="new-todo"placeholder="E.g. Feed the cat"><button>Add</button></form><ul v-if="todos.length"><liis="todo-item"v-for="(todo, index) in todos"v-bind:key="todo.id"v-bind:title="todo.title"v-on:remove="todos.splice(index, 1)"></li></ul><p v-else>No todos left!</p>
</div>`

Vue.component('todo-form', {template: form,   //就是html字符串，类似于react里面jsx的写法data(){return {newTodoText:'',id:0}},props:['todos'],methods: {addNewTodo(){if(!this.newTodoText) returnthis.todos.push({id:this.id++,title:this.newTodoText})this.newTodoText=''}}
})

item封装实现

Vue.component('todo-item', {props: ['title'],template: `<li>{{ title }} <button v-on:click="$emit('remove')">Remove</button>`
})

根实例的实现

const vm = new Vue({el: '#app',data: {object: {title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'},users:[{id:'1',name:"张三"},{id:'2',name:"李四"}],todos:[]},created() {},methods: {}
})