Archives
Linux
Mysql
MongoB
MQ
FastDFS
Redis
ES
Docker
K8s
架构师
开源项目
工具
生活
说说
友链
弹吉他的兔子

飞天班第15节：大前端进阶VUE之路2

2020/03/29

1、前端体系

前端三要素

  • HTML（结构）：超文本标记语言(Hyper Text Markup Language)，决定网页的结构和内容。

  • CSS（表现）：层叠样式表（Cascading Style Sheet）,设定网页的表现样式。

  • Javascript（行为）：是一种弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，

    用于控制网页的行为。

表现层CSS->CSS预处理器

css是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用。主要缺陷：

  • 无法嵌套书写，导致前端模块化开发中需要书写很多重复的选择器；

  • 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，增加维护样式的工作量。

为了解决这些问题，提高样式上的开发效率，前端开发人员会选择使用CSS预处理器，它的基本思想是，为CSS增加编程特性，可以进行Web页面样式设计，再通过编译器转为正常的CSS文件，以供项目使用。也就是加了一层。

常用的CSS预处理器：

  • SASS：基于Ruby，通过服务端处理，解析效率高，上手难度高，要学习Ruby语言

  • LESS：基于Nodejs，通过客户端处理，功能比SASS简单，解析效率低于SASS，容易上手，适合后端人员学习使用，实际开发中足够了。京东、淘宝每个节日都有皮肤，其实是后台已经编写了Less或SASS主题的，一键切换生效。官网地址：http://lesscss.cn/

行为层Javascript

Native 原生JS开发

按照ECMAScript标准开发，简称ES，所有浏览器都支持ES标准，发展历程：

  • ES3
  • ES4（内部，未发布）
  • ES5（全部浏览器都支持）
  • ES6 （常用，但不是全部浏览器都支持，需要webpack打包成为ES5支持）
  • ES7
  • ES8
  • ES9 （2020年草案阶段）

TypeScript微软的标准

javasript的一个超集，由微软开发的开源编程语言，本质上添加了可选的静态类型和基于类的面向对象的编程。

JavaScript框架

JQuery库

大家最熟知的Javascript库，包含大量的工具类，比如ajax，优点是简化了DOM操作，缺点是操作DOM太频繁，影响前端性能。在前端开发人员眼里使用它仅仅是为了兼容IE6，7，8；

Angular

Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发，对后端程序员友好，对前端程序员不友好；已经推出了Angular6

React

Facebook出品，一款高性能的JS前端框架。优点是提出了新概念【虚拟DOM】用于减少真实DOM操作，原来是在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习【JSX】语言

Vue

一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理新特性。优点是综合了Angular（模块化）和React（虚拟DOM）的优点

官网地址：https://cn.vuejs.org/

Axios

前端通信框架，因为vue的边界很明确，只关心视图层处理DOM，所以不具备通信能力，需要一个通信框架与服务器交互；也可以使用JQuery的Ajax通信功能。

JavaScript构建工具

  • Babel：JS编译工具，主要用于浏览器不支持ES新特性，如将es6降为es5语法，也可以用于编译TypeScript。
  • WebPack：模块打包工具，主要作用是打包、压缩、合并、按序加载。

UI框架

常用

  • Ant-Design: 阿里巴巴出品，基于React的UI框架

    官网地址：https://ant.design/docs/spec/introduce-cn

  • ElementUI、iview、ice，vue-element-admin，基于Vue的UI框架

  • Bootstrap：Twitter推出的一个用于前端开发的开源工具包

  • AmazeUI：又叫“妹子UI”,一款HTML5跨屏前端框架

  • Layui：轻量级UI框架，它的组件Layer 弹出层十分好用

iView

iview是一个强大的基于vue的UI组件库，基础组件比elementui更丰富，主要服务于PC界面的中后台产品，使用单文件的vue组件化开发模式，基于npm+webpack+babel开发，支持ES2015(ES6)高质量、功能丰富友好的API，自由灵活的使用空间。

属于前端主流框架，选型时可考虑使用，主要特点是移动端支持较多

ElementUI

ElementUI是饿了么前端开源维护的vue的UI组件库，组件齐全，基本涵盖了后台所需的所有组件，文档讲解详细，例子也很丰富，主要用于开发PC端的页面。

属于前端主流框架，选型时可考虑使用，主要特点是桌面端支持较多

ICE

飞冰是阿里巴巴基于React/Angular/Vue的中后台应用解决方案，包含了一条从设计端到开发端的完整链路，帮助用户快速搭建属于自己的中后台应用。

VantUI

VantUI是有赞前端团队基于有赞统一的规范实现的vue组件库，提供了一整套UI基础组件和业务组件，通过vantUI，可以快速搭建出风格统一的页面，提升开发效率。

感觉这UI框架挺好的，文档详细，易上手，移动端支持友好。推荐

AtUI

at-ui 是一款基于Vue2.x的前端UI组件库，主要用于快速开发PC网站产品，它提供了一套npm+webpack+babel前端开发工作流程，CSS样式独立。

CubeUI

cube-ui是滴滴团队开发的基于vue的精致移动端组件库，支持按需引入和后编译，轻量灵活，扩展性强，可以方便的基于现有组件实现二次开发

Flutter

Flutter是谷歌的移动端UI框架，可在极短的时间内构建Andriod和ios上高质量的原生级应用。

Flutter可与现有代码一起工作，它被世界各地的开发者和组织使用。

主要特点是快速构建原生APP应用程序，如做混合应用程序，该框架为必选框架

Ionic

ionic 是一个css框架也是一个javascript框架，是目前最有潜力的一款HTML5手机应用开发框架，通过SASS构建应用程序，提供了很多UI组件来帮助开发者开发强大的应用，提供了数据的双向绑定，使用它成为web和移动开发者的共同选择。

mpvue

mp:mini program的缩写

mpvue: vue.js in mini program

mpvue是美团开发的一个使用了vue开发小程序的前端框架，目前支持微信小程序、百度小程序、头条小程序和支付宝小程序。基于vue修改了运行时框架runtime和代码编译器compiler的实现，使其可以运行在小程序环境中，为小程序开发引入了vue开发体验。

完备的vue开发体验，并且支持多平台的小程序开发，推荐使用

WeUI

weui是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序专门设计的，令用户的使用感知更加统一，包含button、cell、dialog、toast、article、icon等元素

2、前后分离的演变史

Web 1.0 后端为主的MVC时代

以后端为出发点，如Struts、SpringMVC等框架的使用，就是后端的mvc时代。

以springmvc流程为例：

  1. 发起请求到前端控制器DispatcherServlet
  2. 前端控制器请求HandlerMapping查找Handler，可以根据xml配置和注解进行查找
  3. HandlerMapping向前端控制器返回Handler
  4. 前端控制器调用处理器适配器HandlerAdpater执行Handler
  5. 处理器适配器去执行Handler
  6. Handler执行完成返回ModelAndView给处理器适配器
  7. 处理器适配器返回ModelAndView给前端控制器，ModelAndView是SpringMVC框架的一个底层对象，包括Model和View
  8. 前端控制器调用视图解析器去解析视图，根据逻辑图名称解析成真正的视图（JSP）
  9. 视图解析器返回视图
  10. 前端控制器进行视图渲染，视图渲染将模型数据（在ModelAndView中）填充到request域
  11. 前端控制器向用户返回请求结果

优点：MVC是一个非常好的协作模式，能够有效降低代码耦合度，可以使用Thymeleaf、Freemarker等模版引擎，使模版里无法写入java代码，让前后端分工更加清晰，但还是一个单体应用

缺点：前端开发重度依赖开发环境，前后端来回沟通调整成本比较大。

2005年以前，包括早期的JSP、PHP都可以称之为Web1.0时代。

Web 2.0 基于AJAX的SPA时代

SPA(Single Page Appliation)单页面应用时代，2005年，AJAX（Asynchronous Javascript And XML ）被正式提出，并开始使用CDN作为静态资源。

优点：这种模式下，前后端的分工进一步清晰，关键协作点是AJAX接口，但与JSP时代区别不大，复杂度

从服务端的JSP移到了浏览器的JavaScript,浏览器端变的很复杂，类似SpringMVC,这个时代开始出现浏览器端的分层架构，如下图：

缺点：

  • 前后端接口的约定：如果后端的接口不稳定，业务模型不稳定，前端开发会很痛苦；不少团队尝试通过接口规则、接口平台的方式来做，前后端一起沉淀接口规则，根据规则模拟数据，按照约定接口实现高效的并行开发。
  • 前端开发的复杂度控制：SPA应用大多以功能交互型为主，Javascript代码过十万行很正常，大量js代码的组织与view层的绑定，都不是容易的事情。

Web 3.0前端为主的MV*时代

此处的MV模式有：

  • MVC(同步通信为主)：Model、View、Controller（不是服务端的controller）
  • MVP(异步通信为主)：Model、View、Presenter
  • MVVM（异步通信为主）：Model、View、ViewModel

为了降低前端开发复杂度，涌现了大量的前端框架：AngularJS、React、Vue.js等，这些框架总的原则是按类型分层，如Templates、Controllers、Models，如下图：

Web 4.0 NodeJs的全栈时代

前端为主的MV模式解决了很多很多问题，依旧存在不足，随着Nodejs的兴起，Javascript开始有能力运行在服务端，这意味着一种新的开发模式：

在这种开发模式下，前后端的职责很清晰。

  • Front-End UI 层 处理浏览器层的展现逻辑。通过css渲染样式，通过javascript交互，html的生成也可以放在这层，具体看应用场景。
  • Back-End UI 层处理路由、模板、数据获取、cookie等，通过路由，前端可以自主把控URL design，这样无论是单页面或是多页面应用，前端都可以自由把控，后端也终于可以摆脱对展现的关注，专心于业务逻辑层的开发。

3、MVVM模式

mvvm的核心是ViewModel层，负责转换Model层的数据对象，让数据变得更容易管理和使用：

  • VM层向上和View层进行双向数据绑定
  • 向下和Model层通过接口进行数据交互。

流行的MVVM框架有Vue.js、AngularJS。

4、Vue基本指令

常用指令

更多指令学习，参考官方文档 https://cn.vuejs.org/v2/guide/events.html

创建一个vue对象

var vue = new Vue({
   el:"#app",
   data:{ 
      key:value
   },
   created(){
     
   },
   mounted(){ 
	
   },
   methods:{
      key:value
   }
})
  1. v-on:事件类型=”事件名” , 事件名定义在methods中，方法参数可加可不加。
<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
  
  <script>
    var example2 = new Vue({
    el: '#example-2',
    data: {
      name: 'Vue.js'
    },
    // 在 `methods` 对象中定义方法
    methods: {
      greet: function (event) {
        // `this` 在方法里指向当前 Vue 实例
        alert('Hello ' + this.name + '!')
        // `event` 是原生 DOM 事件
        if (event) {
          alert(event.target.tagName)
        }
      }
    }
  })
  
  // 也可以用 JavaScript 直接调用方法
  example2.greet() // => 'Hello Vue.js!'
  </script>
  
简写方式：@事件类型="事件名"
事件修饰符：button/submit/a ，一般就加 v-on:click.prevent = "事件名" 去除去本身默认行为。
按键修饰符：v-on:keydown.enter/13="事件名" --- methods

  1. v-model :控制指令，专门用于获取form元素控件的内容。

  2. v-bind :属性指令，属性值如何从data中获取，也可以用来控制class和style，具体语法例子到官网学习

     <el-upload 
      list-type="picture-card"
      v-bind:class="{hide:hideUpload}"
 </el-upload>   
   
<style>
  .hide .el-upload--picture-card {
    display: none;
  }
</style>
   
<script>
	export default {
    data() {
      return {
         hideUpload: false
      }
    }
  }
</script>

    v-bind:属性=“data数据key”,简写:属性=“data数据key”

  3. v-text/v-html: 文本指令,如果内容有标签，必须用v-html指令

  4. v-for：循环指令, 用于循环数组比如： 
     <tr v-for="(user,index) in users">
     ...
 <td><span v-text="user.address"></span></td>
 </tr>

  5. v-if /v-else-if/v-else:条件指令

  6. v-show: 控制元素的隐藏和显示。

  7. 如果不明白对象是里有生命尽量用:console.log(this) 去打印 vuejs精髓：想尽一切办法改变数据 所有的指令除了事件指令，都和data有关

  8. 父子组件通信
  • props静态传递数据，动态传递数据
  • 子组件调用父组件的数据和行为：$parent this.$parent.父组件的数据和行为（方法）
  • 父组件调用子组件的数据和行为：$refs/ref（对象）、$children(数组)

比如：this.$refs.ebtn1.子组件的数据和行为（方法）

computed属性

在vue中，computed的属性可以被视为是data一样，可以读取和设值。因此，在computed中可以分为getter(读取)和setter(设值)，一般情况下，是没有setter的，computed只是预设了getter，也就是只能读取，不可以改变设值

<div>
  message: 
</div>

<!-- 计算属性 -->
<div>
  计算属性： 
</div>

computed: {
    updateMessage(): {
            console.log('计算属性', this.message)
            return this.message
    }
}

等价于

computed: {
    updateMessage: {
      get: function() {
        console.log('计算属性', this.message)
        return this.message
      }
    }
  }

注意当模板中不使用计算属性时，即使依赖属性发生改变，也不会触发计算属性的get函数的.所以例子中updateMessage不在模板使用，即使message发生改变是不会触发updateMessage的更新

set函数

当赋值给计算属性的时候，将调用setter函数

computed: {
    updateMessage: {
      get: function() {
        console.log('计算属性', this.message)
        return this.message
      },
      set: function(newVal) {
        this.message = newVal
        console.log('newVal', newVal)
      }
    }
  },
 mounted () {
    this.updateMessage = '222'
 },

只有当计算属性中的属性被直接赋值的时候，才会走setter函数，而且，setter函数和getter函数是相互独立的，不是说，走setter函数，就必须走getter函数。上面的案例中，如果updateMessage在模版有调用则打印结果是

计算属性： 11，	// message的初始值
newVal: 222,
计算属性： 222

因为，直接赋值给updateMessage触发走set函数， 在set中更改message(依赖属性)，触发走get函数，但是如果updateMessage没有在模版中使用，get函数是不会触发的

绑定新属性生效

vue 在input光标位置添加表情

<template
<div>
<el-input id="emojiInput" v-model.trim="model.introduction" type="textarea" placeholder="介绍一下这个话题... ..."></el-input>
  <span style="cursor: pointer" @click="showEmojisFlag=1">
  <el-tag :type="showEmojiFlag === 0 ? 'success' : 'danger'" size="medium">?</el-tag>
</span><br/>
// vue中一个表情控件
<VEmojiPicker	v-if="showEmojiFlag === 1"
   :pack="pack"
   labelSearch="Pesquisar..."
   @select="selectEmoji"  // 选中事件
   :continuousList="true"
 />
</div>
</template>
<script>
	export default{
    data(){
      return{
        showEmojiFlag: 0
      }
    },
    methods:{
      selectEmoji(emoji) {
        var elInput = document.getElementById('emojiInput'); //根据id选择器选中对象
        var startPos = elInput.selectionStart;// input 第0个字符到选中的字符
        var endPos = elInput.selectionEnd;// 选中的字符到最后的字符
        if (startPos === undefined || endPos === undefined) return
        var txt = elInput.value;
        // 将表情添加到选中的光标位置
        var result = txt.substring(0, startPos) + emoji.emoji + txt.substring(endPos)
        elInput.value = result;// 赋值给input的value
        // 重新定义光标位置
        elInput.focus();
        elInput.selectionStart = startPos + emoji.emoji.length;
        elInput.selectionEnd = startPos + emoji.emoji.length;
        this.model.introduction = result// 赋值给表单中的的字段
      }
    }
  }
</script>

效果：

原文链接：https://blog.csdn.net/quKbin/article/details/90747879

生命周期与钩子函数

5、Axios通信

axios是与服务端交互的通信框架，类似于JQuery的ajax。agios支持node端和浏览器端看，支持Promise回调。官方文档地址：http://www.axios-js.com/zh-cn/docs/

可以结合mock.js模拟数据完成前端数据页面的操作，与后端分离。

6、定义组件

例子：

<body>
<div id="app">
    <h1></h1>

    <el-button  v-bind:user="user">保存</el-button>
    <el-button :user="user">保存</el-button>
</div>
<script src="js/vue.min.js"></script>
<script>
    // 定义组件模板和数据
    var counterComponent = {
        //props:["title","user"],
        props:{
            title: {
                type: String,
                required: true
                default: "ok" //你这个属性在组件上不定义就默认值
            },
            user:Object,
            propD: {
                type: Number,
                default: 100
            },
        },
        //模板
        template:"<button>===<slot></slot></button>",
        // 数据
        data(){
            return {

            }
        },
        mounted(){
            alert(this.user.name)
        },
        methods:{

        }
    };

    // 注册组件 antd element-ui
    Vue.component("el-button",counterComponent);

    var vue = new Vue({
        el:"#app",
        data:{
            title:"",
            user:{id:1,name:"zhangsan"}
        }
    })
</script>
</body>

在vue项目里，组件通常就是一个.vue页面，如下图

7、Vue路由

官方文档：https://cn.vuejs.org/v2/guide/routing.html

路由相当于a链接，点击跳转到对应的组件页面，切换视图。

简单路由例子：

<!-- 在Html页面中的固定模板！-->
<div id="app">
    <!-- 页面 路由就是a链接-->
    <p>
        <router-link to="/">首页</router-link>
        <router-link to="/student">学员</router-link>
        <router-link to="/teacher">老师</router-link>
    </p>

    <!-- 页面的视图是如何渲染的呢 -->
    <router-view></router-view>
</div>

<script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js"></script>
<script>
    // 1、 定义路由组件
    const Welcome = {template:'<div>欢迎</div>'}
    const Student = {template:'<div>Student</div>'}
    const Teacher = {template:'<div>Teacher</div>'}

    // 2、定义路由（核心）
    const routes = [
        // 请求这个路由，会跳转到对应的视图当中！
        {path: '/',redirect: '/welcome'}, // 重定向到请求
        {path: '/welcome',component: Welcome}, // 组件直接对应上面定义的组件即可！
        {path: '/student',component: Student},
        {path: '/teacher',component: Teacher}
    ];

    // 3、创建 router 实例
    const router = new VueRouter({
        // routes: routes (缩写如果，同名的话)
        routes
    });
    var vm = new Vue({
        el: '#app',
        router
    })
</script>
</body>

8、vue-cli 与vue-press

全局安装vue-cli

npm install -g vue-cli

vue-press中文网

VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。vue的官方文档就是用vue-press写的，可以用来搭建自己的个人博客：手把手教你使用VuePress搭建个人博客

起步

# 全局安装
npm install -g vuepress

# 创建一个 markdown 文件
echo '# Hello VuePress' > README.md

# 开始编写文档
vuepress dev

# 构建
vuepress build

Post Directory