Vue：前端体系、前后端分离【入门】
零、初识
1. 概述
vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目整合。
Vue HTML + CSS + JS
Soc 关注点分离原则
2. 前端知识体系
2.1 前端三要素
HTML（结构）：超文本标记语言，决定网页的结构和内容；
CSS（表现）：层叠样式表，设定网页的表现样式；
JavaScript（行为）：是一种弱类型脚本语言，其源代码不需经过编译，而是有浏览器解释运行，用于控制网页的行为。
2.2 HTML
2.3 表现层CSS
CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备语法支持。
缺陷：
- 语法不够强大，比如无法嵌套书写，倒置模块化开发中需要书写很多重复的选择器；
- 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
导致在工作中无端增加了很多工作量。为解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。
什么是CSS预处理器
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。
常用的CSS预处理器有哪些
- SASS：基于Ruby，通过服务器端处理，功能强大。解析效率高。需学习Ruby语言，上手难度高于LESS。
- LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，效率解析也低于SASS，但在实际开发中足够了，所以后台人员有需要的话，建议LESS。
2.4 行为层（JavaScript）
Native原生JS开发
原生JS开发，也就是按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持。
- ES3
- ES4（内部，未正式发布）
- ES5（全浏览器支持）
- ES6（常用，主流版本：webpack打包成为ES5支持！）
ES789 逐步增加新特性。
3. 前端开发人员使用的编辑器
Vscode
Hbuilder
Sublime
WebStrom
一、第一个Vue程序
IDEA可以安装Vue的插件
注意：Vue不支持IE8及以下版本，因为Vue使用了IE8无法模拟的ECMAScript5特性。但它支持所有兼容ECMASCript5的浏览器。
下载地址
- 开发版本
- 包含完整的警告和调试模式：https://vuejs.org/js/vue.js
- 删除了警告，30.96KB min + gzip：https://vuejs.org/js/vue.min.js
- CDN
- <script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.js">script>- <script src="https://cdn.jsdeliver.net/npm/vpm/vue@2.5.21/dist/vue.min.js">script>
代码编写
Vue.js的核心是实现了MVVM模式，它扮演的角色就是ViewModel层，那么所谓的第一个应用程序就是展示它的 数据绑定 功能，操作流程如下：
1. 创建一个HTML文件
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle>
head>
<body>
<div id="app">{{message}}
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>var vm = new Vue({el: "#app",// Model : 数据data:{message: "Hello, Vue!"}});
script>
body>
html>
什么是MVVM
MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Apple，简单点说就是在浏览器上运行的WPF）的架构师Ken Cooper 和 Ted peters开发，是一种简化用户界面的事件驱动编程方式。
MVVM源于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下：
- 该层向上与视图层进行双向数据绑定
- 向下与Model层通过接口请求进行数据交互
MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有vue.js，AngularJS等。
为什么要使用MVVM
MVVM模式和MVC模式一样，主要目的就是分离视图和模型，有几大好处：
- 低耦合：视图可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候ViewModel也可以不变。
- 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多ViewModel重用这段视图逻辑。
- 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
- 可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
Vue
Vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（vue-router, vue-resource, vuex）或既有项目整合。
Vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定。
Vue有7个常用属性
二、Vue基本语法
我们已经成功创建了第一个Vue应用。看起开和渲染一个字符串模板非常类似，但是Vue在背后做了大量的工作。现在数据和DOM已经被简历了关联，所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新。
v-bind
我们还可以使用v-bind来绑定元素特性。
<div id="app"><span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！span>{{message}}
div>
v-bind等被称为指令。指令带有前缀 v-，以表示他们是Vue提供的特殊特性。他们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的title特性和Vue的实例的message属性保持一致”。
如果再次打开浏览器的JavaSCript控制台，输入app.message = “新信息”，就会再一次看到这个绑定了title特性的HTML已经进行了更新。
v-if, v-else
<div id="app"><h1 v-if="ok">Yesh1><h1 v-else>Noh1>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>var vm = new Vue({el: "#app",data: {ok: true}});
script>
v-else-if
<div id="app"><h1 v-if="type==='A'">Ah1><h1 v-else-if="type==='B'">Bh1>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>var vm = new Vue({el: "#app",data: {type: 'A'}});
script>
v-for
<div id="app"><li v-for="item in items">{{item.message}}li>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>var vm = new Vue({el: "#app",data: {items:[{message: 'laomao'},{message: 'piaobo'}]}});
script>
v-on
<div id="app"><button v-on:click="sayHi">click mebutton>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>var vm = new Vue({el: "#app",data: {message: "laomao"},methods: { // 方法必须定义在Vue 的 Method对象中, v-on: 事件sayHi: function (event) {alert(this.message)}}});
script>
三、Vue：表单双向绑定、组件
什么是双向绑定
Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也发生变化；视图发生变化时，数据也同步变化。
数据双向绑定，一定是对于UI空间来说的，非UI空间不会设计数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也使单向的，这就会和双向数据绑定有冲突。
<div id="app">输入的文本：<input type="text" v-model="message"> {{message}}
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>var vm = new Vue({el: "#app",data: {message: '123'}});
script>
单选框
<div id="app">性别：<input type="radio" name="sex" value="男" v-model="laomao"> 男<input type="radio" name="sex" value="女" v-model="laomao"> 女{{laomao}}
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>var vm = new Vue({el: "#app",data: {laomao: ''}});
script>
下拉框
<div id="app">下拉框:<select v-mdoel="selected"><option value="" disabled>---请选择---option><option>Aoption><option>Boption><option>Coption>select><span>value:{{selected}}span>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>var vm = new Vue({el: "#app",data: {selected: ''}});
script>
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。应该通过JavaScript在组件的data选项中声明初始值。
什么是Vue组件【自定义标签】
组件是可复用的Vue实例，就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织。
<div id="app"><laomao v-for="item in items" v-bind:mao="item">laomao>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>// 定义一个Vue组件componentVue.component("laomao",{props: ['mao'],template: '{{mao}} '});var vm = new Vue({el: "#app",data:{items: ["Java", "Linux", "前端"]}});
script>
四、Vue：Axios异步通信【网络通信】
什么是Axios
Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用是实现AJAX异步通信，其功能特点如下：
- 从浏览器中创建 XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API [JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF（跨站请求伪造）
GitHub：https://github.com/axios/axios
为什么要使用Axios
由于Vue.js是一个视图层框架并且作者（尤雨溪）严格遵守Soc（关注度分离原则），所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource的插件，不过进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery，因为其操作DOM太频繁。
第一个Axios应用程序
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染更新渲染、卸载等一系列过程，我们称为Vue的生命周期。通俗说就是Vue实例从创建带销毁的过程。
在Vue的生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。
DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Titletitle><style>[v-clock]{display: none;}style>
head>
<body><div id="vue" v-clock><div>{{info.name}}div><div>{{info.address.street}}div><a v-bind:href="info.url">点我a>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script type="text/javascript">var vm = new Vue({el: "#vue",data(){return {// 请求的返回参数合适，必须和Json字符串一样info:{name: null,address: {street: null,city: null,country: null}}}},mounted(){ //钩子函数axios.get('../data.json').then(response=>(console.log(this.info=response.data)))}});
script>body>
html>
五、计算属性、内容分发、自定义事件
什么是计算属性
计算属性的终端突出在属性两个字桑，这里的计算就是一个函数；它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已。
<div id="vue"><p>currentTime1 {{currentTime1()}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>var vm = new Vue({el: "#vue",data:{message: "Hello, laomao."},methods:{currentTime1: function () {return Date.now(); // 返回当前时间戳}},computed: { // 计算属性： methods， computed 方法名不能重名, 重名之后methods的优先级会高currentTime1: function () {return Data.now(); // 返回当前时间戳}}});
script>
notes：
- methods：定义方法，调用方法使用currentTime1()， 需要带括号；
- computed： 定义计算属性，调用属性使用currentTime2，不需要带括号；this.message是为了能够让currentTime2观察到数据变化而变化；
- 如果在方法中的值发生了变化，则缓存会刷新！
六、插槽slot
<div id="app"><todo><todo-title slot="todo-title" :title="title">todo-title><todo-items slot="todo-items" v-for="item in todoItems" :item="item">todo-items>todo>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>// slot 插槽Vue.component("todo",{template: '\\
\'});Vue.component("todo-title",{props: ['title'],template: '{{title}}'});Vue.component("todo-items",{props: ['item'],template: '{{item}} '});var vm = new Vue({el: "#app",data:{title: "冲大厂啊",todoItems:['百度', '阿里', '字节', '腾讯', '360']}});script>
效果展示：
七、自定义时间内容分发
<div id="app"><todo><todo-title slot="todo-title" :title="title">todo-title><todo-items slot="todo-items" v-for="item,index in todoItems":item="item" v-bind:index="index" v-on:remove="removeItems(index)" :key="index">todo-items>todo>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>// slot 插槽Vue.component("todo",{template: '\\
\'});Vue.component("todo-title",{props: ['title'],template: '{{title}}'});Vue.component("todo-items",{props: ['item', 'index'],// 只能绑定当前组件的方法template: '{{index}}--{{item}} ',methods: {remove: function (index) {// this.$emit() 自定义时间内容分发this.$emit('remove',index);}}});var vm = new Vue({el: "#app",data:{title: "冲大厂啊",todoItems:['百度', '阿里', '字节', '腾讯', '360']},methods: {removeItems: function (index) {console.log("删除了"+this.todoItems[index]+"OK");this.todoItems.splice(index, 1); // 一次删除一个元素}}});script>
效果展示：
Vue 入门小结
核心：数据驱动，组件化
优点：借鉴了AngulaJS的模块化开发 和 React 的虚拟Dom，虚拟Dom就是把Dom操作放在内存中执行；
常用属性：
- v-if
- v-else-if
- v-for
- v-on 绑定事件 简写 @
- v-model 数据双向绑定
- v-bind 给组件绑定参数 简写 ：
组件化：
- 组件组合slot 插槽
- 组件内部绑定事件需要用到 this.$emit(“事件名”, 参数);
- 计算属性的特色，缓存计算数据
遵循Soc关注度分离原则，Vue是纯粹的视图框架，并不包含，比如AJAX之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信。
Vue的开发都是基于NodeJS，实际开发采用vue-cli脚手架开发，vue-router路由，Vuex做状态管理；Vue UI界面，我们一般使用 ElementUI（饿了么出品）或者ICE（阿里巴巴出品），来快速搭建前端项目。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！