[JavaScript知识库]Vue简介，学习笔记

Vue学习记录

一，Vue.js （个人理解，不对的请留言）

vue（读音 /vju/，类似于view）是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的核心库只关注试图层，不仅易于上手，还便于与第三方库(如：vue-router，vue-resource，vuex)或既有项目整合.

Vue创始人是，尤雨溪，这时候就有人说了，（尤雨溪就是个写代码的，懂什么vue啊）

Vue 的核心库只关注视图层，方便与第三方库或既有项目整合:

• HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据

• 网络通信 ： axios

• 页面跳转 ： vue-router

• 状态管理：vuex

Vue-UI : ICE , Element UI

二，前端核心分析

2.1 前端三要素

1. HTML (结构) :

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

2. 表现层 CSS (表现):

• Css层叠样式表是一门标记语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，他的主要缺点如下：

缺点：
1.语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；

2.没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

这就导致了一些问题：

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

这里说到了CSS预处理器，那么什么是CSS预处理器呢，我们一起往下看!

什么是CSS预处理器？

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

其实就是我们经常用的引入的.js文件.

接下来我们就说一下我们常用的CSS预处理器：

• SASS（英文全称：Syntactically Awesome Stylesheets）：基于Ruby，通过服务端处理，功能强大解析率高，需要学习Ruby语言，上手难度高于LESS，是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。

• LESS：基于NodeJS，通过客户端处理，使用简单，功能比SASS简单，系欸小效率也低于SASS，但在实际开发中足够了，所以我们后台人员需要的话建议使用LESS

说白了预处理器就是使用代码写代码，代码编译代码.

3. 行为层 JavaScript (行为)

JavaScript (行为) :是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行,用于控制网页的行为.

Native 原生js开发，也就是让我们安装 【ECMAScript】 标准的开发方式，检查时ES，特点时所以浏览器都支持。截止到当前博客发布时间,ES标准已发布如下

这里我们由说到了浏览器的开发方式 ECMAScript

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

• ES3
• ES4(内部，未正式发布)
• ES5（全浏览器支持）
• ES6（常用当前主流版本，webpack打包成为ES5支持）
• ES7
• ES8
• ES9

他们的区别就是增加了新特性

常用的是ES这里只列举ES6的

在说一下对浏览器的支持：

这里再说一个 TypeScript微软的标准：

TypeScript 是一种又微软开发的自由和开源的编程语言，它是javaScript的一个超集，而且本质向这个语言添加了可选的静态类型和基于类的面向对象编程，由安德斯-海尔斯伯格(C#,Delpji,TypeScript之父，NET创立者)主导。

? 该语言的特点就是具备ES的特性之外还纳入了许多不在标准范围内的新特型，所以会导致很多浏览器不能只支持TypeScipt语法，需要编译后（编译成JS）才能被浏览器正确执行。

Vue 7属性 + Vue 8方法+Vue 七指令

简单了解了一下作用。

Vue的七指令

不难发现都是v-什么什么开头，这个被叫做指令

• v-if 条件渲染指令
  • 根据其后表达式的bool值进行判断是否渲染该元素
• v-show
  • 与v-if相似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style=“display:none”;
• v-else
  • 必须跟在v-if/v-show指令之后，不然不起作用，如果v-if/v-show指令的表达式为true，则else元素不显示，如果v-if/v-show表达式为false，则else元素会显示在页面上
• v-for
  • 类似js的遍历，用法为v-for=“item in items” ,items是数组，item为数组中的数组元素
• v-bind
  • 这个指令用于相应地更新HTML特性，比如绑定某个class元素或元素地style样式，他的语法糖为’ : ’
• v-on
  • 用于监听指定元素地DOM事件，比如点击事件，他的语法糖为’@’
• v-model
  • 用于表单元素，进行双向数据绑定

Vue的8方法：

1.初始化显示

• *beforeCreate()
• *created()
• *beforeMount()
• *mounted()

2.更新状态this.xxx = value

• *beforeUpdate()
• *updated()

3.销毁 vue 实例vm.$destory()

• *beforeDestory()
• *destoryed()

Vue的七属性：

• el属性
  • 绑定id，用来只是vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符
• data属性
  • 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中
• methods属性
  • 放置页面中的业务逻辑，js方法一般都放置在methods中
• computed属性
  • 定义计算属性的方法，这个算是vue特有的，一大特色。
• template属性
  • 用来设置模板，会替换页面元素，包括占位符
• watch属性
  • watch：function(new,old){…}
  • 监听data中数据的变化
  • 两个参数，一个返回新值，一个返回旧值
• render属性
  • 创建 Virtual Dom

总结

先说一下MVVM模式

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

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

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

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