zoukankan      html  css  js  c++  java
  • vuejs keep-alive

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue</title>
    
         <!-- 
        <script src="vue.js"></script>
        -->
        
     <script src="https://unpkg.com/vue/dist/vue.js"></script>
     
    </head>
    <body> 
     
     <div id="counter-event-example">
     <keep-alive>   <!-- 把切换出去的组件保存到内存中 -->
      <component v-bind:is="currentView">
      <!-- 组件在 vm.currentview 变化时改变! -->
      </component>  
      </keep-alive>
    </div>
     
    <script> 
    
     
    // 外部注册组件
    Vue.component('outside', {
      
      template: '<p>Welcome from outside!</p>',
      data: function () {
        return {
          someChildProperty: true
        }
      }
    })
    
    
    // 内部自带组件
    var vm = new Vue({
      el: '#counter-event-example',
      data: {
        currentView: 'home'
      },
      components: {
        home:{
            template:'<div><span>home....</span><span> header </span></div>'                
            ,
                    data: function () {
                    return {
                    someChildProperty: true
                    }
                    }
        },
        posts:{
            template:'<span>posts....</span>',
                    data: function () {
                    return {
                    someChildProperty: true
                    }
                    }
        },
        archive:{
            template:'<span>archive....</span>',
                    data: function () {
                    return {
                    someChildProperty: true
                    }
                    }
        }
      }
    })
    
    
    // 可以在 console 修改   vm.currentView='posts'  刷新视图
    
    </script>
    
    
    
    </body>
    </html>
  • 相关阅读:
    键盘过滤驱动
    多线程和多进程的差别(小结)
    Android UI设计规则
    怎样使用SetTimer MFC 够具体
    Chord算法(原理)
    POJ 1384 Piggy-Bank 背包DP
    Bulk Insert命令具体
    hibernate官方新手教程 (转载)
    教你用笔记本破解无线路由器password
    转换流--OutputStreamWriter类与InputStreamReader类
  • 原文地址:https://www.cnblogs.com/rojas/p/6595461.html
Copyright © 2011-2022 走看看