Vue（組件&過濾器）

一，vue組件

1）全局注冊

//app.js
Vue.component('ttModal', Vue.asyncComponent('Common','ttModal')); //ttModal.html
<div class="tt-modal-wrapper">
    <div class="modal-mask" v-bind:class="{'in': isModalIn}" v-on:click="modalClose"></div>
    <div class="modal-content" v-bind:class="{'in': isModalIn}"> modal-content. <slot name="content"></slot>
    </div>
</div>
//topicLeft.html
<tt-modal v-if="isShowCreateTopic" v-on:close="isShowCreateTopic = false">
    <div slot="content">topicLeft.</div>
</tt-modal>

渲染后：

<slot> 元素可以用一個特殊的屬性 name 來配置如何分發內容。多個 slot 可以有不同的名字。具名 slot 將匹配內容片段中有對應 slot 特性的元素。

 

2）局部注冊

通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用。

使用組件時，大多數可以傳入到 Vue 構造器中的選項可以在注冊組件時使用，有一個例外： data 必須是函數。

//project.js
components: { "projectDetail": Vue.asyncComponent('Project', 'projectDetail', 'Project/projectDetail/projectDetail') }, //project.html
<project-detail></project-detail>

 

3）可以使用 props 把數據傳給子組件。

prop 是父組件用來傳遞數據的一個自定義屬性。子組件需要顯式地用props選項聲明 “prop”。

<!--taskAdd.html-->
<tt-popup top="10px" left="20px">
    <div slot="content">users</div>
</tt-popup>
<!--ttPopup.html-->
<div class="tt-popup" v-bind:style="{top:top,left:left}">
    <slot name="content"></slot>
</div>

//app.js
Vue.component('ttPopup', Vue.asyncComponent('Common','ttPopup'));//注冊組件 //ttPopup.html
props: ['top','left'],

渲染后：

 

4）如果把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。為此可以添加一個 keep-alive 指令參數：

<keep-alive>
  <component :is="currentView">
    <!-- 非活動組件將被緩存！ -->
  </component>
</keep-alive>

//嵌套路由
{//我的拼團   
  path: '/personal/myLesGroup',
  component: myLesGroup),
  children: [{//未成團
    path: '/personal/myLesGroup/unsuccess',
    component: unsuccessGroup)
  },{//已成團
    path: '/personal/myLesGroup/success',
    component: successGroup)
  }]
}

<!--myLesGroup.html-->
<template>
    <div class="my-group">
        <div class="two-top-bar">
            <router-link to="/personal/myLesGroup/unsuccess" replace class="bar-item">
                <div class="content">未成團</div>
            </router-link>
            <router-link to="/personal/myLesGroup/success" replace class="bar-item">
                <div class="content">已成團</div>
            </router-link>
        </div>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

 

5）異步組件

在大型應用中，我們可能需要將應用拆分為多個小模塊，按需從服務器下載。為了進一步簡化，Vue.js 允許將組件定義為一個工廠函數，異步地解析組件的定義。Vue.js 只在組件需要渲染時觸發工廠函數，並且把結果緩存起來，用於后面的再次渲染。

Vue.component( 'async-example', function (resolve, reject) {

setTimeout( function () {

　　// 將組件定義傳入 resolve 回調函數，template為html字符串

　　resolve({

　　　　template: '<div>I am async!</div>'

　　})

}, 1000)

})

//app.js
//vue-router路由
path: '/main',
component: Vue.asyncComponent('Main', 'main')
//plugin.js
function asyncComponent(moduleName, componentName, filePath) {
        //...
    return function(resolve, reject) {
        Vue.http.get(rootPath).then(function(response) {
            var elem, i = 0,
                scripts = [],
                template = buildTemplate(response.data, scripts);
            while(elem = scripts[i++]) {
                var script = document.createElement("script");
                if(!elem.src) {
                    script.text = elem.textContent;
                    document.head.appendChild(script).parentNode.removeChild(script);
                    resolveComponentConstructor(resolve, template);
                } else {
                    script.src = elem.src;
                    document.head.appendChild(script).parentNode.removeChild(script);
                    script.onload = script.onreadystatechange = function() {
                        resolveComponentConstructor(resolve, template);
                    }
                }
            }
        },function(error){
            weui.alert('error:'+error);
        });
    }
}        

 

二，過濾器

new Vue({
    el:'#app',
    data:{
        today:''
    },
    //注冊局部過濾器
    filters:{        
        /*formatDate:function(value,formatType){
            //value：時間毫秒值
            ...
            return dateStr;
        }*/
    },
    mounted:function(){
        this.today=new Date().getTime();
    }
});

<div id="app">
    <div>{{today | formatDate('dateTime')}}</div>
    <div>{{today | formatDate}}</div>
</div>

//注冊全局過濾器
Vue.filter("formatDate",function(value,formatType){
    //value：時間毫秒值
    ...
    return dateStr;
});

Vue.js 允許你自定義過濾器，被用作一些常見的文本格式化。

1）過濾器函數總接受表達式的值作為第一個參數。

2）過濾器是 JavaScript 函數，因此可以接受參數：

{{ message | filterA('arg1', arg2) }}

這里，字符串 'arg1' 將傳給過濾器作為第二個參數， arg2 表達式的值將被求值然后傳給過濾器作為第三個參數。