guoyp2126的博客

app.vue是项目的根组件，相当于网站的首页，该组件的实例将挂载到index.html页面中，在根组件中使用路由完成页面的展示与跳转。单页面应用入口处使用接口函数createApp(app)创建vue的实例对象，函数中参数app就是项目的根组件，其他vue文件均作为该根组件的子组件，通过模块引入使用完成调用，最终形成一棵组件树。每个组件可以看成一个页面片段，运行在外壳页面内部，所谓的页面跳转实际是页面片段跳转，是把一个页面片段删除或者隐藏，加载另一个页面片段并显示出来。

在nginx部署vue项目，含同一端口号下，配置多个vue项目

行内经常说前段门槛低，但是做好很难。这里的门槛低指的是掌握了html、css、javaScript及面向对象的一些基础的理论就可以上手做，做好很难指的是界面既要精致，又要做到使用起来就像操作大众软件一样容易，这需要经验的积累。作为前段开发人员开始可以模仿国内大厂前段页面的布局，同时多思考这些大厂为什么这样做，这样做的好处在哪儿，又什么优点、缺点......

VUE有两种使用方式，一种实在html中直接使用vue做开发，一种是企业级的单页面应用。原认为前一种方式主要作用是为了降低VUE的学习门槛——通过在大家熟悉的HTML环境中使用vue，大家很容易去了解和熟悉VUE。现在看来在html使用vue组件还有两大作用，一个是封装比较复杂的组件，在其他应用中使用，另一个作用是调试样式.........

通常将图片放入src/assets/文件夹下，在view中绑定图片，如：<van-image round width="2rem" height="2rem" :src="headerUrl" />headerUrl是VM定义的图片路径，代码如下：data () { return { headerUrl: '../assets/images/unlogin.png', } }界面上图片不显示，解决办法，修改data中代码如下即可显示 data ()

vue的组件可以使用大驼峰（首字母大写）、小驼峰（首字母小写）和短横线分隔命名（两个单词之间使用短横线连接），在不同场合需要遵循一定的规则，否则有可能会报错，具体规则如下：有意义的名词、简短、具有可读性组件在定义时，使用大驼峰命名规则，这与后端类的命名规则是一样的当注册组件时，则需要短横线分隔命名方式引入，因为在html中不区分大小写，myMessage和mymessage是等价的。组件中的prop属性定义时，使用短横线分隔方式命名，此时在view（html）可直接使用。当属性定义时使用驼峰规则，

html中所有元素都可以看成一个盒子。外边距（margin）、边框（border）、内边距（padding）及填充内容（content）。使用盒子模型可以完成页面的设计和布局。宽度（withd）和高度（height）是盒子模型中最重要的属性，使用该属性可以完成页面的布局和对齐。块级元素和行内元素块级元素：典型代表为div、form、table等，宽度和高度可以指定，它可以容纳内联元素和其他块元素，元素前后有换行符，总是另起一行，多个块状元素标签写在一起，默认排列方式为从上至下。其特征：1）能够识别宽高

使用…扩展运算符时，代码为：const data={name:'张三',age:18,sex:'男'}console.log(...data)运行报Uncaught TypeError: Found non-callable @@iterator错误，意思为data不是可迭代对象，所谓的JS中的可迭代对象包括常用的集合对象（数组、Set、Map集合）和字符串都是可迭代对象。上述代码修改为：const data=[{name:'张三',age:18,sex:'男'}]console.log(...

在以往的前端开发中，前端严重依赖后端，必须等待后端接口开发出来才能继续开发。使用mock，可以使得前后端开发异步进行，互不影响。Mock.js 是一个模拟数据生成器，使用它可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式即可。这样前端就不需要依赖后端的接口，使用模拟的数据独立的完成开发，以下使用vue+mock.js的一个例子。安装mock打开命令行窗口，进入工程目录，输入以下命令，完成mock.js安装。npm install mockjs --save-dev只在开发环境使用

不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。HBuilderX中ESLint插件安装HBuilderX 包含4款语法校验插件，htmlhint, stylelint, eslint-plugin-vue, eslint-js。点击工具—>插件安装，界面如下：点击插件市场，进入插件市场，输入eslint搜索。点击eslint，进入详情页，点击安装插件。注h

前言Vue允许用户自定义过滤器，对于一些常见的文本格式化、剔除错误的格式或字符、文本中增加一些公用的报文头或报文尾内容，需要使用到过滤器。如：对输入的文本进行检查，将所有的字符转换为大写；或者对金额类的属性前增加“￥”符号等。局部过滤器在某个组件内部定义的过滤器称为局部过滤器。在vue2.X及以上版本中定义相应的filter，filter的地位同Data、mothod、computed平行，Filter的定义格式为 filters: { //fiters标签，与data、mothod平

前言Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，Vue 提供了内置的过渡封装组件transition，该组件用于包裹要实现过渡效果的组件。先看一个示例代码如下<template> <div align="center" style="margin-top: 100px;"> <button @click="show= !show" >测试</button> <transition>

定义现实生活中让一个人一次等待1万秒，这个人肯定不干，但是1万次，一次等待一秒，这个人肯定能接受，后者的处理就是软件开发中的懒加载，也叫延迟加载。所谓路由加载有两种方式，一种是一次性将所有的路由全部加载（不管用不用），前面所有的示例都是这种加载方式。这种加载方式特点首次加载很慢，首次打开页面的时间很长。另一种方式叫懒加载，首次并不将所有的组件进行加载，当用到那个组件时加载那个组件，这样将加载时所需的时间分散到各个操作中，提高用户的体验。在单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会

定义重定向（Redirect）就是通过各种方法将各种网络请求重新定个方向转到其他位置。如：用户在商品页面,要购买商品服务器发现用户没登录,浏览器此时跳到登录页面,登录成功后返回到商品页面.又如：用户在个人中心,要修改密码服务器发现用户没登录,浏览器此时跳到登录页面,登录成功后返回到个人中心页面。路由重定向需要使用到关键字Redirect和路由钩子函数（beforeEach(to, from, next)）来完成，下面通过一个具体的示例来做以说明。示例【例】打开web系统，系统一级菜单包括首页、我的、

定义路由都指向同一个组件，由于权限的不同或不同组件进入一个"共用"的组件，需要渲染不同的数据。这时需要根据组件携带的参数提取不同的数据，前端页面切换时进行参数传递是开发中最基本业务需求，如父组件需要将要显示的记录的ID传递给子组件。动态路由的传参仅局限于嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数和不显示参数两种方式。【例】父组件在调用子组件时，将携带的参数在子组件中显示。使用param传参，在URL

在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。

在前端开发中，首页是一个组件，通过路由可以切换到此URL，假如在“首页”组件中，还嵌套着 “登录”和 “注册”两个组件。此时就需要使用到嵌套路由（子路由）。所谓的嵌套路由就是在一个被路由过来的页面下可以继续使用路由，是路由中的路由。以下就以一个示例说明嵌套路由的使用。【例】在网站中包含首页()和关于两个组件，登录页面又包含登录和注册两个组件，进入系统时默认进入首页，点击登录切换到登录页面，点击注册切换到注册页面。新建views文件夹，并在该文件夹中新建Home.vue、About.vue、login.

前言所谓的路由是指在Web开发中URL到函数的映射，路由方式分为后端路由和后端路由。后端路由又称为服务器端路由，当服务器接收到客户端发来的HTTP请求，就会根据所请求的相应URL，找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端，页面渲染是在服务器端使用相应的模板来对页面进行渲染后，再返回渲染完毕的页面。前端路由的映射函数通常是进行一些DOM的显示和隐藏操作，当访问不同的路径的时候，会显示不同的页面组件。由于后端路由，加大服务器的压力，不利于用户体验，前端路由是目前流行的路由方式。前端路由

前言vue的应用状态管理提供了mapState、mapGetters、mapMutations、mapActions四个辅助函数，所谓的辅助函数分别对State、Getters、Mutations、Actions在完成状态的使用进行简化。mapState当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性。不使用mapState时，获取对象状态，通常放在使用组件的computes属性中，使用方式为：

前言随着WEB单页面（SPA）技术的兴起，越来越多的后端工作转移到了前端，不同组件之间数据共享成为亟需解决的问题。一个组件改变了数据值，其他使用到该数据的组件应该做出积极的响应与变化，这是同步问题就变得非常的麻烦。应用状态管理就是为完成数据同步问题的解决方案。管理应用程序的状态有多种不同的方法，在大中型单页面应用项目中，Vue引入了Vuex完成对多个组件之间需要共享数据或状态，完成集中式数据和状态管理, 使得一处修改，多处使用。VUEX的安装Vuex是一个专为Vue.js应用程序开发的状态管理插件，该

前言vue父子组件之间通过props很容易的将父组件的值传递给子组件，如果一个组件嵌套很多层，每一层之间度需要同props进行传值，很麻烦，且不易维护。vue通过provide & inject两个关键字完成父组件向子孙组件直接传值，很像子类能够使用父类的属性一样方便。provide & inject一般用于多层之间的传值，两层之间还是使用props进行。示例【示例】A组件中使用了B组件，B组件中使用了C组件，C组件需要使用A组件的数据text及使用A组件的方法getmethod。A组

组件通讯组件之间的耦合是通过组件之间通过传递消息、相互配合才能完成对应的功能完成的。通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的，保证了每个组件的代码可以在相对隔离的环境中书写和理解，也提高了其可维护性和复用性。组件之间的通讯包括父子组件之间通讯及组件与组件之间的通讯。父子组件之间通讯父子组件通讯：如果组件 A 在它的模板中使用了组件 B，则称A是B的父组件，B是A的子组件。父子组件通讯包括父组件给子组件传递消息及子组件则可能要将它内部发生的事情告知父组件两方面的通讯。父组件给子组件传

前言插槽是组件式开发最常用的技术。所谓的插槽（slot）是组件中的一块HTML模板，这块模板显示不显示以及怎样显示由父组件来决定，但槽显示的位置确由子组件自身决定。slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。如：开发一个人员简历显示组件，显示的方式由子组件来决定，显示内容是由调用此组件的父组件决定。插槽分为匿名插槽、具名插槽和作用插槽三类匿名插槽匿名插槽就是不用设置name属性的插槽，父组件使用时无需指定名称即可获取指定的位置。如果子组件只有一个插槽，无需指定子组件插槽

前言在vue组件开发（一）中介绍了父子组件之间的通讯，除父子组件之间通讯外，还有兄弟组件之间的通讯，所谓的兄弟组件是指在同一组件中同时使用A和B两个兄弟组件，点击子组件A需要另一子组件B响应，则组件A和组件B为兄弟组件。兄弟组件之间的通讯也是vue组件开发中常见的通讯方式之一。为了解决兄弟组件之间的耦合，一般采用公共耦合方式，即通过第三方的方式进行间接耦合，如下图所示此种通讯方式类似设计模式中的中介者模式，eventBus、vuex类似中介者，各个组件彼此并不直接耦合，确保每个组件的独立性和复用性。V

前言组件化是WEB前端开发中的一个非常重要概念，体现面向对象编程主要特征之一——封装性，组件化开发的目的和意图是提高了软件的可维护性，实现前端代码复用性。组件是扩展 HTML 元素，其使用方式和HTML5提供的组件使用方式一致，它补充HTML5语义化标签的不足，是封装可重用的代码的自定义元素。前端组件就是一个封装了样式、动画、js逻辑、HTML结构的综合块，样式、动画、js逻辑、HTML封装在组件内部，与调用方完全脱耦，调用方仅通过前端组件提供的接口进行交互。组件化开发就是把页面拆分成多个组件，页面相当

前言所谓的协议就是指通信双方对数据传送控制的一种约定，HTTP（超文本传输协议）是浏览器和web服务器之间互相通信的规则和约定。该协议是基于请求与响应模式的、无状态的、应用层的协议。HTTP协议具有以下特点HTTP协议是应用层的协议，是一种无状态协议HTTP协议是基于TCP/IP协议之上的应用层协议，也可以承载于TLS或SSL协议层之上，就成为了HTTPS。HTTP默认的端口号为80，HTTPS的端口号为443HTTP协议由请求和响应构成，是一个标准的客户端服务器模型...

前言目前前端开发一般遵循MVVM设计模式的组件式开发，除了明确各层之间的职责外，还需规划其各类文件的存放目录。目录设计合理将大幅提升代码的可维护性和可读性。以下根据VUE最佳实践，在脚手架生成目录的基础上进行调整，项目结构如下图所示。在脚手架生成目录，开发主要目录是在src下，现对src下的目录进行规划和设计，主要的目录结构介绍如下Assets用于放置静态资源，包括公共的 CSS 文件、 js 文件、iconfont 字体文件、公共图片（images），公共CSS样式（styles）及其他静态资源

ajax的出现，使得前后端分离；后端只提供API接口，前端通过ajax获取数据。单页面富应用：SPA整个网站只有一个html文件，前端分配路由（不同url地址），向后端获取数据；

在程序设计时将类划分为边界类、操作类、实体类，明确地给出每种类的职责。概念一般指完成人机交互界面类组成；当前边界类的开发主要由各种界面控件、人机交互自定义组件组成，包含了样式、属性和操作等，如视频播放组件、计数器组件均为边界类，隐藏了实现细节，用户简单的通过暴露出的接口或属性即可复用，大大提高了前端开发的开发效率。自定义组件代码使用VUE开发一个租售信息列表自定义组件<template> <div class="today-body"> <div