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源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    15 小时前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    6 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    5 个月前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 🌓vue页面换肤实践

    前言 最近要做一个换肤的功能,不过只是对一个页面换肤,换一下背景图呀,背景、边框、字体颜色呀之类的,并非整个项目换肤,相对比较简单,所以以下介绍的换肤方法仅适用于页面换肤而非整个项目换肤。

    20 天前
  • (记录)vue、element表格首行跑到最后一行去了

    问题 项目中,我们一般会对 Element 进行二次封装,因为这样更好的全局管理组件,一处改动即可全局改动。比如你有十个表格,因为表格需要新增一个小功能(比如:右上角新增一个控制列显示的按钮),这时...

    2 天前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

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

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

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

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

    1 年前
  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 2、出现问题的代码点 3、替代方案: 把import() 替换成如下: Promise.resolve().then(()=&...

    4 个月前

官方社区

扫码加入 JavaScript 社区