标签分类
当前位置:首页 > 程序设计电子书 > 前端开发电子书网盘下载
Vue.js前端开发:快速入门与专业应用 Vue.js前端开发:快速入门与专业应用
码小辫

码小辫 提供上传

资源
49
粉丝
3
喜欢
141
评论
7

    Vue.js前端开发:快速入门与专业应用 PDF 高清版

    前端开发电子书
    • 发布时间:

    给大家带来的一篇关于前端开发相关的电子书资源,介绍了关于Vue.js、前端开发、快速入门、专业应用方面的内容,本书是由人民邮电出版社出版,格式为PDF,资源大小3.6KB MB,陈陆扬编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:7.7,更多相关的学习资源可以参阅 程序设计电子书Web前端视频、等栏目。

  • Vue.js前端开发:快速入门与专业应用 PDF 下载
  • 下载地址:https://pan.baidu.com/s/1p7uW2RPdN6MO0WPv2H9jVQ
  • 分享码:fcy9
  • Vue.js前端开发:快速入门与专业应用 PDF

    本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的适用场景和具体操作。本书的特点在于案例详实,使读者体会到框架的优点和便捷之处,提升开发效率,最后能将Vue.js运用到实际项目中,避免纸上谈兵的尴尬。

    目录

    • 第1章 Vue.js简介
    • 1.1 Vue.js是什么 1
    • 1.2 为什么要用Vue.js 2
    • 1.3 Vue.js的Hello world 2
    • 第2章 基础特性
    • 2.1 实例及选项 5
    • 2.1.1 模板 6
    • 2.1.2 数据 7
    • 2.1.3 方法 9
    • 2.1.4 生命周期 10
    • 2.2 数据绑定 12
    • 2.2.1 数据绑定语法 13
    • 2.2.2 计算属性 17
    • 2.2.3 表单控件 18
    • 2.2.4 Class与Style绑定 21
    • 2.3 模板渲染 22
    • 2.3.1 前后端渲染对比 23
    • 2.3.2 条件渲染 23
    • 2.3.3 列表渲染 25
    • 2.3.4 template标签用法 27
    • 2.4 事件绑定与监听 28
    • 2.4.1 方法及内联语句处理器 28
    • 2.4.2 修饰符 29
    • 2.4.3 与传统事件绑定的区别 30
    • 2.5 Vue.extend() 31
    • 第3章 指令
    • 3.1 内置指令 32
    • 3.1.1 v-bind 32
    • 3.1.2 v-model 33
    • 3.1.3 v-if-else-show 33
    • 3.1.4 v-for 33
    • 3.1.5 v-on 34
    • 3.1.6 v-text 34
    • 3.1.7 v-HTML 35
    • 3.1.8 v-el 35
    • 3.1.9 v-ref 35
    • 3.1.10 v-pre 36
    • 3.1.11 v-cloak 36
    • 3.1.12 v-once 37
    • 3.2 自定义指令基础 37
    • 3.2.1 指令的注册 37
    • 3.2.2 指令的定义对象 37
    • 3.2.3 指令实例属性 39
    • 3.2.4 元素指令 40
    • 3.3 指令的高级选项 41
    • 3.3.1 params 41
    • 3.3.2 deep 42
    • 3.3.3 twoWay 43
    • 3.3.4 acceptStatement 44
    • 3.3.5 terminal 44
    • 3.3.6 priority 45
    • 3.4 指令在Vue.js 2.0中的变化 46
    • 3.4.1 新的钩子函数 46
    • 3.4.2 钩子函数实例和参数变化 46
    • 3.4.3 update函数触发变化 47
    • 3.4.4 参数binding对象 47
    • 第4章 过滤器
    • 4.1 过滤器注册 48
    • 4.2 双向过滤器 49
    • 4.3 动态参数 50
    • 4.4 过滤器在Vue.js 2.0中的变化 51
    • 第5章 过渡
    • 5.1 CSS过渡 52
    • 5.1.1 CSS过渡的用法 52
    • 5.1.2 CSS过渡钩子函数 54
    • 5.1.3 显示声明过渡类型 57
    • 5.1.4 自定义过渡类名 57
    • 5.2 JavaScript过渡 58
    • 5.2.1 Velocity.js 58
    • 5.2.2 JavaScript过渡使用 58
    • 5.3 过渡系统在Vue.js 2.0中的变化 59
    • 5.3.1 用法变化 59
    • 5.3.2 类名变化 60
    • 5.3.3 钩子函数变化 61
    • 5.3.4 transition-group 63
    • 第6章 组件
    • 6.1 组件注册 65
    • 6.1.1 全局注册 65
    • 6.1.2 局部注册 66
    • 6.1.3 注册语法糖 67
    • 6.2 组件选项 67
    • 6.2.1 组件选项中与Vue选项的区别 67
    • 6.2.2 组件Props 68
    • 6.3 组件间通信 71
    • 6.3.1 直接访问 71
    • 6.3.2 自定义事件监听 72
    • 6.3.3 自定义事件触发机制 72
    • 6.3.4 子组件索引 75
    • 6.4 内容分发 76
    • 6.4.1 基础用法 76
    • 6.4.2 编译作用域 77
    • 6.4.3 默认slot 78
    • 6.4.4 slot属性相同 79
    • 6.4.5 Modal实例 79
    • 6.5 动态组件 82
    • 6.5.1 基础用法 82
    • 6.5.2 keep-alive 83
    • 6.5.3 activate 钩子函数 84
    • 6.6 Vue.js 2.0中的变化 85
    • 6.6.1 event 85
    • 6.6.2 keep-alive 86
    • 6.6.3 slot 87
    • 6.6.4 refs 87
    • 第7章 Vue.js常用插件
    • 7.1 Vue-router 88
    • 7.1.1 引用方式 88
    • 7.1.2 基本用法 89
    • 7.1.3 嵌套路由 90
    • 7.1.4 路由匹配 92
    • 7.1.5 具名路由 93
    • 7.1.6 路由对象 93
    • 7.1.7 v-link 94
    • 7.1.8 路由配置项 95
    • 7.1.9 route钩子函数 96
    • 7.1.10 路由实例属性及方法 99
    • 7.1.11 vue-router 2.0 的变化 100
    • 7.2 Vue-resource 104
    • 7.2.1 引用方式 104
    • 7.2.2 使用方式 105
    • 7.2.3 $http的api方法和选项参数 105
    • 7.2.4 拦截器 107
    • 7.2.5 $resource用法 107
    • 7.2.6 封装Service层 109
    • 7.3 Vue-devtools 109
    • 7.3.1 安装方式 110
    • 7.3.2 使用效果 110
    • 第8章 Vue.js工程实例
    • 8.1 准备工作 111
    • 8.1.1 webpack 111
    • 8.1.2 vue-loader 113
    • 8.2 目录结构 115
    • 8.3 前端开发 117
    • 8.4 后端联调 122
    • 8.5 部署上线 124
    • 8.5.1 生成线上文件 124
    • 8.5.2 nginx 125
    • 8.5.3 gitlab 126
    • 8.5.4 jenkins 127
    • 第9章 状态管理:Vuex
    • 9.1 概述 130
    • 9.2 简单实例 131
    • 9.2.1 所需组件 131
    • 9.2.2 创建并注入store 132
    • 9.2.3 创建action及组件调用方式 133
    • 9.2.4 创建mutation 134
    • 9.2.5 组件获取state 135
    • 9.3 严格模式 137
    • 9.4 中间件 137
    • 9.4.1 快照 138
    • 9.4.2 logger 138
    • 9.5 表单处理 139
    • 9.6 目录结构 142
    • 9.6.1 简单项目 142
    • 9.6.2 大型项目 143
    • 9.7 实例 145
    • 9.7.1 state结构 146
    • 9.7.2 actions.js 148
    • 9.7.3 app.js 148
    • 9.7.4 组件结构 148
    • 9.7.5 base组件 152
    • 9.7.6 展示结果 154
    • 9.8 Vue.js 2.0的变化 155
    • 9.8.1 State 155
    • 9.8.2 Getters 156
    • 9.8.3 Mutations 157
    • 9.8.4 Actions 157
    • 9.8.5 Modules 159
    • 第10章 跨平台开发:Weex
    • 10.1 Weex简介 161
    • 10.2 Weex安装 162
    • 10.2.1 ios环境安装 162
    • 10.2.2 android环境安装 163
    • 10.2.3 web端运行 164
    • 10.3 Weex实例与运行 164
    • 10.4 Weex基础语法 168
    • 10.4.1 数据绑定 168
    • 10.4.2 事件绑定 169
    • 10.4.3 模板逻辑 169
    • 10.5 Weex内置组件 170
    • 10.5.1 scroller 170
    • 10.5.2 list 171
    • 10.5.3 Switch 172
    • 10.5.4 Slider 172
    • 10.5.5 wxc-tabbar 174
    • 10.5.6 wxc-navpage 175
    • 10.6 Weex内置模块 176
    • 10.6.1 dom 176
    • 10.6.2 steam 177
    • 10.6.3 modal 178
    • 10.6.4 animation 179
    • 10.6.5 webview 180
    • 10.6.6 navigator 181
    • 10.6.7 storage 182
    • 第11章 Vue.js 2.0新特性
    • 11.1 Render函数 183
    • 11.1.1 createElement用法 184
    • 11.1.2 使用案例 185
    • 11.1.3 函数化组件 186
    • 11.1.4 JSX 187
    • 11.2 服务端渲染 188
    • 11.2.1 vue-server-renderer 188
    • 11.2.2 简单实例 189
    • 11.2.3 缓存和流式响应 191
    • 11.2.4 SPA实例 193

    上一篇:SOA与Java:用Java技术实现面向服务  下一篇:计算机组成:结构化方法

    展开 +

    收起 -

    码小辫二维码
     ←点击下载即可登录

    前端开发相关电子书
    学习笔记
    网友NO.156826

    Vue.js每天必学之过渡与动画

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果。Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。 为了应用过渡效果,需要在目标元素上使用 transition 特性: div v-if="show" transition="my-transition"/div transition 特性可以与下面资源一起用: •v-if •v-show •v-for (只在插入和删除时触发,使用 vue-animated-list 插件) •动态组件 (介绍见组件) •在组件的根节点上,并且被 Vue 实例 DOM 方法(如 vm.$appendTo(el))触发。 当插入或删除带有过渡的元素时,Vue 将: 1.尝试以 ID "my-transition" 查找 JavaScript 过渡钩子对象——通过 Vue.transition(id, hooks) 或 transitions 选项注册。如果找到了,将在过渡的不同阶段调用相应的钩子。 2.自动嗅探目标元素是否有 CSS 过渡或动画,并在合适时添加/删除 CSS 类名。 3.如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作(插入/删除)在下一帧中立即执行。 CSS 过渡 示例 典型的 CSS 过渡像这样: div v-if="show" transition="expand"hello/div 然后为 `.expand-transition`, `.expand-enter` 和 `.expand-leave` 添加 CSS 规则: /* 必需 */.expand-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden;}/*……

    网友NO.201239

    Vue.js基础知识汇总

    介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式。实际的DOM操作和输出格式被抽象的方式到指令(Directives)和过滤器(Filters) 在哲学领域内,尽量让MVVM数据绑定API尽可能简单。模块化和可组合性也是重要的设计考虑。vue不是一个全面的框架,它被设计成简单的和灵活的。你可以用它快速原型,或混合和匹配与其他库定义前端堆栈。 Vue。js的API是参考了AngularJS、KnockoutJS Ractive.js Rivets.js。尽管有相似之处,我相信Vue.js提供一个有价值能够让你在现在的一些现有框架中舍取其价值 即使你已经熟悉其中的一些术语,建议您通过以下概念的概述,因为你的这些术语的概念可能在Vue.js的下文中有所不同 概念概述 ViewModel 一个对象,同步模型和视图. 在Vue.js中,ViewModels是实例化的Vue的构造器或者是它的子类 var vm = new Vue({ /* options */ }) 这是主要的对象,你会与作为开发人员在使用Vue.js交互。更多细节请参阅Class: Vue. View 用户看到的实际HTML / DOM vm.$el // The View 当使用Vue.js时候,除了自己自定义的指令你几乎不会触碰到DOM的操作,当数据更新后视图的更新将会自动的触发,视图的更新可以很精确的到每一个testNode节点,他们也批处理和异步执行从而提供更好的性能。 M……

    网友NO.667004

    Vue.js鼠标悬浮更换图片功能

    最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现。 首先将所有的选中后图片都覆盖到没选中图片上 html代码如下 ul li a href="" img src="../../../img/goods/study.png" alt="学习" img class="hide_tab" src="../../../img/goods/study_1.png" alt="学习" /a /li li a href="" img src="../../../img/goods/life.png" alt="生活" img class="hide_tab" src="../../../img/goods/life_1.png" alt="生活" /a /li li a href="" img src="../../../img/goods/sport.png" alt="运动" img class="hide_tab" src="../../../img/goods/sport_1.png" alt="运动" /a /li li a href="" img src="../../../img/goods/clothes.png" alt="服饰" img class="hide_tab" src="../../../img/goods/clothes_1.png" alt="服饰" /a /li li a href="" img src="../../../img/goods/hat.png" alt="鞋帽" imgclass="hide_tab" src="../../../img/goods/hat_1.png" alt="鞋帽" /a /li li a href="" img src="../../../img/goods/food.png" alt="食品" img class="hide_tab" src="../../../img/goods/food_1.png" alt="食品" /a /li li a href="" img src="../../../img/goods/other.png" alt="其他" img class="hide_tab" src="../../../img/goods/other_1.png" alt="其他" /a /li /ul css代码如下 .right { float: left; ul { margin-left: 1px; li { display: inline-block; margin-left: 12px; width: 100px; height: 100px; a{ position: relative; display: inline-block; width: 100px; height: 10……

    网友NO.824932

    浅谈Vue.js

    vue.js的总体评价“简单却不失优雅,小巧而不乏大匠” Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJs,下面我会将Vue与Angular(Angular 1.0+版本)做一些简单的比较。 Vue的主要特点就和它官网(http://cn.vuejs.org/)所介绍的那样: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 下面看一段Angular的实现双向绑定的代码 // htmlbody ng-app="myApp" div ng-controller="myCtrl" p{{ note }}/p input type="text" ng-model="note" /div/body// jsvar myModule = angular.module('myApp', []);myModule.controller('myCtrl', ['$scopp', function($scope) { $scope.note = '';]); 然后再看一下Vue的代码 // htmlbody div id="app" p{{ note }}/p input type="text" v-model="note" /div/body// jsvar vm = new Vue({ el: '#app', data: { note: '' }}) 相比较而言我个人认为Vue的代码编写风格更加简洁,并且通俗易懂。 不失优雅 Vue虽然是一个比较轻量级的框架,简单轻量的同时还非常的人性化,其提供的API也是非常的容易理解,同时也提供了一些很便捷的指令和属性。 例如: (1) 绑定click事件 a v-on:click="doSomething"/a 可以简写为: a @click="doSomething"/a (2) 绑定动态属性 a v-bind:href="url" rel="external nofollow" rel="external nofollow" /a 可以简写为: a……

    Copyright 2018-2019 xz577.com 码农之家

    版权责任说明