发表于: 2017-02-13 19:37:30

2 1160


今天完成的事:今天学习了模板语法,计算属性,class与style的绑定。

明天计划的事:明天计划把列表渲染、事件处理器,表单控制绑定以及组件部分学习完毕并理解透彻,并把相关的demo也写完。

遇到的问题:今天遇到的问题不太多,主要是关于列表渲染部分的代码不够理解,现在贴出来。希望路过的师兄能够指点:

<div id="todo-list-example">

  <input

    v-model="newTodoText"

    v-on:keyup.enter="addNewTodo"

    placeholder="Add a todo"

  >

  <ul>

    <li

      is="todo-item"

      v-for="(todo, index) in todos"

      v-bind:title="todo"

      v-on:remove="todos.splice(index, 1)"

    ></li>

  </ul>

</div>

<script src='vue.js'></script>

<script>

Vue.component('todo-item',   {

  props: ['title'],

  template: '\<li>\{{ title }}\<button v-on:click="$emit(\'remove\')">X</button>\</li>\   //这里的代码是什么意思呢??一句也读不懂

  '

})

new Vue({

  el: '#todo-list-example',

  data: {

    newTodoText: '',

    todos: [

      'Do the dishes',

      'Take out the trash',

      'Mow the lawn'

    ]

  },

  methods: {

    addNewTodo: function () {

      this.todos.push(this.newTodoText)

      this.newTodoText = ''

    }

  }

})

</script>

收货:通过今天的学习,

学会了官方文档的一半内容,对相关demo的理解还不够透彻,还是JS内容基础不太好,明天计划把JS构造函数与原型链知识开始整理,为小课堂做准备。

对响应式原理、过渡效果、render函数和自定义指令部分进行相关的预习,了解了大致的内容。



返回列表 返回列表
评论

    分享到