前端框架vue基础

typora-copy-images-to: E:\md文件\图片

前端三要素

HTML（结构）：超文本标记语言（Hyper Text Markup Language）决定网页的结构和内容
CSS（表现）：层叠样式表（Cascading Style Sheets ）设定网页表现样式
JavaScript（行为）：是一种弱类型脚本语言，启源代码不需要编译，而是由浏览器解析运行，用于控制行为

结构层（HTML）

表现层（CSS）

css层叠样式表是一门标记语言，并不是编程语言，因此不可以定义变量，可以引用，换句话说就是不具有任何语法支持，他主要缺陷如下：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多的重复选择器
没有变量和合理的样式重复机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护

导致无端添加了许多工作量，解决问题，前端开发人员会使用一中称为**【CSS预处理器】**的工具，提供缺失的样式层复用机制，减少冗余代码，提高代码的可维护性，提高开发效率

什么是CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者只要使用这种语言，进行css编码工作，用一种专门的编程语言，进行Web页面样式设计，在通过编译器转化为正常的CSS文件，以供项目使用

常见的CSS预处理器：

SASS：基于Ruby，通过服务器端处理，功能强大，解析效率高，需要学习Ruby语言，上手难度高于LESS
LESS：基于NodeJS，通过客户端处理，使用点单，功能SASS简单，解析效率低于SASS，实际开发中足够用，后端人员建议学习LESS

行为层（JavaScript）

javaScript 一门弱类型的脚本语言，启源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器有浏览器解析运行

Notive 原生JS开发

原生JS开发，也就是按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持

ES3
ES4(内部，未正式发布)
ES5（全浏览器都支持）
ES6（常用，主流版本：webpack打包成为ES5支持！）
ES7
ES8
ES9（草案阶段）

JavaScript 框架

jQuery：简化了DOM操作，缺点：Dom操作太频繁，影响前端性能，在前段眼里使用它仅仅为了兼容IE6、7、8
Angular：Google收购的前端框架，有一群java程序员开发，特点是将后台的MVC模式搬到了前端并增加了模块化开发概念，与微软合作，采用TypeScript语法开发，对后台程序员友好，对前端程序眼不友好
React：FaceBook出品，一款高性能的JS前端框架，特点提出了心的概念，**【虚拟DOM】用于减少真是的DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率，缺点是使用复杂，需要而外学习一门【JSX】**语言
Vue和Axios

UI框架：

Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI i：iview、ice：饿了么出品，基于Vue的UI框架
Bootstrap：Twitter推出的一个用于前端开发的开源工具包
AmezeUI：“妹子UI”，一款HTML5跨屏前端框架

JavaScript 构建工具

Babel：JS编译工具，主要用于浏览器不支持ES新特性
WebPack：模块打包器，主要作用是打包、压缩、合并以及按序加载

三端统一

混合开发

主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）能够调用设备底层赢件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：

云打包：Hbuild ——>HBuildX,DCloud吹牛；API Cloud
本地打包：Cordova（前身是 PhoneGap）

微信小程序

UI开发的框架：WeUI

后端技术

前端发展史

后端为主的MVC时代

为了降低开发复杂度，以后端为出发点，比如：Struts、SpringMVC等框架的使用，就是后端的MVC时代

发起请求到前端控制器（DispatcherServlet）
前端控制器请求HandlerMapping查找Hander，可以根据xml配置、注解进行查找
处理器映射器HnandlerMapping向前端控制器返回Handler
前端控制器调用处理器适配器去执行Handler
Handler执行完成给适配器返回ModelAndView
处理器适配器向前端控制器返回ModelAndView，ModelAndView是SpringMVC框架的一个底层对象，包括Model和View
前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图JSP
视图解析器向前端控制器返回View
前端控制器进行视图渲染，视图渲染将模型数据（在ModelAndView对象中）填充到request域
前端控制器向用户响应结果

优点：

缺点：

基于AJAX带来的SPA时代

优点：

缺点：

前端为主的MV* 时代

此处MV*模式下：

MVC（同步通向为主）：Model、View、Controller
MVP（异步通信为主）：Model、View、Presenter
MVVM（异步通信位置）：Model、View、ViewModel

为了降低复杂度，涌现出大量的前端框架，比如：AngularJS（提现了前端的mvc模式）、React（虚拟DOM）、Vue.js（把前两者结合起来了）、EmberJS等，这些框架的原则是按类型分层，比如Templates、Controller、Models，然后再从内层做切分

优点：

缺点：

ModeJS带来的全栈时代

前端为主MV* 模式解决了很多问题，但是还存在不足的地方，随着NodeJS的兴起，JavaScript开始有能力运行服务端，意味着可以有一种新的开发模式：

这种研发模式下，前后端的职责很清晰，对前端来说，两个UI层各司其职：

Front-end UI layer处理浏览器蹭的展现逻辑，通过css渲染样式，通过JavaScript添加交互功能，HTML的生成也可以放在这层，具体看应用场景
Back-end UI layer 处理器路由、模板、数据获取、Cookie等通过路由，前端终于可以自主把控URL Design，这样无论是单页应用还是多页应用，前端都可以自由调控，后端终于可以摆脱展现的强关注，转而可以专心与业务逻辑层的开发

通过NodeJS，Web Server 层也是JavaScript代码，这意味着部分代码前后可以复用，需要SEO的场景可以再服务端同步渲染，由于一步请求太多导致的性能问题也可以通过服务端来缓解，前一种模式的不足，可以通过这种模式几乎能够完美解决

与JSP模式相比，全栈模式是一种会，也的却是一种原始开发模式回归，不过是一种螺旋上升式的回归

基于NodeJS的全栈模式，依旧勉励很多挑战：

Vue ：前端体系、前后端分离

是一套用于构建用户的渐进式框架，发布于2014.2与其他的大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的和辛苦只关注视图层，不紧易于上手，还便于第三方库（vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目整合

Vue.js的API是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js

开发商：优雨溪

Soc （Separation of concerns）原则关注点分离：

HTML + CSS +JS : 视图：给用户看,刷新后台的数据
网络通信：axios

什么是MVVM

MVVM （Model-View -ViewModel）是一种软件架构设计模式，有微软WPF（用于替代WinForm，以前就是这个技术开发桌面应用程序的）和Silverligth（类似与Java Applet，简单点就是浏览器上运行的WPF）的架构师Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式 由 John Gossman （同样也是WPF 和 Silverlight的架构师）于2005年在博客上发表

Data Bindings 数据绑定 ViewModel把这些数据绑定在Vue（DOM）里面，ViewModel通过解析Model更新到View页面上直接就是把Model里面定义的数据给他绑定到真实的DOM里面 ViewModel会监听View界面上的响应，然后回调到我们Model里面的定义的函数，然后就可以在这个Model的函数里面做更多的操作了

MVVM源自于经典MVC（Model-View-Contrller）模式，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下：

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

MVVM已经相当成熟，主要运用不仅仅在网络应用陈程序中开发中，当下流行的MVVM框架有Vue.js、Angular.js等

为什么使用MVVM

MVVM 的组成部分

View

Model

ViewModel

MVVM 模式的实现者

Model：模型层，在这里表示javaScript对象
View：视图层，在这里表示DOM（HTML的操作元素）
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM 中的ViewModel层实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，二ViewModel就是定义了一个Observer观察者

ViewModel能够观察导数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图变化，并能能够通知数据发生改变

至此，我们就明白了，Vue.js就是一个MVVM的实现着，他的核心就是实现Dom监听与数据绑定

为什么使用Vue.js

IDEA插件

Cdn引入Vue.js

第一种方式，下面引入的是2.5.16版本，开发环境的cdn版本(开发环境版本，包含了有帮助的命令行警告，这里可以查阅2.6.10版本：https://cdn.jsdelivr/npm/vue/dist/vue.js

下面引入生产环境的cdn版本(生产环境版本，优化了尺寸和速度，这里可以查阅2.6.10版本：https://cdn.jsdelivr/npm/vue

Vue基本语法

v-bind

v-bind等被称为指令，指令带有前缀v-，以表示它们是提供的特殊特性，他们会在渲染DOM上应用特殊的响应式行为，在这里表示：“将这个元素节点的title特性和Vue实例的message属性保持一致”

当你打开浏览器的JavaScript控制台，输入app.message=“新消息”，就会再一次看到这个绑定了title特性的HTML已经进行了更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒看看此处东热爱绑定的提示消息！
    </span>
    {{message}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello vue!"
        }
    });
</script>

</body>
</html>

v-if，v-else

什么是条件判断语句，以下两个属性

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <!--view层，  模板-->
    <div id="app">
        <h1 v-if="type==='A'">A</h1>
        <h1 v-else-if="type==='B'">B</h1>
        <h1 v-else-if="type==='D'">D</h1>
        <h1 v-else-if="type==='C'">C</h1>
        <h1 v-else>G</h1>

    </div>
    <script>
        var vm = new Vue({
           el:"#app",
            data:{
               type: 'A'
            }
        });
    </script>
</body>
</html>

v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <!--view层，  模板-->
    <div id="app">
        <li v-for="item in items">
            {{item.message}}
        </li>
    </div>
    <script>
        var vm = new Vue({
           el:"#app",
            data: {
               items: [
                   {message:'狂神说java'},
                   {message: '我学前端'},
                   {message: '我爱中华'}
               ]
            }
        });
    </script>
</body>
</html>

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <button v-on:click="sayHi">click Me</button>
</div>
<script>
    var vm = new Vue({
       el: "#app",
       data: {
           message: "狂神说Java"
       },
       methods:{//方法必须定义在Vue的methods对象中,v-on：事件
           sayHi:function () {
               alert(this.message);
           }
       }
    });
</script>
</body>
</html>

Vue:表单双绑、组件

什么是双向数据绑定：

Vue.js是一个MVVM框架，及数据双向绑定，即当数据发生变化的时候，视图也发生变化，真就是Vue.js的精髓之处

数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定，单项数据绑定是使用状态管理工具的前提，如果我们使用Vuex，那么数据也是单项的，这时就会和双向数据绑定有冲突

为什么要实现数据的双向绑定

在vue.js中，如果使用vuex，实际上数据还是单项的，之说以说是数据双向绑定这是用的UI控件来说，对于我们处理表单，vue.js的双向数据绑定用起来就特别的舒服，及两者不互斥，在全局型数据流使用单项，方便跟踪；局部型数据流使用双向，简单易操作

在表单中使用双向数据绑定

你可以使用v-model指令在表单<input> <textarea> 及 <select>元素上创建双向数据绑定，他会根据控件类型自动选取正确的方法来更新元素，尽管有些神奇，但v-model本质上不过时语法，负责监听用户的输入时间以及更新数据，并对一些极端场景进行一些特殊的处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
<body>
<div id="app">
  <!-- 输入文本：<input type="text" v-model="message">{{message}}-->
   <!-- 输入文本：<textarea  v-model="message" ></textarea>{{message}}-->
   <!-- 性别：
    <input type="radio" name="sex" value="男" v-model="shuxing">男
    <input type="radio" name="sex" value="女" v-model="shuxing">女
    <p>
        选中了谁：{{shuxing}}
    </p>-->
    下拉框：
    <select v-model="shuxing">
        <option disabled value="">---请选择---</option>
        <option>A</option>
        <option >C</option>
        <option>D</option>
    </select>
    <span>value:{{shuxing}}</span>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
        data: {
           /*message: "123",*/
            shuxing: ''
        }
    });
</script>
</body>
</html>

Vue组件

实际开发中，我们通常采用vue-cli创建，.vue模板文件的方式开发，

什么是组件：组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的 th：fragment等框架由衷的异曲同工之妙，通常一个应用会以一颗嵌套的组件树形式来组织：

假如，你可能有页头、侧边栏、内容区等组件，每个组件由包含其他的想导航栏连接、博文之类的组件

Vueponent()：注册组件
my-component-li: 自定义组件的名字
template：组件的模板

使用props属性传递参数

v-for="item in items" :遍历Vue实例中定义的名为items的组件，并创建同等数量的组件

v-bind：item="item" ：将遍历的item项绑定到组件中props定义的名为item属性上； =号左边的item为props定义的属性名，右边的的为item in items 中遍历的item项的值

Axios异步通信

什么是Axios：是一个开源的可以用在浏览端和NodeJS 的异步通信框架，他主要作用就是实现Axios异步通信，特点如下：

从浏览器中创建XMLHttpRequests
从Node.js创建http请求
支持Promise API【JS中链式编程】
拦截请求和相应
转换请求数据和相应数据
取消请求
自动转化JSON数据
客户端支持防御XSRF（跨站请求伪造）

为什么要使用Axios

由于Vue.js是一个视图框架并且作者（优雨溪）严格准守Soc（关注度隔离原则），所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过咋进入2.0版本以后停止了对插件的维护并推荐了Axious框架，少用jQuery，因为他的操作Dom太频繁了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <div>{{info.links}}</div>
</div>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#vue',
            data(){
                return{
                    info:{
                   //请求的返回参数合适，必须和json字符串一样
                        name: null,
                        address: {
                            street:null,
                            city: null,
                            country: null
                        },
                       links:[
                        {
                            name: null,
                            url: null
                        },
                        {
                            name: null,
                            url:null
                        },
                        {
                            name: null,
                            url: null
                        }
                    ]
                    }
                }
            },
            mounted(){
                //钩子函数 链式编程，es6新特性  get().then() 拿到数据并响应数据
                axios.get("../data.json").then(response=>(this.info=(response.data)));
            }
        });
    </script>
</body>
</html>

计算属性

为什么要计算属性

计算属性的重点突出在属性两个字上（属性属于名词），首先他是一个属性其次这个属性有计算的能力（计算是动词），这里的计算就是这个函数，简单点来说买个他就是一个能力够件计算结果缓存起来的属性（建新为转化成静态的属性），仅此而已，可以想象成缓存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--调方法必须通过括号去调用-->
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello kuangshen"
        },
        //methods 方法 所有的方法都写在里面
        methods: {
            currentTime1 :function () {
                return Date.now();//返回一个时间戳
            }
        },
        //区别 methods通过方法名来调用  computed通过属性来调用 是内存里面的
        computed: { //计算属性  methods ,computed 方法可以不能重名 重名之后只会调用methods方法
            currentTime2: function () {
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

methods 和computed区别：

methods：定义方法，调用方法使用currentTime1（），需要带括号
computed：定义属性，调用属性使用currentTime2，不需要括号；this.message是为了能够让currentTime2观察到变化
如何在方法中的值发生了变化，则缓存的刷新！可以在控制台使用，vm.currentTiem2改变下的数值，再测试观察结果

结论：

调用方法时，每次都要进行计算，既然有计算过程则必定产生系统开销，如果不经意变化，此时可以考虑缓存把这个结果存起来，采用计算属性computed可以很方便做到，计算属性的主要特性是为了将不经常发生变化的计算结果进行缓存，可以节约系统开销

插槽slot

在Vue中我们使用<slot> 元素作为承载分发内容的出口，作者称其为插槽可以应用在组合组件的场景中

自定义事件内容分发

Vue生命周期

生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染——>更新——>渲染、卸载等一系列过程，我们成这就是Vue的生命周期，通俗的说就是Vue实例从创建到销毁的过程，就是生命周期

在Vue的整个生命周期中，他提供了一系列的事件，可以让我们从事件触发时注册JS方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例

什么是 Vue-cli

Vue-cli官方提供了一个脚手架。用于快速生成一个Vue的项目模板；预先定义好的目录结构以及基础代码，就好比创建maven项目可以选择一个顾家目录，这个骨架目录就是脚手架，开发更加快速

主要功能：

同一目录结构
本地调试
热部署
单元测试
继承打包上线

什么是Webpack

本质上，webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）当webpack处理应用程序时，他会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每一个模块，然后将所有这些模块打包成一个或者多个bundle

Webpack是当下最热门的前端资源模块化管理和打包工具，他可以将许多松散偶尔的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分离，等到实际需要实在一部加载，通过Loader 转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、CSS、JSON、ConffeeScript、LESS等

伴随着移动互联网的大潮，当今越来越多的的网站已经从网页模式进化到了WebApp模式，他们运行在现代浏览器里，使用HTML5、CSS3、ES6等新技术来开发丰富功能，网页已经不仅仅是完整浏览器的基本需求；WebApp 通常是一个SPA（单页面应用），每一个视图通过异步的方式加载，这导致叶明的初始化和使用过程中会加载越来越多的JS代码，真的给前端流程和资源组织带来了巨大挑战，

前端开发和其他的开发工作的主要区别，首先前端基于多语言，多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，并且保证他们的浏览器快速、优雅的加载和更新，就需要以和模块化系统，这个理想中的模块化系统是前段工程师多年来一直探索的难题

vue-router路由

Vue Router 是Vue.js官方的路由管理器，他和Vue.js的核心深度集成，让构建单页面应用变得易如反掌包含以下的功能有：

嵌套的路由/视图表
模块化、基于组件的路由配置
路由参数、查询、通配符
基于Vue.js通过过度系统的视图过渡效果
细粒度的导航控制
带有自动激活的CSS class的连接
HTML5的历史模式或者hash模式，在IE9中自动降级
自定义的滚动条行为

安装

基于第一个vue-cli进行测试学习；先查看node_modules中是否存在vue-router

vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装，打开命令行工具，进入你的目录，输入下面命令：

npm install vue-router --save-dev

如果在一个模块化工程使用它，必须通过Vue.use()明确安装路由功能：

import Vue from ‘vue’
import VueRouter from 'vue-router'

Vue.use(VueRouter);

安装Vue-axios

更多推荐

前端框架vue基础

前端框架vue基础

typora-copy-images-to: E:\md文件\图片

前端三要素

结构层（HTML）

表现层（CSS）

什么是CSS预处理器

常见的CSS预处理器：

行为层（JavaScript）

Notive 原生JS开发

JavaScript 框架

UI框架：

JavaScript 构建工具

三端统一

混合开发

微信小程序

后端技术

前端发展史

后端为主的MVC时代

优点：

缺点：

基于AJAX带来的SPA时代

优点：

缺点：

前端为主的MV* 时代

优点：

缺点：

ModeJS带来的全栈时代

Vue ：前端体系、前后端分离

什么是MVVM

为什么使用MVVM

MVVM 的组成部分

View

Model

ViewModel

MVVM 模式的实现者

为什么使用Vue.js

IDEA插件

Cdn引入Vue.js

Vue基本语法

v-bind

v-if，v-else

v-on

Vue:表单双绑、组件

什么是双向数据绑定：

为什么要实现数据的双向绑定

在表单中使用双向数据绑定

Vue组件

Axios异步通信

为什么要使用Axios

计算属性

为什么要计算属性

methods 和computed区别：

结论：

插槽slot

自定义事件内容分发

Vue生命周期

生命周期

什么是 Vue-cli

什么是Webpack

vue-router路由

安装

相关文章

发布评论取消回复

最近发表

热门文章

标签列表