标签分类 热门分类
当前位置:首页 > 程序设计电子书 > Vue实战电子书网盘下载
前端工程师必备技能:Vue移动开发实战技巧 前端工程师必备技能:Vue移动开发实战技巧
43852916

43852916 提供上传

资源
28
粉丝
17
喜欢
333
评论
15

    前端工程师必备技能:Vue移动开发实战技巧 PDF 影印超清版

    Vue实战电子书
    • 发布时间:

    给大家带来的一篇关于Vue实战相关的电子书资源,介绍了关于前端工程师、Vue、移动开发方面的内容,本书是由电子工业出版社出版,格式为PDF,资源大小122 MB,李利德编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:8.9,更多相关的学习资源可以参阅 程序设计电子书Web前端视频、等栏目。

  • 前端工程师必备技能:Vue移动开发实战技巧 PDF 下载
  • 下载地址:https://pan.baidu.com/s/1CxJyfEI6AZZU5u-Qj4llk
  • 分享码:5ob6
  • 前端工程师必备技能:Vue移动开发实战技巧 PDF

    Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为2016年社区*火的前端框架,越来越多的公司都在尝试用Vue来开发自己的项目。本书主要以项目维度,站在实战的角度,从项目的搭建,项目开发,到项目的优化,结合实际,多维度介绍了Vue.js。本书从实战场景出发,结合各种实用demo,结合开发环境构建,从无到有,剖析原理,全面介绍Vue2.0的实用技巧。后面几章重点讲解Vue内部实现机制,针对各种业务形态的支持以及网站调优方等等,是Vue技术体系追随者不可多得的实战宝典。

    目 录

    • 第1章 搭建开发环境 1
    • 1.1 本地Node环境 1
    • 1.1.1 Node.js 1
    • 1.1.2 npm 7
    • 1.1.3 yarn 12
    • 1.1.4 npm vs yarn 17
    • 1.2 ide相关配置 17
    • 1.2.1 常用ide 17
    • 1.2.2 Sublime text 17
    • 1.2.3 Atom 20
    • 1.2.4 WebStorm 22
    • 1.2.5 VSCode 23
    • 1.3 本章小结 27
    • 第2章 从零搭建Vue工程 28
    • 2.1 本地开发需要哪些工具 28
    • 2.2 搭建Vue工程 29
    • 2.2.1 Vue-cli 29
    • 2.2.2 脚手架项目构成分析 30
    • 2.3 webpack配置 32
    • 2.3.1 webpack简介 32
    • 2.3.2 webpack配置解析 33
    • 第3章 API详解 45
    • 3.1 全局变量 45
    • 3.1.1 silent 45
    • 3.1.2 optionMergeStrategies 45
    • 3.1.3 devtools 46
    • 3.1.4 errorHandler 48
    • 3.1.5 ignoredElements 48
    • 3.1.6 keyCodes 49
    • 3.1.7 performance 49
    • 3.1.8 productionTip 49
    • 3.2 模板语法 50
    • 3.3 指令 50
    • 3.3.1 v-text 51
    • 3.3.2 v-html 51
    • 3.3.3 v-pre 51
    • 3.3.4 v-cloak 52
    • 3.3.5 v-once 53
    • 3.3.6 v-if 54
    • 3.3.7 v-else 54
    • 3.3.8 v-else-if 55
    • 3.3.9 v-show 55
    • 3.3.10 v-for 56
    • 3.3.11 v-bind 64
    • 3.3.12 v-model 70
    • 3.3.13 v-on 74
    • 3.3.14 自定义指令 77
    • 3.4 过滤器 79
    • 3.5 计算属性 80
    • 3.5.1 基础例子 80
    • 3.5.2 计算属性vs Methods 81
    • 3.5.3 计算属性缓存 81
    • 3.5.4 Computed属性vs Watched属性 82
    • 3.5.5 计算setter 83
    • 3.6 观察者Watchers 84
    • 3.7 组件的功能与使用 86
    • 3.7.1 使用组件 86
    • 3.7.2 组件开发 88
    • 3.7.3 非Props属性 92
    • 3.7.4 自定义事件 92
    • 3.7.5 Slots内容分发 96
    • 3.7.6 动态组件 99
    • 3.7.7 组件的其他知识 100
    • 3.8 继承与混合 104
    • 3.8.1 Vue.extend 105
    • 3.8.2 options里的extends 105
    • 3.8.3 源码分析 105
    • 3.8.4 合并策略 106
    • 3.9 插件plugin 111
    • 第4章 Vue组件库 115
    • 4.1 Element 115
    • 4.1.1 Element的设计 115
    • 4.1.2 Element的UI 116
    • 4.1.3 Element的优缺点 117
    • 4.2 Mint UI 118
    • 4.2.1 Mint UI的特性 118
    • 4.2.2 Mint UI的优缺点 119
    • 4.3 iView 119
    • 4.3.1 iView简介 120
    • 4.3.2 iView的优缺点 120
    • 4.4 Vux 121
    • 4.4.1 Vux简介 121
    • 4.4.2 Vux优缺点 122
    • 4.5 XCUI 122
    • 4.5.1 XCUI简介 122
    • 4.5.2 XCUI优缺点 123
    • 第5章 官方周边库 124
    • 5.1 Axios 124
    • 5.1.1 功能 124
    • 5.1.2 安装 124
    • 5.1.3 Example 125
    • 5.1.4 Axios API 126
    • 5.1.5 请求配置 127
    • 5.1.6 响应结构 130
    • 5.1.7 配置的默认值/defaults 131
    • 5.1.8 拦截器 132
    • 5.1.9 错误处理 133
    • 5.1.10 取消 134
    • 5.1.11 Promises 135
    • 5.1.12 TypeScript 135
    • 5.2 Vuex的使用 135
    • 5.2.1 State 135
    • 5.2.2 Getters 137
    • 5.2.3 Mutations & Actions 138
    • 5.2.4 Modules 141
    • 5.2.5 模块重用 145
    • 5.3 Vue-router使用 146
    • 5.3.1 安装 146
    • 5.3.2 开始 146
    • 5.3.3 动态路由匹配 147
    • 5.3.4 编程式导航 151
    • 5.3.5 命名路由 152
    • 5.3.6 命名视图 153
    • 5.3.7 重定向和别名 153
    • 5.3.8 HTML5 History模式 154
    • 5.3.9 后端配置例子 155
    • 5.3.10 警告 155
    • 5.3.11 导航钩子 156
    • 5.3.12 过渡动效 159
    • 5.3.13 数据获取 160
    • 5.3.14 滚动行为 163
    • 5.3.15 懒加载 164
    • 第6章 Vue项目优化 166
    • 6.1 状态过渡 166
    • 6.1.1 过渡的概念 166
    • 6.1.2 CSS过渡 166
    • 6.1.3 Javascript钩子 167
    • 6.2 Vue项目的自动化测试 170
    • 6.2.1 unit tests 172
    • 6.2.2 e2e测试 175
    • 6.3 Typescript Support 179
    • 6.3.1 Typescript 179
    • 6.3.2 安装Typescript 180
    • 6.3.3 Typescript和Vue结合 180
    • 6.4 MPA 186
    • 6.4.1 关于MPA的优劣势 187
    • 6.4.2 如何实现MPA 187
    • 6.5 Vue的异构 190
    • 6.5.1 不属于异构的情况 191
    • 6.5.2 通过封装成Vue组件的方式实现异构 192
    • 6.5.3 通过directive的方式实现异构 194
    • 6.5.4 循环嵌套Vue组件 197
    • 6.6 服务端渲染 198
    • 6.6.1 服务端渲染的概念 198
    • 6.6.2 用Vue-ssr的意义 198
    • 6.6.3 Vue-ssr的作用 198
    • 6.6.4 Vue-ssr学习难度 198
    • 6.6.5 技术栈 199
    • 6.6.6 前后端数据策略 199
    • 6.6.7 性能影响 199
    • 6.6.8 安装 200
    • 6.6.9 渲染一个Vue实例 200
    • 6.6.10 一个例子 202
    • 6.7 Vue的pre-render 204
    • 第7章 原理解析 206
    • 7.1 Virtual DOM原理 206
    • 7.1.1 DOM 206
    • 7.1.2 Virtual DOM算法 209
    • 7.2 Vue精髓之响应式数据流 210
    • 7.2.1 数据流演进史 210
    • 7.2.2 Vue和React介绍 211
    • 7.2.3 Vue的响应式数据流的优势 211
    • 7.2.4 Object.defineProperty与订阅发布设计模式 213
    • 7.2.5 Vue源码 214
    • 7.2.6 Vue的render函数就是Watcher的expOrFn 218
    • 7.3 Vuex2.0源码解析 219
    • 7.3.1 Vuex的含义 219
    • 7.3.2 源码分析 220
    • 7.3.3 Vuex API分析 233
    • 7.3.4 辅助函数 235
    • 7.3.5 插件 239
    • 7.3.6 一些函数的封装 242
    • 7.4 Vue-router原理 244
    • 7.4.1 Vue-router 244
    • 7.4.2 Vue-router应用举例 244
    • 7.4.3 Vue-router原理 245
    • 第8章 进军WEEX 256
    • 8.1 搭建WEEX基础环境 256
    • 8.1.1 初始化:hello world 256
    • 8.1.2 dotwe 257
    • 8.2 分析首个WEEX工程代码 258
    • 8.2.1 目录结构 258
    • 8.2.2 通过serve起服务 258
    • 8.2.3 webpack配置 259
    • 8.2.4 页面开发 260
    • 8.3 debug WEEX代码 260
    • 8.3.1 web端调试 260
    • 8.3.2 手机端调试 261
    • 8.4 集成WEEX到已有应用 263
    • 8.4.1 集成到Android 263
    • 8.4.2 集成到iOS 268
    • 8.5 使用WEEXpack构建移动应用 271

    上一篇:Visual C++项目开发全程实录  下一篇:技术领导力:程序员如何才能带团队

    展开 +

    收起 -

    Vue实战 相关电子书
    关于Vue实战的学习笔记
    网友NO.521215

    vue-router中的hash和history两种模式的区别

    众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别。 hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = hash;} 上面的代码可以通过改变hash来改变页面字体颜色,虽然没什么用,但是一定程度上说明了原理。 更关键的一点是,因为hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了,同时点击后退时,页面字体颜色也会发生变化。这样一来,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来,后来人们给它起了一个霸气的名字叫前端路由,成为了单页应用标配。 网易云音乐,百度网盘就采用了hash路由,看起来就是这个样子: http://music.163.com/#/friend https://pan.baidu.com/disk/home#list/vmode=list history路由 随着history api的到来,前端路由开始进化了,前面的hashchange,你只能改变#后面的url片段,而history api则给了前端完全的自由 history api可以分为两大部分,切换和修改,参考MDN 切换历史状态 包括back,forward,go三个方法,对应浏览器的前进,后退,跳转操作,有同学说了,(谷歌)浏览器只有前进和后退,没有跳转,嗯,在前进后退上长按鼠……

    网友NO.436291

    vue集成kindeditor富文本的实现示例代码

    指令 该指令的作用是dom渲染后触发,因为非vue的插件有的是dom必须存在的情况下才可以执行 Vue.directive('loaded-callback', { inserted: function (el, binding, vnode) { binding.value(el, binding, vnode) }}) 安装kindeditor npm install kindeditor kindeditor组件 template div class="kindeditor" textarea class="form-control" ref="kindeditor" v-model="localValue" name="content" v-loaded-callback='initKindeditor'/textarea /div/templatescriptimport '../../../../../node_modules/kindeditor/kindeditor-all.js'import '../../../../../node_modules/kindeditor/lang/zh-CN.js'import '../../../../../node_modules/kindeditor/themes/default/default.css'export default { name: 'kindeditor', props: ['options', 'value'], data () { return { localValue: '' } }, watch: { localValue: 'updateValue', value: 'setDefault' }, created () { this.setDefault() }, methods: { initKindeditor () { var _this = this // 默认参数 var options = { uploadJson: 'upload/image', width: '100%', afterChange () { _this.localValue = this.html() } } // 调用外部参数 if (_this.options) { for(var i in _this.options){ options[i] = _this.options[i] } } KindEditor.create(_this.$refs.kindeditor,options); }, // 设置初始值 setDefault () { this.localValue = this.value }, // 修改父件的值 updateValue () { this.$emit('input',this.localValue) } }}/script 用法 kindeditor :options="options" v-model="content"/kindeditor options参考 http://kindeditor.net/docs/option.html 以上就是这篇文章……

    网友NO.882583

    vue实现移动端轻量日期组件不依赖第三方库的方法

    不需要依赖第三方组件的vue日期移动端组件 小轮子 轻量可复用: https://github.com/BeckReed/datepicker-for-vue 2.用法:参见 src/view/demo.vue 文件的用法,简单易懂 div h3三列(年月日)日期弹窗示例--带标题)/h3 button class="blue-btn" @click="togglePicker2"显示三列带标题日期弹框Demo2/button v-date-picker :type="1" :isShow="isShow2" @confirm="confirmDemo2" @cancel="cancelDemo2" v-model="selectedValue2"请选择日期/v-date-picker /div 3.该例子基于vue进行示例: 运行命令如下: npm run dev 请先npm install # install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report# run unit testsnpm run unit# run all testsnpm test For a detailed explanation on how things work, check out theguide anddocs for vue-loader 总结 以上所述是小编给大家介绍的vue实现移动端轻量日期组件不依赖第三方库的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢! ……

    网友NO.396987

    vue-cli webpack2项目打包优化分享

    减小文件搜索范围 配置 resolve.modules Webpack的resolve.modules配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时,会去 node_modules 目录下找。但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径;同样,对于别名(`alias)的配置,亦当如此: function resolve (dir) { return path.join(__dirname, '..', dir)}module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], modules: [ resolve('src'), resolve('node_modules') ], alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'), // ... 'store': resolve('src/store') } }, ...} 合理设置 test exclude test:必须满足的条件(正则表达式,不要加引号,匹配要处理的文件) exclude:不能满足的条件(排除不处理的目录) include:导入的文件将由加载程序转换的路径或文件数组(把要处理的目录包括进来) 这可以减少不必要的遍历,从而减少性能损失。 替换代码压缩工具 Webpack 默认提供的 UglifyJS 插件,由于采用单线程压缩,速度慢 ; webpack-parallel-uglify-plugin 插件可以并行运行 UglifyJS 插件,更加充分而合理的使用 CPU 资源,这可以……

    Copyright 2018-2019 xz577.com 码农之家

    版权责任说明