84.【Vue--初刷】（一）

(一)、vue.js简介

1.简介

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。（Vue的核心库只关注视图层，方便与第三方库既有项目整合）

Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建， 是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。

(1).MVVM模式的实现

• Model :模型层，在这里表示JavaScript对象
• View: 视图层，在这里表示Dom(HTML操作的元素)
• ViewModel: 连接试图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
  在MVVM框架中，是不允许数据和视图直接通信的，只能通过VierModel来通信，而ViewModel就是定义了一个Observer观察者。
• ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
• ViewModel 能够监听到视图的变化，并能够通知数据发生改变
  至此，我们就明白了，Vue.js就是MVVM的实现者，它的核心就是Dom监听和数据绑定

(2).为什么要使用Vue.js

• 轻量级，体积小是重要指标
• 移动有限，更适合移动端
• 易上手，学习曲线平稳，文档齐全
• 吸取了模块化和虚拟DOM的长处
• 开源，社区活跃度高。

(3).为什么要使用MVVC

MVVC模式和MVC模式一样，主要目的是分离试图(View)和模型(Model)

• 低耦合: 视图层独立于Model层
• 可复用：视图逻辑可以放到ViewNodel中，产生数据的变化
• 独立开发:设计人员可以更加专注开发
• 可测试:可以使用ModelView进行测试

2.应用场景

• 只运用于 Html(结构层) CSS(表现层) CSS(预处理器Less) JavaScript(行为层) 给用户看，刷新后台的数据
• 不用于网络通信 axios
  https://www.axios-http.cn/
• 不用于页面跳转 vue-router
• 不用于状态管理: vuex
• 不用于Vue-UI :ICE.work(飞冰)
  飞冰官网

3.JavaScipt框架

(1).JQuery :

JQuery中文文档

大家熟悉的JavaScript框架，优点是简化了Dom操作，缺点是Dom操作太频繁，影响前端性能，在前端眼里使用它仅仅为了兼容IE6、IE7、IE8

(2).Angular

Google收购的前端框架，有一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TyperScript语法开发；对后台程序友好，对前端程序员不太友好;最大的全电视版本迭代不合理(如: 一代-》二代 除了名字，其他都不同)

(3).React

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

(4).Vue

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

(5).Axios

前端通信框架 : 因为Vue的边界很明显，就是为了处理Dom,所以并不具备通信的能力，此时就需要额外使用一个通信框架与服务器交互，当然也可以直接选择JQuery提供的AJAX通信功能。

4.UI框架【可视化】

• Ant-Design :阿里巴巴出品，基于React的UI框架
  Ant-Design官网
• ElementUI、iview、ice: 饿了吗出品，基于VUE的UI框架
  iview官网
• Bootstrap :Twitter推出的前端开源工具包
• AmazeUI: 又叫 妹子UI，一跨HTML5跨前端框架
  AmazeUI官网

5.JavaScript 构建工具

• Babel: JS编译工具，主要用于浏览器不支持得的ES新特性，比如编译TypeScript
• WebPack:模块大宝漆，主要用于打包、压缩、合并及按需加载

6.三端开发

(1).混合开发(Hybrid App)

主要目的是实现一套代码三端统一(PC、Androif: .apk、iOS: .ipa)并能够调用到设备底层硬件(如: 传感器、GPS、摄像头)，打包方式主要有以下两种

• 云打包 : HBuild–>HBuilDx,DClound出品: API Clound
• 本地打包 : Cordova（前身是: PhoneGap）

(2).微信小程序

详细见微信官方，我们这里介绍一个方便微信小程序UI开发的框架: WeUI

https://weui.io/

7.后端技术

前端人员为了方便开发也需要掌握一定的后端技术，但我们Java后台人员知道后台知识体系及其庞大复杂，所以为了方便前端人员开发后台应用，就出现了NodeJS这样的技术。

NodeJS的作者已经生成放弃NodeJS(说是架构做的不好再加上笨重的node_modules,)，开始开发全新架构Deno

既然是后端技术，那么我们肯定也需要框架和项目管理工具，NodeJS框架及项目管理攻击如下:

• Express : NodeJs框架
• Koa: Express简化版
• NPM: 项目综合管理工具，类似于Maven
• YARN:NPM的替代方案，蕾仕于Maven和Gradle的关系

8.前端主流技术

(1).Vue.Js

• Vue.js官网

(2).iView

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

• 官网

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

(3).ElementUI

Elment 是饿了么前端开源维护的Vue UI组件库，组件齐全，基本还改后台所需的所有组件，文档讲解详细，列子也很丰富。主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。

• 官网
• vue-element-admin
  备注:属于前端主流框架，选型时可考虑使用，主要特点时移动端支持较多

(4).ICE

飞冰是阿里巴巴团队基于React/Angular/Vue的中后台解决方案，在阿里巴巴内部，已经有270多个来自几乎所有的BU项目在使用，飞冰包含了一条从设计端到开发段的完整链路，帮助用户快速搭建自己的中后台应用。

• 飞冰官网
• Angular官网
  备注: 主要主键还是以React为主，目前处于观望阶段

(5).VantUI

Vant UI 是由前端团队统一规范实现的Vue组件库，提供了一整套UI基础组件和业务组件。通过Vant,可以快速搭建处风格统一的页面，提升开发效率

• VantUI官网

9.Vue优缺点

• 9.优点
  
• 前后端职责很清晰: 前端工作在浏览器端，后端工作在服务端。清晰的分工，可以让开发并行，测试数据的模拟不难，其阿奴但可以本地开发。后端则可以更专注于业务逻辑的处理，输出RESTful等接口
  
• 前端的复杂度可控:前端代码很重，但合理的分层，让前端代码能够各施其职。这一块蛮有意思的，简单如模板特性的选择，就有很多很多研究。并非越强大越好，限制什么，留下哪些自由，代码应该如何组织，所有一切设计，得花一本书得厚度去说明。
  
• 部署相对独立:可以快速改进产品体验。
  
• 10.缺点
  
• 代码不能重用，比如后端依然需要后端进行数据做各种校验，校验逻辑无法复用浏览器端得代码。如果可以复用，那么后端得数据加盐可以相对简单化。
  
• 全异步，对SEO不利。往往还需要服务端做同步渲染得降级方案
  
• 性能并非最佳，特别是移动互联网环境下。
  
• SPA 不满足所有需求，依旧存在大量多页面应用。URL Design需要后端配合，前端无法完全掌控。
  

10.NodeJs带来得全栈时代

Node.js官网

备注:在这里实现了前后端得彻底分离。

(二)、第一个Vue程序

1.准备工作

(1).下载插件Vue.js

【说明】 IDEA可以安装Vue的插件!

注意:Vue不支持IE8以及以下版本，因为Vue使用了IE8无法模拟ECMAScript 5特性，但他支持兼容ECMAScript5的浏览器

(2).下载地址

CDN
<script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

(3).CDN导入项目中

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

2.创建vue项目

3.设置Model层

数据就是Model层,我们首先通过el进行与块进行绑定(绑定的方式是id),data表示数据。

<script>
    var vm=new Vue({
        // 绑定div块
        el:"#app",
// Model层
        data:{
            message:"hello vue!"
        }
    });
</script>

4.设置View层

获取model层的数据，并输出{{}}

<!-- view层 -->
<div id="app">
    {{message}}
</div>

5.设置ViewModel层

会实现双向的输出，源码进行输出，以及控制进行实时输出

6.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    第一步导入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!-- view层 -->
<div id="app">
    {{message}}
</div>
<script>
    var vm=new Vue({
        // 绑定div块
        el:"#app",
// Model层
        data:{
            message:"hello vue!"
        }
    });
</script>
</body>
</html>

(三)、基础语法(判断循环)

1. v-bind

我们看到的v-bind等被称为指令，指令带有前缀 v-,为了标示它们是Vue提供的特殊特性。他们会渲染的DOM上应用特殊的响应行为。这个指令的意思是:将这个元素节点的title特性和Vue实列的message属性保持一致。

`v-bind:=“绑定的值”

<div id="app">
<span v-bind:title="message">
        鼠标悬停几秒查看信息
    </span>
</div>

2.v-if v-else v-else-if

v-if="判断条件"，v-else 紧跟最近的一个v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    第一步导入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!-- view层 -->
<div id="app">
    <h1 v-if="t==='A'">A</h1>
    <h1 v-else-if="t==='B'">B</h1>
    <h1 v-else>C</h1>
</div>
<script>
    var vm=new Vue({
        // 绑定div块
        el:"#app",
        data:{
            t:name
        }
    });
</script>
</body>
</html>

3.v-for

遍历循环: 自定义变量名 in 数组名;在这里我们实现的是数组里面的元素是对象。对象花括号，数组中括号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    第一步导入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!-- view层 -->
<div id="app">
<li v-for="arrays in array">
    {{arrays.message}}
</li>
</div>
<script>
    var vm=new Vue({
        // 绑定div块
        el:"#app",
// Model层
        data : {
            //  数组里面的元素是对象
            array:[
                {message:'吉士先生'},
                {message:'吉士先生1'},
                {message:'吉士先生2'},
            ]
        }
    });
</script>
</body>
</html>

(四)、Vue绑定事件

1.v-on

如果想要调用Vue的方法,那么我们应该把方法定义在Vue的Methods的对象中。如果定义在外面就无法生效，假如我们对Vue的方法绑定我们需要使用 V-on: ,不能使用JavaScript的东西。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    第一步导入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="ss">
    <button type="button" v-on:click="hello">click me</button>
</div>
<script>
    let vm = new Vue({
        // 绑定属性
        el:"#ss",
        // 数据属性
        data:{
            message:"你好 川川!"
        },
        // 方法必须定义在Vue 的Method对象中
        methods:{
            hello: function (){
                alert(this.message);
            }
        }
    });
</script>
</body>
</html>

2.Vue七大属性

1、el属性

用来指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符。

2、data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

3、template属性

用来设置模板。会替换页面元素，包括占位符。

4、methods属性

放置页面中的业务逻辑,js方法一般都放置在methods中

5、render属性

创建真正的Virtual Dom

6、computed属性

用来计算

7、watch属性

watch:function(new,old){}

监听data中数据的变化

两个参数。一个返回新值，一个返回旧值