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 修改状态

服务分离