Vue的学习笔记一:Vue简介

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式(Progressive)框架。

Vue 由Google的前员工Evan You(尤雨溪) 创建。

首次亮相于2014年2月,并在第一天就大获成功。

Vue 是目前最流行的三大前端框架之一。另外两个分别是 React,Angular。

Vue整体上遵循MVVM(Model-View-ViewModel,模型一视图-视图模型)架构。

也就是说View(用户界面或视图)和Model(模型)是独立的,ViewModel( Vue )是View和lModel交互的桥梁。

通过 Vue ,我们无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦创建了绑定,DOM 将和数据保持同步,每当变更了数据,DOM 也会相应地更新。这就叫双向绑定。

当然了,在使用 Vue 时,也可以结合其他库一起使用,比如 jQuery。

Vue 对 View 和 Model 之间的更新操作做了自动化处理,并且已经为开发者进行了优化。因此,当View的某个部分需要更新时,开发者并不需要特别指定,Vue会选择恰当的方法和时机进行更新。

ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。 当创建了ViewModel后,双向绑定是如何达成的呢?

首先,我们将上图中的DOM Listeners和Data Bindings看作两个工具,它们是实现双向绑定的关键。

从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;

从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。

如今,很多公司都在使用 Vue,如 百度,腾讯,阿里巴巴,google,小米,任天堂等。且在国内也非常流行,很多公司都要求前端开发要能掌握Vue框架的开发。

入门小例子:

首先,在页面中引入 vue.js。

html:

<div id="app">

{{ message }}

</div>
var app = new Vue({

el: '#app',
data: {
    message: 'Hello, world!'
}

})
打开浏览器控制台并修改 app.message的值,然后按回车键:

app.message='Awesome!’
可以看到页面中的内容也发生了改变。这背后的技术称为数据绑定。

div#app,就是 View,“视图”,内容展示的地方。

let app = new Vue() ,创建了一个 Vue 对象,其实就是创建了一个 ViewModel

Vue() 对象的参数就是 Model。

el: '#app',
data: {
message: 'Hello, world!'

原文链接:segmentfault.com

上一篇:NutUi CLI源码解析
下一篇:Vuex原理浅析

相关推荐

  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vuecli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设...

    1 年前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    10 个月前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    8 个月前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    8 个月前
  • 鼠标移入移出效果 -- jQuery/Vue版

    元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接(http://www.bestvist.com/p/56) ...

    2 年前
  • 麻雀虽小五脏俱全的Vue拉勾项目,看看应该有帮助

    全栈系列Vue版拉勾,客官们来瞧瞧 模拟拉勾app系列vue前端界面 github地址,来猛戳吧(https://github.com/qianbin01/lagouvue) 前言 本项目...

    1 年前
  • 高程读书笔记 第六章 面向对象程序设计

    本章内容 ECMA262把对象定义为:无序属性的集合,其属性可以包含基本值、对象或者函数 理解对象 创建对象 创建自定义对象的最简单方式就是创建一个Object的实例,再为它添加属性和方...

    1 年前
  • 高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)

    前言 事实上, 只有的最终用户响应时间是发在从Web服务器获取HTML文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间,就必须关注剩余的最终用户体验。

    10 个月前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前

官方社区

扫码加入 JavaScript 社区