Vue.js的简单概念和使用(代码及运行图)

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

通过Vue实现数据层和视图层的对应对象的自主绑定,由Vue框架进行数据的和绑定自动更新

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

官网地址:https://cn.vuejs.org/

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 安装
方式 1:直接用 <script> 引入
下载 Vue.js 并导入 js 文件
<script src="js/vue.js"></script>
方式 2:命令行工具 (CLI)
安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时。

 

两个js,第一个是没有压缩过的,第二个是压缩过的

保留压缩过的js

导入文件vue.js文件

第一个 Vue 程序
1. 导入开发版本的 Vue.js
2. 创建 Vue 实例对象,设置 el 属性和 data 属性
3. 使用简洁的模板语法把数据渲染到页面上
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM的系统:

代码解析:

{ { 变量 }} 模板语法,插值表达式获取数据
new Vue();创建 Vue 对象(VM 对象)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值