Vue 一套构建用户界面的渐进式的框架（知识了解篇~）

知识了解

概念

Vue是一个渐进式的框架。与其他重量级框架相比不同的是,Vue采用自底向上增量开发的设计.  Vue的核心代码只关注视图层.

渐进式概念？

1、可以将Vue作为应用的一部分嵌入其中，带来更丰富的交互体验
2、可以将更多的业务逻辑使用Vue实现
3、如 Core+Vue-router+Vuex，也可以满足各种各样的需求

特点

Vue很多特点和Web开发中常见的高级功能

1、解耦视图和数据
2、可复用的组件
3、前端路由技术
4、状态管理
5、虚拟DOM

虚拟DOM

运行js的速度是很快的,大量的DOM操作会很慢,
时常在更新数据的时候我们只是拼写了一点的HTML代码,
使用innerHTML进行操作,但是这样的更新数据会重新渲染页面,
造成了在没有改变数据的地方也重新渲染了DOM节点,这就造成了很大程度上的资源浪费.

Vue利用在内存中生成与真实DOM相对应的数据结构,这个在内存中生成的结构称之为虚拟DOM.

当数据发生改变时,能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上.

document本身就是浏览器将标签抽取出来作为对象.
Vue则是通过rander方法将模版抽取成为虚拟DOM,
在虚拟DOM改变时,对比改变前和改变后的结构,
以最小的代价重新渲染真实DOM.虚拟DOM在js中的表现就是树状的对象结构。

安装

1、直接CDN引入








2、下载和引入

开发环境：https://vuejs.org/js/vue.js
生产环境：https://vuejs.org/js/vue.min.js


3、NPM安装

通过webpack和CLI的使用

测试

1、第一个vue运行


    
{{message}}
    


/*
在编程范式可以看出：
	这是声明式编程而不是命令式编程（原生js）
*/

2、响应式列表


    

        
{{item}}
    
    
    

 
图片如下：

 

3、计数器


    

        
当前数字为：{{count}}
        
        +
        
        - 
        打印

    
    
    

MVVM

Mode View ViewModel

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑

通俗说：viewModel 是model和view中间的桥梁，将model中的数据业务逻辑来抽象化到view（交互操作）

而vue就是相当为viewModel，将model数据抽象化为dom树，也可以将用户对dom进行点击事件类似操作绑定到model数据上

 
图片如下：