Vue2實踐揭秘 - 書，讀後作了一個簡單摘要
jd上買了本實踐相關的， 看過後，的確是實踐項目後的一些分享，有些網上的一些vue2教程沒怎麽提及
-----------
看完了，有些啟發，作了個簡單摘要作記錄， 對vue2感興趣的，可以自己網上搜些教程看或買本書看，書是對這的一個梳理。
以下內容為看後，覺得有些幫助的.... 分享如下：
-----------------------------------
第1章
a.render的使用
import Vue from ‘vue‘
import App from ‘./App.vue‘
new Vue({
el:‘#app‘,
render: h => h(App);
})
b.組件模板
<template>
<div id="App"></div>
</template>
<script>
export default{
name:‘app‘
}
</script>
<style>
</style>
如果希望樣式只對當前組件起作用
<style scoped>
@import ‘./assets/todos.less‘
</style>
------------------
第2章
a. 用腳手架vue-cli 創建項目
vue init webpack my-project
b. 命名方式約定
src 目錄下： 公共組件（components） 、指令(directives)、過濾器(filters)
目錄名小寫，多於2個的中間用 ‘-’ ，如： login
vue文件名，都用大寫駝峰 ，如： LoginForm.vue ItemLists.vue
目前的入口文件用小寫 index.vue
c. 組件引用用 別名取代路徑引用
在 webpack.base.config.js 中 ， 如：
module.exports = {
.....
resolve:{
extension:[‘‘,‘.js‘],
alias:{
‘bs-select‘:‘bowe_components/bootstarp-select/dist/js/select.js‘
}
}
}
-----
其他地方引用
import Selector from ‘bs-select‘
------------------
第3章
a. 路由，在main.js中加入
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
Vue.use(VueRouter）
b. 眾多的路由信息，最好寫成一個獨立的js文件，如 routes.js
在main.js中修改
import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./config/routes‘
new Vue({
el:‘#app‘,
router
render: h => h(App)
})
----------
routes.js 中如下
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import Home from ‘./Home.vue‘
import Cart from ‘./Cart.vue‘
import Me from ‘./Me.vue‘
Vue.use(VueRouter)
export default new VueRouter({
mode:‘history‘,
base: __dirname,
routes:[
{path:‘/‘,component:Home},
{path:‘/Cart‘,component:Cart},
{path:‘/Me‘,component:Me}
]
})
c. 頁面上不直接使用路由定義， 如： <router-link to="./Cart"></router-link>
路由中要調整更改為
routes:[
{name:‘Home‘,path:‘/‘,component:Home},
{name:‘Cart‘,path:‘/Cart‘,component:Cart},
{name:‘Me‘,path:‘/Me‘,component:Me}
]
------
頁面上 <router-link :to="{name:‘Home‘}" ></router-link> , 這個地方是:to ，這是要傳入一個對象而不是字符串
如是動態路由 <router-link :to="{name:‘BookDetails‘,params:{id：1}}"></router-link>
history中router-link的三種模式：
默認調用 push , replace , append
<router-link :to="{name:‘Home‘ replace}"></router-link> , 就沒有histiory 記錄
<router-link :to="{path:‘releatice/path‘ append}"></router-link> , 如原來是a,現在的單是b, 最終效果是 a/b
------------------
第4章
組件的對應關系
組件註冊名稱 BookList ， 模塊標記 book-list
html 中
<div class="section">
<book-list :books="latestUpdated" heading="最新更新">
</book-list>
</div>
<div class="section">
<book-list :books="recommended" heading="編輯推薦">
</book-list>
</div>
在home頁 中把他引入
import BookList from ‘./components/BookList.vue‘
export default{
data(){
.....
},
components:{BookList},
....
}
------
服務端取數據， 安裝 vue-resource
main.js 中加入並使用
import VueResource from ‘vue-resource‘
Vue.use(VueResource)
還可以在 new Vue 時做點事，如
new Vue({
http:{
root:‘/api‘,
headers:{}
},
....
})
-----
使用了vue-resource 後， 會自動註入一個 $http的對象
原來的jquery ajax ,如：
$.get(‘/api/home‘).then(res =>{
self.annoouncement = res.annoouncement
self.slides = res.slides
self.latestUpdated = res.latestUpdated
self.recommended = res.recommended
})
可以優化為
this.$http.get(‘/api/home‘).then(res =>{
for prop in res.body{
this[prop] = res.body[prop]
}
},(error) =>{
console.log(‘獲取數據失敗‘)
})
---------
第5章 測試內容相關，先放放
調試 Vue-DevTools
----
第6章
視圖和表單處理
推薦了一個模板 UIkit
更多細節需要實踐...... more TODO
http攔截器 inteceptor ，基本用法
Vue.http.interceptors.push((request,next)=>{
//請求發送前的處理邏輯
//如加入 彈窗等....
next((response) =>{
//請求發送後的處理邏輯
// 關閉彈窗
return response
})
})
----
第7章
vuex 的使用, 較多
data的替代者 ： state 和 getter
action 操作的執行者
只用 mutation 修改狀態
服務分離
Vue2實踐揭秘 - 書，讀後作了一個簡單摘要