结合项目学习vue2

Posted 2020-08-30 Colorful_coco

一，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 表达式的值将被求值然后传给过滤器作为第三个参数。