vue 1.0基本瞭解

Baby_加油_發表於2018-03-28
Vue

一、基本結構

基本結構-js
//1.路由需要準備一個跟元件
var App = Vue.extend({});

//2.定義元件
var Home = Vue.extend({
    template:'<h1>Home</h1>'
})
var List = Vue.extend({
    template:'<h1>List</h1>'
})
var Item = Vue.extend({
    template:'<h1>Item</h1>'
})


//3.建立路由例項
var router = new VueRouter();

//4.關聯-定義路由規則
router.map({
    '/home':{
        name: 'home',
        component: Home
    },
    '/songs':{
        name: 'list',
        component: List
    },
    '/songs/:id':{
        name: 'item',
        component: Item
    }
})

//5.啟動路由
router.start(App,'#app');

//6、重定向
router.redirect({
　　'*':'home'
});
基本結構-HTML
  • 包含app根元素
  • 連結跳轉寫法
  • 元件渲染
<body class="page" id="app">
  <header class="header">
    <a v-link="{ path: '/home' }"><i class="fa fa-expand"></i></a>
    <a v-link="{ path: '/songs' }"><i class="fa fa-list"></i></a>
  </header>
  <section class="main">
    <router-view></router-view>
  </section>

  <script src="libs/vue/vue.js"></script>
  <script src="libs/vue-router/vue-router.js"></script>
  <script src="libs/vue-resource/vue-resource.js"></script>
  <script src="app.js"></script>
</body>

二、基本檔案

  • vue.js 核心庫
  • vue-router.js 路由
  • vue-resource.js ajax的封裝

相關文章