《Vue.js前端开发基础与项目实战》项目源码

  • 更新时间:
  • 2703人关注
  • 点击下载

给大家带来的是《Vue.js前端开发基础与项目实战》项目源码,介绍了关于Vue.js、前端开发、项目实战、Vue.js方面的内容,本书是由人民邮电出版社出版,已被141人关注,由热心网友符奇略 提供,目前本书在Vue.js类综合评分为:8.2分

资源详情相关推荐
《《Vue.js前端开发基础与项目实战》项目源码》封面
  • 出版社:人民邮电出版社
  • 作者:郑韩京
  • 大小:741 MB
  • 类别:Vue.js
  • 热度:182
  • Vue.js实战
  • Vue.js v2.x 官方教程
  • Vue.js前端开发:快速入门与专业应用
  • Vue.js快速入门
  • Vue.js项目开发实战
  • 编辑推荐

    1.涵盖Vue框架的重点知识,使用起来更加得心应手 2.涵盖MySQL数据库,Node.js服务器端开发以及页面优化等高级技术 3.涵盖后端Koa框架开发,从前端到全栈不是梦 4.涵盖ES6语法讲解,紧跟JavaScript发展前沿 5.涵盖前后端使用的各种插件和工具,提升知识面 6.实战案例丰富,环环相扣,提高实战技能

    内容简介

    本书以项目实战的方式引导读者渐进式学习Vue.js。本书从Vue.js的基础语法讲起,然后介绍ES6的语法规范,*后通过项目构建、项目部署介绍Vue.js项目开发的全套流程。本书内容侧重于Vue.js项目实战开发中的组件复用、代码解耦等操作,读者不但可以系统地学习Vue.js的相关知识,而且能对Vue.js的开发应用有更为深入的理解。 本书分为基础准备篇和项目实战篇。基础准备篇主要介绍Vue.js的核心功能,包括但不限于Vue.js的语法与组件、ES6的语法规范、前后端项目框架的构建、数据库及其相关操作。项目实战篇主要以网页版知乎为例讲解实战开发流程与方法,所涉及的项目分析、开发流程、项目部署等内容可帮助读者融会贯通地应用所学知识。阅读本书,读者能够掌握Vue.js框架主要 API 的使用方法、组件开发、前后端项目联调等内容。 本书示例丰富、侧重实战,适用于刚接触或即将接触Vue.js的开发者,也适用于对Vue.js有过开发经验,但需要进一步提升的开发者。

    目录

    • 第 1篇 基础准备篇
    • 第 1章 关于前端开发你需要知道的事.. 02
    • 1.1 网页开发的前世今生. 02
    • 1.1.1 是否还记得曾经的前端开发 . 02
    • 1.1.2 大前端时代的来临. 03
    • 1.2 MVC、MVP、MVVM 傻傻分不清楚.. 05
    • 1.2.1 MVC 小解. 05
    • 1.2.2 MVP 小解. 06
    • 1.2.3 MVVM 小解 06
    • 1.2.4 三者的区别和优劣. 08
    • 1.3 工欲善其事,必先利其器 08
    • 1.3.1 开发者的眼——Chrome 08
    • 1.3.2 开发者的手——VS Code.. 10
    • 1.3.3 开发者的心——Terminal. 11
    • 1.4 小结 12
    • 第 2章 关于Vue.js 的一些小事. 14
    • 2.1 从安装开始 14
    • 2.1.1 直接引入 14
    • 2.1.2 脚手架的配置.. 15
    • 2.1.3 脚手架的使用.. 16
    • 2.2 Vue.js 初体验. 21
    • 2.2.1 项目文件内容介绍. 21
    • 2.2.2 必不可少的Helle World.. 23
    • 2.2.3 经典的TodoList 25
    • 2.3 了解一些特性. 31
    • 2.3.1 新建实例 31
    • 2.3.2 生命周期 32
    • 2.3.3 模板语法. 34
    • 2.3.4 计算属性与过滤器.. 34
    • 2.3.5 样式的修改.. 36
    • 2.3.6 条件与列表渲染. 40
    • 2.3.7 事件的处理.. 43
    • 2.3.8 双向绑定. 46
    • 2.4 小结 49
    • 第3章 组件详解.. 51
    • 3.1 组件概念.. 51
    • 3.1.1 什么是组件.. 51
    • 3.1.2 为什么要使用组件.. 52
    • 3.2 组件创建.. 53
    • 3.2.1 组件基础. 53
    • 3.2.2 组件注册. 55
    • 3.3 组件通信.. 55
    • 3.3.1 父组件与子组件通信 56
    • 3.3.2 子组件与父组件通信 58
    • 3.3.3 子组件之间的通信.. 59
    • 3.4 插槽 60
    • 3.5 特殊情况.. 62
    • 3.6 小结 65
    • 第4章 ES6 的日常使用 66
    • 4.1 关于ES6 你需要知道的事 66
    • 4.1.1 ES 的发展历史 66
    • 4.1.2 ES6 和JS 的关系. 67
    • 4.1.3 为什么要使用ES6 68
    • 4.2 ES6 常用语法简介. 70
    • 4.2.1 Demo 的分析.. 70
    • 4.2.2 用户获取数据的方法 72
    • 4.2.3 输出用户输入信息的方法.. 73
    • 4.2.4 判断最喜欢地点的方法. 74
    • 4.2.5 判断支出类型的方法 75
    • 4.2.6 保存数据. 76
    • 4.3 Babel 的支持.. 76
    • 4.3.1 Babel 是什么. 76
    • 4.3.2 Babel 文件配置.. 78
    • 4.3.3 Babel 的实际调用 80
    • 4.4 小结 81
    • 第5章 项目的构建 82
    • 5.1 前端项目构建——Webpack.. 82
    • 5.1.1 Webpack 是什么.. 82
    • 5.1.2 Webpack 的特点.. 83
    • 5.1.3 Webpack 配置规范 83
    • 5.1.4 Webpack 整体配置一览.. 87
    • 5.1.5 Webpack 使用. 88
    • 5.1.6 Webpack4.X 的新特性 89
    • 5.2 前端常用插件的介绍. 90
    • 5.2.1 Axios. 90
    • 5.2.2 Element.. 93
    • 5.2.3 Sass.. 97
    • 5.2.4 Esl int.. 100
    • 5.3 后端项目构建——Koa.. 102
    • 5.3.1 为什么选择Koa. 102
    • 5.3.2 构建Koa 项目.. 105
    • 5.3.3 koa-router 的优化. 106
    • 5.4 数据库——MySQL 108
    • 5.4.1 MySQL 简介.. 108
    • 5.4.2 MySQL 的安装 109
    • 5.4.3 Sequelize 的使用.. 111
    • 5.5 小结.. 114
    • 第 2篇 项目实战篇
    • 第6章 项目分析与设计. 118
    • 6.1 我们要做一个什么项目. 118
    • 6.2 实现哪些功能,需要哪些页面. 121
    • 6.2.1 需求分析 121
    • 6.2.2 页面设计 121
    • 6.2.3 提取公用插件.. 123
    • 6.3 路由的分配.. 123
    • 6.3.1 一级路由的确定 123
    • 6.3.2 二级路由的确定 124
    • 6.4 数据库内容的确定.. 125
    • 6.4.1 根据需求确定数据表结构. 125
    • 6.4.2 主要字段的配置 126
    • 6.5 小结.. 128
    • 第7章 基础页面的开发. 129
    • 7.1 主页的开发.. 129
    • 7.1.1 页面主体header 框架开发 129
    • 7.1.2 主页路由配置.. 131
    • 7.1.3 主页header 剩余内容开发 132
    • 7.1.4 第三方ICON 库的引入. 133
    • 7.1.5 首页主体框架开发. 134
    • 7.1.6 首页右侧侧边栏次组件开发.. 136
    • 7.1.7 首页右侧侧边栏主组件开发.. 138
    • 7.1.8 主页列表外内容效果展示. 140
    • 7.1.9 内容列表表头开发. 140
    • 7.1.10 模拟数据获取. 142
    • 7.1.11 列表元素开发. 143
    • 7.1.12 列表操作按钮开发 145
    • 7.1.13 列表系列组件的调用. 147
    • 7.1.14 首页列表效果展示 149
    • 7.2 登录注册页面的开发 150
    • 7.2.1 确定登录页背景框架.. 150
    • 7.2.2 登录页静态内容 152
    • 7.2.3 登录页表单验证等相关内容.. 154
    • 7.2.4 登录页信息提示及整体效果.. 157
    • 7.3 注册登录功能实现.. 158
    • 7.3.1 数据表的确定.. 158
    • 7.3.2 用户注册功能实现. 161
    • 7.3.3 用户登录登出与信息存储. 164
    • 7.4 小结.. 169
    • 第8章 文章和问题的日常操作. 170
    • 8.1 图片和富文本的处理 170
    • 8.1.1 富文本插件的使用. 170
    • 8.1.2 文章编辑页header 组件开发. 172
    • 8.1.3 文章编辑页主组件开发 174
    • 8.1.4 文章编辑页路由注册与效果展示. 175
    • 8.1.5 文章编辑页发布文章方法. 176
    • 8.1.6 图片的上传接口开发.. 177
    • 8.1.7 图片上传前端开发. 179
    • 8.1.8 富文本组件中的图片上传. 180
    • 8.2 文章的增、删、改、查. 182
    • 8.2.1 文章新增页面的跳转.. 182
    • 8.2.2 文章相关数据表配置.. 182
    • 8.2.3 文章增加删除接口的开发. 185
    • 8.2.4 文章查询更新接口开发 188
    • 8.2.5 文章列表开发.. 190
    • 8.2.6 文章详情页面开发. 192
    • 8.2.7 文章跳转链接修改. 195
    • 8.3 问题的增、改 195
    • 8.3.1 问题增加更新前端模块开发.. 196
    • 8.3.2 问题增加修改与header 部分修改 198
    • 8.3.3 问题数据表新建 200
    • 8.3.4 问题增加更新接口开发 201
    • 8.4 小结.. 203
    • 第9章 评论、回答和状态的操作.. 204
    • 9.1 问题回答的相关操作 204
    • 9.1.1 问题详情前端页面开发 204
    • 9.1.2 问题详情前端逻辑开发 207
    • 9.1.3 新建回答数据表 210
    • 9.1.4 回答查找、删除和更新接口.. 211
    • 9.1.5 问题答案的查询接口.. 214
    • 9.1.6 问题回答的前端展示.. 216
    • 9.2 评论的相关操作. 219
    • 9.2.1 评论新建前端开发. 219
    • 9.2.2 新建评论数据表 222
    • 9.2.3 评论新建查找删除接口开发.. 223
    • 9.2.4 新建评论效果展示. 226
    • 9.2.5 评论展示前端开发. 227
    • 9.2.6 评论功能组件开发. 228
    • 9.2.7 评论功能组件调用. 231
    • 9.2.8 一级评论效果展示. 233
    • 9.2.9 评论列表的循环调用.. 234
    • 9.2.10 多级评论效果展示 236
    • 9.2.11 评论个数展示. 236
    • 9.3 状态的相关操作. 238
    • 9.3.1 状态的更新. 238
    • 9.3.2 状态中特殊情况的处理 242
    • 9.4 小结.. 243
    • 第 10章 个人主页的开发. 245
    • 10.1 个人信息的修改 245
    • 10.1.1 个人信息页面的新建. 245
    • 10.1.2 个人信息页面查看修改接口开发 248
    • 10.1.3 个人信息页面的跳转. 249
    • 10.1.4 个人座右铭的修改 252
    • 10.1.5 用户头像修改. 254
    • 10.2 个人主页列表开发. 258
    • 10.2.1 列表框架的构建.. 258
    • 10.2.2 作者回答查询接口开发.. 261
    • 10.2.3 作者回答查询接口调用.. 262
    • 10.2.4 作者回答删除功能开发.. 264
    • 10.2.5 作者回答编辑功能开发.. 267
    • 10.2.6 作者文章的查看功能开发 270
    • 10.2.7 作者文章的删除功能开发 272
    • 10.2.8 作者文章的编辑功能开发 273
    • 10.2.9 提问的列表 275
    • 10.3 小结. 278
    • 第 11章 项目的部署.. 279
    • 11.1 服务器的购买与配置.. 279
    • 11.2 服务器的连接与配置.. 280
    • 11.2.1 服务器连接的两种方法.. 281
    • 11.2.2 服务器环境安装.. 282
    • 11.2.3 服务器数据库详细配置.. 283
    • 11.2.4 服务器项目文件夹创建.. 286
    • 11.3 服务部署 286
    • 11.3.1 前端项目部署. 286
    • 11.3.2 后端项目部署. 289
    • 11.4 小结. 291
    • 第 12章 总结.. 293
    • 12.1 第 1 篇内容回顾 293
    • 12.2 第 2 篇内容回顾 294
    • 12.3 小结. 295
    展开阅读
    精选笔记1:vue.js单文件组件中非父子组件的传值实例

    4小时42分钟前回答

    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助!

    在官网api中的这段讲解很少,也很模糊;官网中说明如下:

    非父子组件通信:

    有时候两个组件也需要通信 (非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线:

    var bus = new Vue();
    // 触发组件 A 中的事件
    bus.$emit('id-selected', 1)
    // 在组件 B 创建的钩子中监听事件
    bus.$on('id-selected', function (id) {
     // ...
    })

    那么这一段在单文件组件开发模式中具体怎么用呢?

    首先在main.js中加入data,如下:

    new Vue({
     el: '#app',
     router,
     template: '<App/>',
     components: { App },
     data:{
     bus:new Vue()
     }
    })

    如何获取到这个空的vue对象 bus呢.在组件里面直接调用这个this.$root

    <template>
     <div class="title" @click="change(msg)">{{ msg }}</div>
    </template>
    <script>
     export default {
     name: 'first',
     data() {
      return {
      msg: '我是首页'
      }
     },
     methods: {
      change(text) {
      this.$root.bus.$emit("hehe", text)
      }
     }
     }
    
    </script>
    

    然后在另一个组件内调用on事件接收,当然在组件销毁时解除绑定,使用on事件接收,当然在组件销毁时解除绑定,使用off方法

    <template>
     <h1>{{ msg }}</h1>
    </template>
    <script>
     export default {
     name: 'second',
     data() {
      return {
      msg: '我是第二页'
      }
     },
     created() {
      let that = this;
      this.$root.bus.$on("hehe", function (t) {
      that.msg = that.msg + t
      })
     }
     }
    
    </script>
    

    然后点击的时候就能传递值了,还等什么,快来试试吧!

    以上这篇vue.js单文件组件中非父子组件的传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

    展开阅读

    Vue.js相关资源

    学习笔记

    12小时51分钟前回答

    Vue.js的动态组件模板的实现

    组件并不总是具有相同的结构。有时需要管理许多不同的状态。异步执行此操作会很有帮助。 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件。让我们来一起看一下评论,看一下我表达的意思是什么。 评论现在不再仅仅是简单的文本字段。您希望能够发布链接,上传图像,集成视频等等。必须在此注释中呈现所有这些完全不同的元素。如果你试图在一个组件内执行此操作,它很快就会变得非常混乱。 处理方式 我们该如何处理这个问题?可能大多数人会先检查所有情况,然后在此之后加载特定组件。像这样的东西: template div class="comment" // comment text p.../p // open graph image link-open-grap……

    9小时37分钟前回答

    基于vue.js实现图片轮播效果

    轮播图效果: 1.html template div class="shuffling" div class="fouce fl" div class="focus" ul class="showimg" template v-for='sd in shufflingData' li v-if='shufflingId==$index' v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext' a target="_blank" title="{{sd.title}}" class="img" href="{{sd.href}}"img alt="{{sd.title}}" v-bind:src="sd.url"//a h3a target="_blank" title="{{sd.title}}" href="{{sd.href}}"{{sd.title}}/a/h3 /li /template /ul div class='bullet-pagination' a class="bullet" v-bind:class="{'active': shufflingId==0}" v-on:click='bulletFunOne'/a a class="bullet" v-bind:class="{'active': shufflingId==1}" v-on:click='bulletFunTwo'/a a class="bullet" v-bind:class="{'active': shufflingId==2}" v-on:click='bulletFunThree'/a /div div v-show='PreNext' class="preNext pre" v-on:mouseov……

    18小时48分钟前回答

    vue.js项目 el-input 组件 监听回车键实现搜索功能示例

    基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIconClick" @keyup.enter.native="searchEnterFun" /el-inputinput placeholder="搜索" type="text" @keyup.enter="searchEnterFun" 在methods方法集里,写上监听的方法,当获取的keyCode 为13时,表示按下了回车键,如果需要监听空格或者其他键,换成别的键值 searchEnterFun:function(e){ var keyCode = window.event? e.keyCode:e.which; // console.log('回车搜索',keyCode,e); if(keyCode == 13 this.input){ this.$router.push({path:'/Sha……