Swift51.com
麦子学院 头像
麦子学院  2017-03-31 14:58

Vue.js学习之指令与组件

回复:0  查看:2925  
本文和大家分享的主要是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.js学习之指令与组件
这一步的意思是，实例化的这个Vue 接管了 #app 元素，这里面的所有内容归我管，也就是说可以接受 vue 的功能指令。
Vue.js学习之指令与组件
第二步是在#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.js 架构的网站，我们可以看成是一个个组件的开发，最终存在一个根节点，就是项目里唯一实例化的 Vue 对象，而这一个个组件，其实就是一份份配置对象，以及它们对应的 template  模板（ html 片段）。
来源：网络