一，vue组件

1）全局注册

//app.jsVue.component('ttModal', Vue.asyncComponent('Common','ttModal'));//ttModal.html
     
    
      
    
      
               modal-content.        
           
      
     
//topicLeft.html
         
      
       topicLeft.
      
     

渲染后：

<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

 

2）局部注册

通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用。

使用组件时，大多数可以传入到 Vue 构造器中的选项可以在注册组件时使用，有一个例外： data 必须是函数。

//project.jscomponents: {    "projectDetail": Vue.asyncComponent('Project', 'projectDetail', 'Project/projectDetail/projectDetail')},//project.html
     

 

3）可以使用 props 把数据传给子组件。

prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用props选项声明 “prop”。

     
         
      
       users
      
     
     
     
    
      
     

//app.jsVue.component('ttPopup', Vue.asyncComponent('Common','ttPopup'));//注册组件//ttPopup.htmlprops: ['top','left'],

渲染后：

 

4）如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：

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

 

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.jsfunction 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();    }});

     
    
      
       {
   {today | formatDate('dateTime')}}
      
    
      
       {
   {today | formatDate}}
      
     

//注册全局过滤器Vue.filter("formatDate",function(value,formatType){    //value：时间毫秒值    ...    return dateStr;});

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。

1）过滤器函数总接受表达式的值作为第一个参数。

2）过滤器是 JavaScript 函数，因此可以接受参数：

{

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

这里，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。