热门标签: 转载 JavaScript mysql 学习 php
主页> 前端 >

Vue.js学习笔记(组件)

发布时间:2017-12-21 编辑:三石兄 标签: Vue.js前端 热度:1672

记录学习vue.js中关于组件的理解

今天在学习vue.js的时候,看到关于组件的定义,官网文档写了一个组件定义和使用的demo,但是我一开始看着感觉是懵的,第一次见这种定义和使用的方法,反复修改调试后才成功理解他的使用原理(纯属个人认为);

demo:

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>
----------------------------------------------
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

个人理解:todo-item是组件的变量名,用来调用的;props:['todo']是定义一个用于转化的键值,在v-bind:todo='item'的作用就是把item和todo绑定在一起,然后组件中的template中的todo.text就可以调用item中的text,有点类似借刀杀人的感觉,至于key的作用暂时还不知道,后面的文档还没看,等第二天看了后再来补充


Copyright © 2017-2020 三石兄博客 & 版权所有

蜀ICP备17023832号

195721