当前位置:首页 > 程序设计 > Web前端电子书网盘下载
Vue.js快速入门 Vue.js快速入门
winter wang

winter wang 提供上传

资源
36
粉丝
2
喜欢
289
评论
8

    Vue.js快速入门 PDF 完整版

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

    给大家带来的一篇关于Web前端相关的电子书资源,介绍了关于Vue.js、Web前端方面的内容,本书是由清华大学出版社出版,格式为PDF,资源大小186.6 MB,申思维编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:7.2,更多相关的学习资源可以参阅HCNA技术FPGA删除文件BoostJava8、等栏目。

  • Vue.js快速入门 PDF 下载
  • 下载地址:https://pan.baidu.com/s/19slMXwz9hkZeOKMnWhHk8
  • 提取码:a8n1
  • Vue.js快速入门

    Vue.js快速入门

    内容介绍

    目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。 全书分为8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,*后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训学校的师生教学参考。

    目录

    • 第1章  Vue.js概述    1
    • 1.1  单页应用的出现    1
    • 1.2  为什么要使用Vue.js    2
    • 1.2.1  单页应用    2
    • 1.2.2  知名的单页应用(SPA)框架对比    5
    • 1.2.3  被腾讯和阿里巴巴所青睐    9
    • 1.2.4  用到Vue.js的项目    9
    • 第2章  原生的Vue.js    10
    • 2.1  极速入门    10
    • 2.2  实际项目    11
    • 2.2.1  运行整个项目    12
    • 2.2.2  HTML代码的部分    18
    • 2.2.3  HTML代码的部分    19
    • 2.2.4  js代码部分    21
    • 2.2.5  小结    25
    • 第3章  Webpack Vue.js开发准备    26
    • 3.1  学习过程    26
    • 3.1.1  可以跳过的章节    26
    • 3.1.2  简写说明    26
    • 3.1.3  本书例子文件下载    27
    • 3.2  NVM、NPM与Node    27
    • 3.2.1  Windows下的安装    28
    • 3.2.2  Linux、Mac下的安装    31
    • 3.2.3  运行    31
    • 3.2.4  使用NVM安装或管理node版本    32
    • 3.2.5  删除NVM    33
    • 3.2.6  加快NVM和NPM的下载速度    33
    • 3.3  Git在Windows下的使用    34
    • 3.3.1  为什么要使用Git Bash    34
    • 3.3.2  安装git客户端    35
    • 3.3.3  使用Git Bash    40
    • 3.4  Webpack    41
    • 3.4.1  Webpack功能    42
    • 3.4.2  Webpack安装与使用    43
    • 3.5  开发环境的搭建    44
    • 3.5.1  安装Vue.js    44
    • 3.5.2  运行 vue    44
    • 3.6  Webpack下的Vue.js项目文件结构    45
    • 3.6.1  build文件夹    46
    • 3.6.2  config 文件夹    46
    • 3.6.3  dist文件夹    47
    • 3.6.4  node_modules 文件夹    47
    • 3.6.5  src 文件夹    49
    • 第4章  Webpack Vue.js实战    50
    • 4.1  创建一个页面    50
    • 4.1.1  新建路由    50
    • 4.1.2  创建一个新的Component    51
    • 4.1.3  为页面添加样式    52
    • 4.1.4  定义并显示变量    53
    • 4.2  Vue.js中的ECMAScript    55
    • 4.2.1  let、var、常量与全局变量    55
    • 4.2.2  导入代码:import    56
    • 4.2.3  方便其他代码使用自己: export default {..}    56
    • 4.2.4  ES中的简写    57
    • 4.2.5  箭头函数=>    57
    • 4.2.6  hash中同名的key、value的简写    58
    • 4.2.7  分号可以省略    58
    • 4.2.8  解构赋值    58
    • 4.3  Vue.js 渲染页面的过程和原理    59
    • 4.3.1  渲染过程1:js入口文件    59
    • 4.3.2  渲染过程2:静态的HTML页面(index.html)    61
    • 4.3.3  渲染过程3:main.js中的Vue定义    62
    • 4.3.4  渲染原理与实例    63
    • 4.4  视图中的渲染    64
    • 4.4.1  渲染某个变量    64
    • 4.4.2  方法的声明和调用    65
    • 4.4.3  事件处理:v-on    66
    • 4.5  视图中的Directive(指令)    67
    • 4.5.1  前提:在directive中使用表达式(Expression)    67
    • 4.5.2  循环:v-for    67
    • 4.5.3  判断:v-if    69
    • 4.5.4  v-if与v-for的优先级    70
    • 4.5.5  v-bind    72
    • 4.5.6  v-on    73
    • 4.5.7  v-model 与双向绑定    75
    • 4.6  发送http请求    77
    • 4.6.1  调用http请求    78
    • 4.6.2  远程接口的格式    80
    • 4.6.3  设置Vue.js开发服务器的代理    81
    • 4.6.4  打开页面,查看http请求    83
    • 4.6.5  把结果渲染到页面中    84
    • 4.6.6  如何发起post请求    85
    • 4.7  不同页面间的参数传递    86
    • 4.7.1  回顾:现有的接口    86
    • 4.7.2  显示博客详情页    87
    • 4.7.3  新增路由    88
    • 4.7.4  修改博客列表页的跳转方式1:使用事件    89
    • 4.7.5  修改博客列表页的跳转方式2:使用v-link    91
    • 4.8  路由    92
    • 4.8.1  基本用法    92
    • 4.8.2  跳转到某个路由时带上参数    93
    • 4.8.3  根据路由获取参数    94
    • 4.9  使用样式    94
    • 4.10  双向绑定    96
    • 4.11  表单项目的绑定    99
    • 4.12  表单的提交    102
    • 4.13  Component 组件    105
    • 4.13.1  如何查看文档    105
    • 4.13.2  Component的重要作用: 重用代码    106
    • 4.13.3  组件的创建    106
    • 4.13.4  向组件中传递参数    108
    • 4.13.5  脱离Webpack,在原生Vue.js中创建component    110
    • 第5章  运维和发布Vue.js项目    112
    • 5.1  打包和部署    112
    • 5.1.1  打包    112
    • 5.1.2  部署    114
    • 5.2  解决域名问题与跨域问题    117
    • 5.2.1  域名404 问题    118
    • 5.2.2  跨域问题    119
    • 5.2.3  解决域名问题和跨域问题    120
    • 5.3  如何Debug    122
    • 5.3.1  时刻留意本地开发服务器    122
    • 5.3.2  看developer tools提出的日志    122
    • 5.3.3  查看页面给出的错误提示    123
    • 5.4  基本命令    125
    • 5.4.1  建立新项目    125
    • 5.4.2  安装所有的第三方包    125
    • 5.4.3  在本地运行    126
    • 5.4.4  打包编译    127
    • 第6章  进阶知识    128
    • 6.1  js的作用域与this    128
    • 6.1.1  作用域    128
    • 6.1.2  this    130
    • 6.1.3  实战经验    131
    • 6.2  Mixin    133
    • 6.3  使用Computed Properties(计算得到的属性)和watchers(监听器)    135
    • 6.3.1  典型例子    135
    • 6.3.2  Computed Properties 与 普通方法的区别    136
    • 6.3.3  watched property    137
    • 6.3.4  Computed Property的setter(赋值函数)    140
    • 6.4  Component(组件)进阶    141
    • 6.4.1  实际项目中的Component    142
    • 6.4.2  Prop    144
    • 6.4.3  Attribute    146
    • 6.5  Slot    146
    • 6.5.1  普通的Slot    147
    • 6.5.2  named slot    148
    • 6.5.3  slot 的默认值    149
    • 6.6  Vuex    150
    • 6.6.1  正常使用的顺序    150
    • 6.6.2  Computed属性    154
    • 6.6.3  Vuex原理图    155
    • 6.7  Vue.js的生命周期    156
    • 6.8  最佳实践    157
    • 6.9  Event Handler 事件处理    158
    • 6.9.1  支持的Event    158
    • 6.9.2  使用 v-on 进行事件绑定    159
    • 6.10  与CSS预处理器结合使用    168
    • 6.10.1  SCSS    168
    • 6.10.2  LESS    169
    • 6.10.3  SASS    170
    • 6.10.4  在Vue.js中使用CSS预编译器    171
    • 6.11  自定义 Directive    172
    • 6.11.1  例子    172
    • 6.11.2  自定义Directive的命名方法    173
    • 6.11.3  钩子方法(Hook Functions)    174
    • 6.11.4  自定义Directive可以接收到的参数    174
    • 6.11.5  实战经验    175
    • 第7章  实战周边及相关工具    176
    • 7.1  微信支付    176
    • 7.2  Hybrid App:混合式App    177
    • 7.3  安装 Vue.js的开发工具: Vue.js devtool    178
    • 7.4  如何阅读官方文档    181
    • 第8章  实战项目    183
    • 8.1  准备1:文字需求    183
    • 8.2  准备2:需求原型图    186
    • 8.2.1  明确前端页面    186
    • 8.2.2  如何画原型图    186
    • 8.2.3  首页    186
    • 8.2.4  商品列表页    187
    • 8.2.5  商品详情页    187
    • 8.2.6  购物车页面    188
    • 8.2.7  支付页面    188
    • 8.2.8  我的页面    189
    • 8.2.9  我的订单列表页面    189
    • 8.2.10  总结    190
    • 8.3  准备3:微信的相关账号和开发者工具    190
    • 8.3.1  微信相关账号的申请    190
    • 8.3.2  微信开发者工具    190
    • 8.4  项目的搭建    192
    • 8.5  用户的注册和微信授权    193
    • 8.6  登录状态的保持    202
    • 8.7  首页轮播图    203
    • 8.8  底部Tab    213
    • 8.9  商品列表页    217
    • 8.10  商品详情页    219
    • 8.11  购物车    225
    • 8.13  微信支付    233
    • 8.14  回顾    244

    上一篇:Effective Java中文版  下一篇:Vue企业开发实战

    展开 +

    收起 -

     
    《Vue.js快速入门》学习笔记
    网友NO.134738

    SpringBoot+Vue.js实现前后端分离的文件上传功能

    这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目。 后端项目搭建 我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可 项目创建成功后,maven的pom配置如下 dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter/artifactId /dependency !--加入web模块-- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-test/artifactId scopetest/scope /dependency dependency groupIdcom.alibaba/groupId artifactIdfastjson/artifactId version1.2.39/version /dependency /dependencies 接下来编写上传的API接口 @RestController@RequestMapping("/upload")@CrossOriginpublic class UploadController { @Value("${prop.upload-folder}") private String UPLOAD_FOLDER; private Logger logger = LoggerFactory.getLogger(UploadController.class); @PostMapping("/singlefile") public Object singleFileUpload(MultipartFile file) { logger.debug("传入的文件参数:{}", JSON.toJSONString(file, true)); if (Objects.isNull(file) || file.isEmpty()) { logger.error("文件为空"); return "文件为空,请重新上传"; } try { byte[] bytes = file.getBytes(); Path path = Paths.get(UPLOAD_FOLDER + file.getOriginalFilename()); //如果没有files文件夹,则创建 if (!Files.isWritable(path)) { Fi……

    网友NO.238255

    详解vue.js根据不同环境(正式、测试)打包到不同目录

    1、在build文件夹中创建testing.js文件 // 配置环境变量 type 为 testingprocess.env.type = '"testing"'// 引入build.js文件require('./build') 2、修改config文件夹中的prod.env.js文件 module.exports = { NODE_ENV: '"production"', // 将上文设置的环境变量,赋值到 type 属性上 type: process.env.type} 3、在package.json文件中添加npm run testing命令 "testing": "node build/testing.js", // 添加testing命令"build": "node build/build.js" 4、config -index.js中把build这个命令复制一份改成testing(此步为了打包到不同文件夹) build: { env: require('./prod.env'), // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/mshop/', /** * Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }, testing: { env: req……

    网友NO.844421

    Spring Boot 与 Vue.js 整合流程

    一直都想尝试做前后端分离,我之前一直是学 Java 的,所以后端选择了 Spring Boot;前端选择了 Vue.js 这个轻量、易上手的框架。网上其实已经有了不少 Spring Boot 和 Vue.js 整合的资料,Github 上就有好多 repo,但是每当我指望按图索骥的时候就会出现各种各样奇怪的 bug,上 Stack Overflow 问了也没人搭理。前前后后研究了差不多三个星期,现在总算是理清楚了。 本文重点介绍我在实践过程中的基本流程,以及我遇到的一个困扰了我好久的问题,就是如何 CORS。 框架版本 Spring Boot: 2.0.4.RELEASE(JDK 是1.8) Vue.js: 2.x 基本流程 前端:编写 Vue 组件 首先用 vue-cli 搭好脚手架,我这个 Demo 用到的第三方库有: axios:负责 HTTP 请求 bootstrap-vue:Bootstrap 和 Vue.js 的整合,方便设计页面 vue-router:管理路由 qs:实现 CORS 然后写一个登录组件: !-- 下面是我直接从 bootstrap-vue 文档抄下来的模板 --template div b-form @submit="onSubmit" @reset="onReset" v-if="show" b-form-group id="exampleInputGroup1" label="Username:" label-for="exampleInput1" b-form-input id="exampleInput1" type="text" v-model="form.username" required placeholder="Enter username" /b-form-input /b-form-group b-form-group id="exampleInputGroup2" label="Password:" label-for="exampleInput2" b-form-input id="exampleInput2" type="text" v-model="form.password" required placeholder="Enter password" /b-fo……

    网友NO.985241

    Laravel中用Vue.js实现基于Ajax的表单提交错误验证实例内容

    本教程基于Laravel 5.4 开始之前首先准备好开发环境,我们假设你已经安装好 Laravel,至于 Vue 的引入,请参考官方文档。 做好上述准备工作后就可以开始我们的开发了,本教程中我们将演示文章发布页面的表单 验证 。 首先在 routes/web.php 中新增两条路由规则: Route::get(post/create, PostController@create);Route::post(post/save, PostController@save); 然后在项目根目录下运行 Artisan 命令创建控制器 PostController : php artisan make:controller PostController 在生成的控制器中新增两个方法用于处理路由请求: public function create() { return view(post.create);}public function save(Request $request) { // 设置验证规则 $this-validate($request, [ title = required, body = required ]);} 接下来就要创建响应视图了,为了复用已有的样式风格和页面布局,我们先运行如下 Artisan 命令: php artisan make:auth 这样我们就可以复用 Laravel 自带的认证功能页面布局了,创建视图文件 post/create.blade.php ,并编辑文件内容如下: @extends(layouts.app)@section(content) div class=container !--创建成功显示消息-- div class=alert alert-success v-if=submitted 创建成功! /div !--页面提交之后阻止刷新-- form @submit.prevent=createPost method=POST legend创建文章/legend !--如果title字段验证失败则添加.has-error-- div class=form-group :class={has-error:errors.title} label文章标题/l……

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

    版权投诉 / 书籍推广 / 赞助:QQ:520161757