Vue 介绍

目录

Vue 简介

渐进式 JavaScript 框架

渐进式：可以控制一个页面的一个标签，也可以控制一系列标签，也可以控制整个页面，甚至可以控制整个前台项目。你需要用它的什么组件就用什么组件，没有强主张



什么是 Vue？

可以独立完成前后端分离式 web 项目的 JavaScript 框架


前后端不分离：
在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制的，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高

前后端分离
在前后端分离的应用模式中，后端仅返回前端所需要的数据，不在渲染 HTML 页面，不再控制前端效果
至于前端用户看到什么效果，从后端请求的数据如何加载到前端，都是由前端自己决定，网页有网页的处理方式，App 有 App 的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可

为什么要学习 Vue ？

前台框架：Angular（庞大）、React（精通移动端）、Vue（吸取前两者优势，轻量级）
Vue一手文档是中文、中文API（低学习成本）
实现前后台分离开发，节约开发成本

special -- 特点

虚拟DOM
数据的双向绑定
单页面应用
数据驱动



优势

有指令（分支结构，循环结构...），复用页面结构等
有实例成员（过滤器，监听），可以对渲染的数据做二次格式化
有组件（模块的复用或组合），快速搭建页面

1 轻量级框架：只关注视图层,是一个构建数据的视图集合,大小只有几十kb

2 简单易学：国人开发,中文文档,不存在语言障碍,易于理解和学习

3 双向数据绑定：vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。

这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。

4 组件化：Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。

5 视图、数据和结构的分离：使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作

6 虚拟DOM：用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿
而Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。

7 运行速度快：像比较与react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势



如何使用

Vue环境简单搭建：通过script标签导入vue文件即可

1  cdn
<script src="https://cn.vuejs.org/js/vue.js"></script>

2  本地导入
<script src="js/vue.js"></script>

简单使用

<div id="app">
    {{ }}
</div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app'
    })
</script>

总结：

what：渐进式 javascript 框架
where：前后台分离项目的前台开发（pc、移动端）
why：有其他框架的优点、轻量、中文API（低学习成本）
how：在页面中导入vue环境，用变量控制挂载点，各种指令与实例成员配合

Vue 常用网站

vue官方文档：https://cn.vuejs.org/v2/guide/

vue资源精选：http://vue.awesometiny.com/

vue GitHub地址：https://github.com/vuejs/vue

基于vue和element构建的后台前端解决方案：https://panjiachen.github.io/vue-element-admin-site/zh/


 posted on 2020-02-13 09:39  Rannie`  阅读(1499)  评论(0)  编辑  收藏  举报
去除动画
找回动画