vonic單頁面應用

弓長張&木子李發表於2018-06-25

Vonic—基於Vue.js和ionic樣式的移動端UI框架

先放上原始碼和demo地址:

　　　　標籤演示:  https://wangdahoo.github.io/vonic/docs/

　　　　      原始碼:  https://github.com/wangdahoo/vonic

需要的js,css檔案在 https://unpkg.com   中根據格式要求可以找到:

 vonic.min.css

ionicons.woff

 

jquery-1.11.1.min.js

axios.min.js

vue.min.js

vue-resource.min.js

vue-router.min.js

vuex.min.js

vonic.min.js

 

index.html  

      需要注意的是, 在html中使用vue語法繫結屬性或者事件時,不能使用簡寫, 例如:@click,  :class等, 必須使用全寫  v-on:click,  v-bind:class 等, 有些vonic的標籤會使vue的語法不起作用, 使用html的標籤就好了

      關於頁面間資料傳遞,可以參考:https://blog.csdn.net/libin_1/article/details/51775655

 

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    
    <link type="text/css" rel="stylesheet" href="/css/vonic.min.css"/>
    <link type="text/css" rel="stylesheet" href="/css/ionicons.woff"/>
  
</head>
<body>
<!-- mount point -->
<von-app></von-app>

<!-- index -->
<script type="text/x-template" id="index">
    <div class="page has-navbar" v-nav="{title: `標題`,showMenuButton:true,showBackButton:true}">
    <div class="page-content padding-top">
      <!-- type: text, password, email, tel -->
      <div class="item item-divider">
        有標籤: {{username}}
      </div>
      <von-input type="text" v-model="userName" placeholder="使用者名稱" label="使用者名稱"></von-input>
      <von-input type="password" v-model="passWord" placeholder="密碼" label="密碼" style="margin-bottom: 5px;"></von-input>

      <div class="padding">
        <button class="button button-positive button-block" v-on:click="change()">確認</button>
      </div>

      <div class="item item-divider">
        無標籤: {{tel}}
      </div>
      <von-input type="tel" v-model="tel" placeholder="手機"></von-input>
  </div>

    </div>
</script>


<!--index2-->
<script type="text/x-template" id="index2">
    <div class="page has-navbar" v-nav="{title: `標題`,showMenuButton:true,showBackButton:true}">
    <div class="page-content padding-top">
      <!-- type: text, password, email, tel -->
      <div class="item item-divider">
        有標籤: {{username}}
      </div>
      <von-input type="text" v-model="userName2" placeholder="使用者名稱" label="使用者名稱"></von-input>
      <von-input type="password" v-model="passWord2" placeholder="密碼" label="密碼" style="margin-bottom: 5px;"></von-input>

      <div class="padding">
        <button class="button button-positive button-block">確認</button>
      </div>

      <div class="item item-divider">
        無標籤: {{tel}}
      </div>
      <von-input type="tel" v-model="tel2" placeholder="手機"></von-input>
  </div>

    </div>
</script>
 <script src="/js/jquery-1.11.1.min.js"></script> 
<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
 <script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
 <script src="plugins/vue/vue-resource.min.js"></script> 
<script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js">
</script> <script src="https://unpkg.com/vuex@2.2.1/dist/vuex.min.js"></script> 
<script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script> 
<script type="text/javascript" src="/js/index.js"></script>

</body>
</html>

 

index.js

var index_data={
   userName:``,
   passWord:``,
   tel:``
 } 
var index= { 
    template: `#index`,//這裡的index是html中的<script type="text/x-template" id="index">的id值 剩下的寫法跟vue一樣 
    data: function(){ 
            return index_data; 
    },  
    created: function () { 

     }, 
     methods: { 
　　　　　　change:function:{
                 var self = this;
                 localStorage.setItem("data",self.userName);//將要傳遞個另外一個頁面的值存入快取中, 然後在另一個頁面根據key取出
　　　　　　　　　　window.location.href = "index.html#/index2.html";//跳轉到index2.html的template
　　　　　 }
    }
}
//=================================================================================================
var index2_data={
   username:``,
   password:``,
   tel:``
} 
var index2= { 
    template: `#index2`,//這裡的index是html中的<script type="text/x-template" id="index2">的id值 剩下的寫法跟vue一樣 
    data: function(){ 
            return index2_data; 
    },  
    created: function () { 
        var self = this;
        self.userName = localStorage.getItem("data");
     }, 
     methods: { 

    }
}
var routes = [ 
　　　　{ path: `/`, component: index},//根據這個index找到上面的var index={}  path是請求路徑
       { path: `/index2`, component: index2}
] 
Vue.use(Vonic.app, { 
　　　　　　routes: routes 
})

請求路徑: localhost:8080/index.html   埠號換成自己的,這樣就跳到index那個template了

大致的框架就是這樣了, 可能還會存在些問題 , 一般就是標籤沒有閉合, 繫結的屬性不對, vonic的標籤和vue事件衝突 , js引入不對也會不顯示, 在使用跳轉的時候如果不成功,改變跳轉路徑, 多試試, 具體跳轉原理還沒有深入瞭解

 

相關文章