vue-02

1. vue腳手架

用來建立vue項目的工具包
建立項目:
    npm install -g vue-cli
    vue init webpack VueDemo
開發環境運作:
    cd VueDemo
    npm install
    npm run dev
生産環境打包釋出
    npm run build
    npm install -g serve
    serve dist
    http://localhost:5000
           

2. eslint

用來做項目編碼規範檢查的工具
基本原理: 定義了很多規則, 檢查項目的代碼一旦發現違背了某個規則就輸出相應的提示資訊
有相應的配置, 可定制檢查
           

3. 元件化程式設計

vue檔案包含3個部分
    <template>
      <div></div>
    </template>
    <script>
        export default {
          props: []/{}
          data(){},
          computed: {}
          methods: {},
          
          watch: {}
          filters: {}
          directives: {}
          components: {}
        }
    </script>
    <style>
    </style>
元件化編碼的基本流程
    1). 拆分界面, 抽取元件
    2). 編寫靜态元件
    3). 編寫動态元件
        初始化資料, 動态顯示初始化界面
        實作與使用者互動功能
元件通信的5種方式
    props
    vue的自定義事件
    pubsub第三方庫
    slot
    vuex(後面單獨講)
props:
    父子元件間通信的基本方式
    屬性值的2大類型: 
        一般: 父元件-->子元件
        函數: 子元件-->父元件
    隔層元件間傳遞: 必須逐層傳遞(麻煩)
    兄弟元件間: 必須借助父元件(麻煩)
vue自定義事件
    子元件與父元件的通信方式
    用來取代function props
    不适合隔層元件和兄弟元件間的通信
pubsub第三方庫(消息訂閱與釋出)
    适合于任何關系的元件間通信
slot
    通信是帶資料的标簽
    注意: 标簽是在父元件中解析
vuex
    多元件共享狀态(資料的管理)
    元件間的關系也沒有限制
    功能比pubsub強大, 更适用于vue項目
           

4. ajax

相關庫:
    vue-resource: vue插件, 多用于vue1.x
    axios: 第三方庫, 多用于vue2.x
vue-resource使用
    // 引入子產品
    import VueResource from 'vue-resource'
    // 使用插件
    Vue.use(VueResource)
    
    // 通過vue/元件對象發送ajax請求
    this.$http.get('/someUrl').then((response) => {
      // success callback
      console.log(response.data) //傳回結果資料
    }, (response) => {
      // error callback
      console.log(response.statusText) //錯誤資訊
    })
axios使用
    // 引入子產品
    import axios from 'axios'
    
    // 發送ajax請求
    axios.get(url)
      .then(response => {
        console.log(response.data) // 得到傳回結果資料
      })
      .catch(error => {
        console.log(error.message)
      })
           

5. vue-router

vue用來實作SPA的插件
使用vue-router
    1. 建立路由器: router/index.js
      new VueRouter({
        routes: [
          { // 一般路由
            path: '/about',
            component: about
          },
          { // 自動跳轉路由
            path: '/', 
            redirect: '/about'
          }
        ]
      })
    2. 注冊路由器: main.js
       import router from './router'
           new Vue({
               router
           })
    3. 使用路由元件标簽:
           <router-link to="/xxx">Go to XXX</router-link>
           <router-view></router-view>
編寫路由的3步
    1. 定義路由元件    
    2. 映射路由
    3. 編寫路由2個标簽
嵌套路由
    children: [
        {
          path: '/home/news',
          component: news
        },
        {
          path: 'message',
          component: message
        }
     ]
向路由元件傳遞資料
    params: <router-link to="/home/news/abc/123">
    props: <router-view msg='abc'>
緩存路由元件
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
路由的程式設計式導航
    this.$router.push(path): 相當于點選路由連結(可以傳回到目前路由界面)
    this.$router.replace(path): 用新路由替換目前路由(不可以傳回到目前路由界面)
    this.$router.back(): 請求(傳回)上一個記錄路由