Vue.js

目录

MVVM

Vue.js优点

Vue的安装

第一个Vue程序

模板语法

插值文本

使用js语句

---

        Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心 库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三 大主流框架！

简单来说他对js的语句做了大量的封装，使得语法更加简洁，功能强大。

MVVM

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

Vue.js优点

1.体积小，压缩后仅有33k

2.更高的运行效率

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

3.双向数据绑定,简化 Dom 操作 通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象, 把更多的精力投入到业务逻辑上.

4 生态丰富、学习成本低 市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件！来即用实现 快速开发！对初学者友好、入门容易、学习资料多.

Vue的安装

方式一：

下载 Vue.js 并导入 js 文件

方式二：:命令行工具 (CLI) 

第一个Vue程序

1. 导入开发版本的 Vue.js

2. 创建 Vue 实例对象，设置 el 属性和 data 属性

3. 使用简洁的模板语法把数据渲染到页面上

	
		
		
		
	
	
		
		

		  {{ message }} 
		
		
	

代码解析：

1.{{ 变量 }} 模板语法,插值表达式获取数

2.new Vue();创建 Vue

3.el:数据挂载的 dom 对象

4.Vue 会管理 el 选项命中的元素及其内部的后代元素 可以使用其他的选择器，但是建议使用 ID 选择器，不能使用 HTML 和 BODY

5.data:{ message:’hello world’}

6.Vue 中用到的数据定义在 data 中 data 中可以写复杂类型的数据,如对象,数组 渲染复杂类型数据时，遵守 js 的语法即可 

模板语法

插值文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

Message: {{ msg }} 

无论何时， 绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。(动态绑定)

使用js语句

我们一直都只绑定简单的 property 键值。但实 际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

有个 限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效 ：

{{ var a = 1 }}

{{ if (ok) { return message } }}