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>
     <input
       v-model="newTodoText"
       id="new-todo"
       placeholder="E.g. Feed the cat"
     >
     <button>Add</button>
   </form>
   <ul v-if="todos.length">
     <li
       is="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) return
           this.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: {}
})