vue-cli4腳手架搭建一

vue create vue3

cd vue3

yarn serve

http://localhost:8080/#/

main.js檔案

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

render: h => h(App) 這一行是ES6箭頭函式的寫法，等價於下面的寫法
 
render:function(h){
    return h(App);
}

將App作為引數傳入h函式


App.vue是元件的入口 

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<router-view/>是元件內容顯示的區域，一個元件只能有一個<router-view/>標籤

router-link 是元件路由，按路徑的不同，顯示不同的元件
路由切換：上個元件銷燬和新元件載入
由main.js檔案中 import router from './router' 引入路由
main.js是專案的入口，也在main.js中完成Vue的初始化

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

執行專案看到的區域是App.vue的<router-view/>標籤，App.vue是元件的入口，也可以說是檢視的入口；點選不同的路徑，會更換<router-view/>標籤的內容

router/index.js

vue的中檢視就是元件，路由由三部分組成：

url

名稱：可以有，也可以沒有

元件

這裡的Home，是引入的Home.vue元件 import Home from '../views/Home.vue'

/about的元件是懶載入

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

先看About.vue元件，這是一個非常簡單的元件

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

幾個html dom元素，然後最外層是template標籤；一個template標籤內放一個div標籤，就可形成一個元件。也是常見的html模板語法。

複雜一些的元件，會有更多的dom元素，為了更好地渲染這些dom元素，還會加入css樣式/JS指令碼,比如Home.vue元件

將一個元件命名並供外部使用

<template> <div> ... </div> </template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

在另外一個元件中使用時，需要import

<scripts>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
</scripts>

CSS樣式全域性匯入

<template>
  <div id="app">

<!--    路由展示-->
    <div></div>打

<!--    底部導行-->
    <div></div>
  </div>
</template>

<style>
  /*全域性匯入CSS樣式*/
  @import "./assets/css/index.css";

</style>

CSS樣式私有匯入，僅當前元件生效

<style scoped>
  /*全域性匯入CSS樣式*/
  @import "./assets/css/index.css";

</style>

路由樣式

router/index.js

const router = new VueRouter({
    linkActiveClass:'active',
  routes
})

然後定義一個全域性的樣式

<style>
  .active {
    color:rebeccapurple;
  }
</style>

動態樣式

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <div class="index-category">
<!--key指定唯一鍵，實時渲染-->
      <div class="category" v-for="(list,i) in lists":key="i">
        <i class="iconfont"  :style="{background:list.color}"></i>
        <label>{{list.title}}</label>
      </div>

    </div>
  </div>
</template>

<script>


export default {
  name: 'Home',
  data(){
    return {
      lists:[
        {title:'標題1',color:'#ffbb78'},
        {title:'標題2',color:'#b5cf6b'},
        {title:'標題3',color:'#4169e1'}
      ]
    }
  }
}
</script>

vue中的花括號

<label>{{list.title}}</label> 標籤中寫上雙花括號，裡面是js表示式

v-for="(list,i) in lists":key="i"  對於 vue指令，不需要寫花括號，直接就可以寫js表示式

:style="{background:list.color}"  這裡寫上一個花括號，是因為裡面是一個鍵值對 物件，js中定義鍵值的對的方式，比如 let data = {name:"zhangsan"}，js物件本身帶一個花括號

未完...