手记

vue.js功能介绍 - 指令,组件

大家好,本文给各位做一下vue.js一个最基本的概念介绍。

vue.js 指令
<div id="app">
   <div v-text="message"></div>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

这个例子我们会得到,v-text所在的div元素的内部插入了'Hello Vue!'这段字符串,那么我们为什么会产生这样一个结果呢,我们来分析一下:



这一步的意思是,实例化的这个Vue接管了#app元素,这里面的所有内容归我管,也就是说可以接受vue的功能指令。


第二步是在#app里, v-text指令被识别出来,它接受的参数是'message',vue获取到这个参数,并在自己实例化的data里查找叫message的属性,找到message的内容原来是'hello vue', 于是把'hello vue' 渲染到页面。

类似的指令,还有v-if,条件判断,v-for,列表渲染,v-on进行元素的事件绑定。等等。vue.js与页面也就是template进行交互,主要是通过这些内置指令来完成的。

vue.js 组件

开发前端页面,模块化有很多好处,比如公用的sidebar,比如公用的日期选择器。
模块化还有一个好处,就是简化开发逻辑,让项目具有扩展性。

vue.js的模块化主要体现在组件上,以组件为单位进行模块化。

我们可以在实例化vue对象之前,通过Vue.component方法来注册全局的组件,比如:

全局组件

// 告诉Vue,我需要一个组件叫做todo-item,它的配置如下,就是包含props和template那个对象
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
}) 
// 实例化一个vue对象,挂载在#app-7这个元素下,并且设定它的属性,groceryList,是一个数组
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

模板:

<div id="app-7">
  <ol>
    <!--因为注册了全局的todo-item组件,所以在挂载范围内我们可以直接使用todo-item标签,来引用这个组件,-->
    <!--组件内部会被 todo-item配置表里的template替换,用来渲染。属性todo也是配置对象里规定的,可以接受的参数。-->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

子组件

实际项目开发中,我们更多的使用的是子组件。

我们刚刚说的每个组件都有一个配置表,就是一个js对象,比如:

{
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
}

我们把这份配置引入到实例化对象里,就可以成为这个vue对象的子组件,比如:

new Vue({
    components: {
        'component-a' : {
              props: ['todo'],
              template: '<li>{{ todo.text }}</li>'
        }
    }
})

这样的话,我们和之前全局组件一样,也可以在实例化对象挂载的范围内,直接使用<component-a>标签来引用组件。

那么接下来,我们考虑一下,子组件里也可以有自己的子组件,比如:

new Vue({
    components: {
        'component-a' : {
              props: ['todo'],
              template: '<li>{{ todo.text }}</li>',
              components: {
                    'component-b' : {
                          template: 'i am component b',
                          components: {
                                ...
                          }
                    }
              }
        }
    }
})

那么这样下去,我们可以有无数个子组件,形成一个组件树:

所以,一个vue.js架构的网站,我们可以看成是一个个组件的开发,最终存在一个根节点,就是项目里唯一实例化的Vue对象,而这一个个组件,其实就是一份份配置对象,以及它们对应的template 模板(html片段)。

vue.js课程

带你入门Vue.js 2.0 开发


由我主讲的vue.js课程正式上线了,课程会从类似上面的基本概念入手,带领大家理解+学习 vue.js。

学习本课程需要大家动脑自己思考,触类旁通,相信带给大家超过vue.js本身的知识和思考。

72人推荐
随时随地看视频
慕课网APP

热门评论

aaafsadfasfada

小白请教下老师 v-for='item in groceryList' v-bind:todo='item' v-bind:key="item.id"  这里的item是可以自己随便取名的吗? 而且我的groceryList{id:'i2',text:'项目三'} 最终渲染出来的结果我试了下跟id这个属性完全没关系,那么这个v-bind:key="item.id"是起了什么作用呢

请教一下,

template: '<li>{{ todo.text }}</li>'

这里的todo指的是什么,为什么它会有text?为什么这里不能写{{groceryList.text}}?

还有就是v-bind:todo="item"有什么意义,它在这里做了什么呢



查看全部评论