什么是vue

vue是渐进式的JavaScript框架

什么是渐进式？

你可以在原有大系统的上面，把一两个组件改用vue实现，；也可以整个项目用vue全家桶开发。

vue是一个轻量级的MVVM框架。

MVVM

前端框架发展

DOM：原生JS->ExtJS、JQuery->easyui、layui等等（简化DOM操作）

MVVM：Angular、vue、React。能够帮助我们减少不必要的DOM操作，提高渲染效率。数据绑定（单向、双向），通过框架提供的一些指令，我们只需要关注数据的业务逻辑，不需要关注DOM是如何渲染的。在vue中，一个最核心的思想就是不让用户去操作DOM元素。

Model：【数据模型与持久化抽象模型】数据模型很好理解，就是从服务器拉回来的JSON数据。而持久化抽象模型暂时放在Model层。
View：【视图层】不做数据处理，只是将VM的数据进行展示。
ViewModel：链接View和Model的作用，完成了DOM的监听和数据绑定

当你成功完成【快速开始】后，可以通过一个例子来分析MVVM。

快速开始

安装vue

直接使用script引入

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

NPM

# 最新稳定版

$ npm install vue

vscode版本

在vscode上安装一个插件open in browser,然后就可以运行。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--view层 模板-->

<div id="app">

    {{msg}}

</div>

</body>

<!--导入vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({

        el:"#app",

        // Model 数据

        data:{

            msg :"hello vue"

        }

    });

</script>

</html>

idea版本（可忽略）

https://www.cnblogs.com/10134dz/p/14394506.html

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？

打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 vm.msg 的值，你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

【vue-01】快速入门的更多相关文章

.NET Core实战项目之CMS 第六章入门篇-Vue的快速入门及其使用
写在前面上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备我推荐 ...
Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
MyBatis 学习总结 01 快速入门
本文测试源码下载地址: http://onl5wa4sd.bkt.clouddn.com/MyBatis0918.rar 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级 ...
Vue.js快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
Vue.js—快速入门
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
Vue.js——快速入门
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
Vue.js—快速入门及实现用户信息的增删
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
Vue的快速入门
1 环境准备 1 下载安装Node 地址https://nodejs.org/en/download/ 完成后通过cmd打开控制台输入node -v 可以看到版本信息 2 通过该node自带的npm ...

随机推荐

Spark SQL中Not in Subquery为何低效以及如何规避
首先看个Not in Subquery的SQL: // test_partition1 和 test_partition2为Hive外部分区表 select * from test_partition ...
Python接口自动化实现
一.代码结构: 二.接口签名实现: 1. 设所有发送的数据集合为M,将集合M内非空参数值的参数按照[参数名+"="+参数值]的ASCII码从小到大排序(字典序),然后按拼接key1 ...
ECharts系列 (01)：地图三级下钻
前言最近项目中用到了地图下钻功能,GitHub上找到了一个轮子 - echarts3-chinese-map-drill-down,启动项目看了一下Demo,动画衔接的很流畅,感觉做的非常棒,膜拜大 ...
CSS行内元素盒模型
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
Java进阶专题(二十七) 将近2万字的Dubbo原理解析，彻底搞懂dubbo (下)
...接上文服务发现服务发现流程整体duubo的服务消费原理 Dubbo 框架做服务消费也分为两大部分 , 第一步通过持有远程服务实例生成Invoker,这个Invoker 在客户端是核心的远程 ...
从I/O多路复用到Netty，还要跨过Java NIO包
本文是Netty系列第4篇上一篇文章我们深入了解了I/O多路复用的三种实现形式,select/poll/epoll. 那Netty是使用哪种实现的I/O多路复用呢?这个问题,得从Java NIO包说 ...
$(( )) 与 $( ) 还有${ } 差在哪？-- Shell十三问<第八问>
$(( )) 与 $( ) 还有${ } 差在哪?-- Shell十三问<第八问> 我们上一章介绍了 ( ) 与 { } 的不同,这次让我们扩展一下,看看更多的变化:$( ) 与 \( ...
重磅！解锁Apache Flink读写Apache Hudi新姿势
感谢阿里云 Blink 团队Danny Chan的投稿及完善Flink与Hudi集成工作. 1. 背景 Apache Hudi 是目前最流行的数据湖解决方案之一,Data Lake Analytics ...
开源服务器设计总计（plain framework2020年总计）
2020年注定会被历史铭记,世界遭受着一场前所未有的灾难,这种灾难到现在还在持续.还记得19年末的时候,那时候听到一点点消息,哪里想得到年关难过,灾难来的让人猝不及防.由于疫情防控,2020年感觉转瞬 ...
[Fundamental of Power Electronics]-PART I-3.稳态等效电路建模，损耗和效率-3.3 等效电路模型的构建
3.3 等效电路模型的构建接下来,让我们完善直流变压器模型来解决变换器的损耗问题.这将使用众所周知的电路分析技术来确定变换器的电压,电流和效率. 在前面的章节,我们利用电感伏秒平衡和电容电荷平衡得到 ...

【vue-01】快速入门