Vue/前端核心分析

Vue/前端核心分析

Soc:关注度分离原则

HTML+css+js：视图：给用户看，刷新后台给的数据

一、前端三要素：HTML+CSS+JavaScript

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

二、结构层（HTML）

太简单，略

三、 CSS（表现层）

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

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

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

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

2. 什么是CSS预处理器

1. CSS 预处理器定义了一种新的语言，其基本思想，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行web页面设计，再通过编译器转化为正常的CSS文件，以供项目使用”。
2. 常见的CSS预处理器有哪些？
   1. SASS:基于Ruby,通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS
   2. LESS:基于NodeJS,通过客户端处理，使用简单，功能比SASS简单，解析效率也低于SASS，但是实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS。

四、行为层（JavaScript）

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

1. Native原生JS开发：原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称ES ，特点就是所有的浏览器都支持，截止当前博客发布时间，ES 标准已发布了多个版本，他们的区别在于：逐步增加特性

2. TypeScript 微软的标准：是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态资源类型和基于类的面向对象编程。

五、JavaScript 框架

1. jQuery: 大家熟悉的JavaScript框架，优点就是简化了DOM操作，缺点就是操作太繁琐，影响前端性能；在前端的眼里使用它仅仅是为了兼容IE浏览器6、7、8
2. Angular:Google收购的前端框架，由一群Java程序员开发,其特点就是将后台的MVC模式搬到了前端并增加了模块化开发的理念
3. React:Facebook出品，一款高性能的JS前端框架，特点就是提出了新概念【虚拟dom】用于减少真实的DOM操作，内存模拟DOM操作，有效的提升了前端渲染效率
4. Vue：一款渐进式JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性
5. Axios:前端通信框架，因为Vue 的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时需要额外的通信框架与服务器交互，当然也可以直接选择使用jQuery提供的ajax通信功能

六、 UI框架

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

2. ElementUI、iview、ice：饿了么出品，基于Vue的UI框架

3. BootStrap:Twitter推出菜单一个用于前端开发的开源工具包

4. AmazeUI:“又叫妹子UI”，一款HTML5跨屏前端框架

七、 JavaScript构建工具

1. Babel: JS编译工具，主要用于浏览器不支持的ES的新特性，比如用于编译TypeCript
2. WebPack: 模块打包器，主要作用是打包、压缩、合并及按序加载

八、为什么要使用MVVM

1. 低耦合：视图（view）可以独立于model变化和修改，一个viewModel可以绑定到不同的view上，当view变化的时候model可以不变，当model变化的时候view也可以不变
2. 可复用：你可以把一些视图逻辑放在一个viewModel里面，让很多view重用这段视图逻辑
3. 独立开发：开发人员可以专注于逻辑和数据的开发（viewModel），设计人员可以专注于页面设计
4. 可测试：界面素来是比较难于测试的，而现在测试可以针对viewModel来写

九、vue的7个属性以及相应的指令

vue的7个属性

1. el属性:用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符
2. data属性:用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
3. template属性:用来设置模板，会替换页面元素，包括占位符
4. methods属性:放置页面中的业务逻辑，js方法一般都放置在methods中
5. render属性:创建真正的Virtual Dom
6. computed属性:用来计算
7. watch属性⌚️function(new,old){};监听data中数据的变化;两个参数，一个返回新值，一个返回旧值，

vue的指令

1. v-bind:特性被称为指令：指令带有前缀 v-，表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。v-bind:style可以缩写为:style;点击指令v-on:click可缩写为@click

   <div id="app">
   <span v-bind:title="message">
    鼠标悬停查看动态绑定的提示信息！
   </span>
   </div>
   

2. v-if 是vue的判断指令，其值必须与vue对象data属性中保持一致

   <div id="app">
   <p v-if="seen">控制这里的数据是否显示</p>
   </div>
   var app3 = new Vue({
   el: '#app',
   data: {
    seen: true
   }
   })
   

3. v-for是vue的循环指令

   <li v-for="num in list">
    {{num}}
   </li>
   
   data:{
    list:["A","B","C"]
   }
   

4. 样式的绑定，一般使用三目运算符

   <div id="app">
    <p v-bind:class="{active:isShow}">显示数据</p>
    <p v-bind:class="isShow?active:error">颜色不同显示数据</p>
   </div>
   <script type="text/javascript">
    var vue = new Vue({
        el:'#app',
        data:{
            isShow:false,
            active:"active",
            error:'error'
        }
    })
   </script>
   <style type="text/css">
    .active {
        background-color: #0fffff;
    }
    .error {
        background-color: #7FFF00;
    }
   </style> 
   

   还可以使用数组的形式来改变样式，设定是根据

十、什么是双向数据绑定

1. vue.js 是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue.js的精髓之处

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

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

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

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

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

注意：v-model 会忽略所有的表单元素 value、checked、selected 特性的初始化值总是将vue 实例的数据作为数据来源。应该通过JavaScript 在组建的data选项中声明初始值！

十三、网络通信

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

1. 从浏览器中创建XMLHttpRequests
2. 从node.js 创建http请求
3. 支持promise API 【JS中链试编程】
4. 拦截和请求响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防御XSRF(跨站请求伪造)

十四、总结

1. 常用的属性

   1. v-if
   2. v-else-if
   3. v-else
   4. v-for
   5. v-on 绑定事件，简写
   6. v-model 数据双向绑定
   7. v-bind 给组件绑定参数，简写

2. 组件化

   1. 组件slot 插槽
   2. 组件内部绑定事件需要使用到 this.$emit(“事件名”，参数)；
   3. 计算属性的特色，缓存计算数据

   遵循SOC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信

github所搜

• in: name springboot mybatis starts:>500
• in:description springboot mybatis starts:>100
• in:readme springboot