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(): 請求(返回)上一個記錄路由