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

服务分离

时间: 2024-10-20 23:49:09

Vue2实践揭秘 - 书,读后作了一个简单摘要的相关文章

[转]《一线架构师实践指南》—— 读后总结

原文:<一线架构师实践指南>—— 读后总结 之前总觉得架构是一件很高大上的工作,跟普通的编码设计不太一样.前一段实践,自己也尝试做过架构的工作,可惜经验不足导致架构非常混乱.这里读完这本书,大体上对架构的工作有所了解,也稍微摸清了些门道. 我理解的架构 我理解的架构就是基于某些需求,设计代码的基础框架.既然是基于需求,那么肯定要面临不少需求的扩展以及变更,这时就需要架构能够灵活方便的适应变化.因此,架构的工作我的理解更多的是提前预料到未来的变化,提前做好改变的准备. 架构设计的大体思路为: 时

《30天软件开发 告别瀑布拥抱敏捷》一书 读后总结

周四.发现旁边一同事在看一本名为<30天软件开发 告别瀑布拥抱敏捷>的书."敏捷开发"这个词虽然我在很早就已获知,但是我也只是简简单单的认识到一个术语,并未去了解和认识什么是敏捷开发.也刚好趁上个月的项目刚好是采用敏捷开发的模式完成的.于是就向同事借了该书几天.在阅读该书内容的过程中并结合自身项目的参与经历,用对比的方式学习.认识和理解敏捷开发. 一.初试Scrum Scrum是一个用于管理如 软件开发 这样的复杂工作的框架.(这里的框架不是技术上的框架 只是针对项目管理上

Vue2 实践揭秘 错误列表

京东上的购买地址 作者是土生土长的聪明中国人 https://item.jd.com/12176536.html 64页 const bookID = this.$router.params.id 搞错了 我擦. 应该为 const bookID = this.$route.params.id 差一个字母,实在是完蛋了. 害老子折腾了大半宿 原文地址:https://www.cnblogs.com/sexintercourse/p/11565246.html

《移民文化》读后

<移民文化>读后 杨森翔 一个时代.一个国家和一个地区文化的形成,需要一定的历史沉积.而随着人口迁移所产生的移民文化,是一种创新文化,具有独特的魅力,它对于一个时代.一个国家和地区的文化建设,具有不可忽视的意义.      宁夏是一个移民省区,其社会错综复杂性.文化多元格局与丰富多彩性特点的形成,是长期历史积淀的结果,与历史上的移民运动有着相当密切的关系.      一,从一定意义上讲,宁夏人的历史是一部氏族和民族群体迁徙史,从中原而江南,从西域而内地省区和海外.在历代移民浪潮中,他们或因军事

明书诗词:《宁夏风情》读后

<宁夏风情>读后 寄兴 (兼忆去年同学宁夏聚会)    去年七月我何欣,也做一周宁夏人. 塞上江南别样美,同窗情谊十分真. 有诗心种兰山下,嵌笑声于黄水滨. 留影翻时思不尽,读君大作又提神.

认知升级三部曲读后感想

"五一"假期得空认真拜读了一下傅盛先生的<认知升级三部曲>,通读全篇,受益匪浅,是一个生活在当下极速发展,快节奏的现代生活的人应读之书,全篇都在围绕一个主题展开"认知升级",认知是我们从实践中不断认识不断反思得到升级,从而帮助我们做出正确的判断,寻求事物发展的规律,找到一定的格局,而战略则是在建立此基础上打破格局,突破单点,于大格局下寻求新的破局点. 纵观这篇<认知升级三部曲>,更多与现在的"敏捷式开发方法"相贴切,领导者

Code Complete 读后总结和新的扩展阅读计划

用了一年时间终于将代码大全读完了,在这里做一个简单的总结,并安排下一阶段的扩展阅读计划. 1.选择代码大全作为我程序员职业入门的第一本书,我认为是很正确的.这本书语言生动,擅于用隐喻说明深刻的编程原理,虽然并不是写给新手看的,但作为一个新手,我依然从中学到了很多.    2.这本书有很多一针见血的论述:设计是一个启发式过程:编程的最大难题是解决其复杂性:要深入一种语言编程而不是在一种语言上编程,等等.    3.实践是这本书的核心,它提供了很多Checklist让我可以在工作中去应用其原理.书中

《JavaScript DOM编程艺术》读后总结

这是我读的第一本关于JS的书,刚开始我为了选择合适的学习JS的书,看了网上许多人的意见,基本上都是推荐先读这本书.书的内容挺简单的,确实很适合初学者看,阅读的过程中不会产生什么障碍.内容虽然简单,但我觉得还是挺有收获的,之前我主要是通过看视频学习JS的,看了好些视频,了解了好些概念,但对好多概念都是似懂非懂的,认识的不是很真切.通过阅读这本书,使我对前面了解的那些概念有了更清楚的认识,同时,书中还反复强调了几个重要的思想,我觉得这也是很有价值的,很具有指导意义. 书中的第一章是介绍JS的简史的,

《深入浅出数据分析》读后具体解释

<深入浅出数据分析>为数据挖掘入门级教材.通篇以一个化妆品公司Acme为典型案例,分析了从数据分析到决策的全过程.本篇为读后总结,增加自己的练习回答.同一时候贴出书中答案.供对照. 第一部分 高效读书 1.人的大脑会拼命阻止普通.常规.一般的事情,以免干扰自己记录重要的事情. 不是每件事情都如同洪水猛兽般突然.紧急.重要,因此虽然理性上你觉得这件事很重要,可是大脑会习惯性地阻止.有两种方法让大脑像吃人的老虎一样记住知识: 一.缓慢而乏味--反复灌输. 二.迅速而有效--做一切促进不同类型大脑活