什么是vue

vue是渐进式JavaScript框架

什么是渐进式?

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

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

MVVM

前端框架发展

DOM:原生JS->ExtJSJQuery->easyuilayui等等(简化DOM操作)

官网 vue-element-admin

MVVM:AngularvueReact。能够帮助我们减少不必要的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】快速入门的更多相关文章

  1. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

  2. Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  3. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

  4. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  5. MyBatis 学习总结 01 快速入门

    本文测试源码下载地址: http://onl5wa4sd.bkt.clouddn.com/MyBatis0918.rar 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级 ...

  6. Vue.js快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  7. Vue.js—快速入门

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  8. Vue.js——快速入门

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

  9. Vue.js—快速入门及实现用户信息的增删

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  10. Vue的快速入门

    1 环境准备 1 下载安装Node 地址https://nodejs.org/en/download/ 完成后通过cmd打开控制台输入node -v 可以看到版本信息 2 通过该node自带的npm ...

随机推荐

  1. python网络编程--TCP客户端的开发

    #导入socket模块 2 import socket 3 #参数说明 4 """ 5 socket类的介绍 6 创建客户端socket对象 7 socket.socke ...

  2. winnt.h

    winnt.h https://docs.microsoft.com/en-us/windows/win32/api/winnt/ /*++ BUILD Version: 0091 Increment ...

  3. 攻防世界 reverse EASYHOOK

    EASYHOOK XCTF 4th-WHCTF-2017 1 data=[ 0x61, 0x6A, 0x79, 0x67, 0x6B, 0x46, 0x6D, 0x2E, 0x7F, 0x5F, 2 ...

  4. lms框架即将发布第一个版本了

    lms微服务框架介绍 LMS框架旨在帮助开发者在.net平台下,通过简单的配置和代码即可快速的使用微服务进行开发. LMS通过.net框架的主机托管应用,内部通过dotnetty/SpanNetty实 ...

  5. 如何使用Docker部署Go Web应用

    目录 如何使用Docker部署Go Web应用 Docker部署示例 准备代码 创建Docker镜像 编写Dockerfile Dockerfile解析 From Env WORKDIR,COPY,R ...

  6. epoll poll select区别

    函数依赖 ( Functional Dependency,FD) select:http://www.cnblogs.com/Anker/archive/2013/08/14/3258674.html ...

  7. 百度地图一套JS API,非常实用

    百度地图一套JS API,非常实用 import mapStyleJson from "./mapStyleJson"; import $ from "jquery&qu ...

  8. rpm 命令介绍

    1. rpm 命令常用选项说明 1.1 功能模式选项 命令 解释 -i --install 安装软件,例:rpm -ivh tree-1.6.0-10.el7.x86_64.rpm -U --upgr ...

  9. Node.js 包管理器 NPM 讲解

    包管理器又称软件包管理系统,它是在电脑中自动安装.配制.卸载和升级软件包的工具组合,在各种系统软件和应用软件的安装管理中均有广泛应用.对于我们业务开发也很受益,相同的东西不必重复去造轮子. 每个工具或 ...

  10. Chapter 2 简单DC-DC变换器稳态分析小结

    Chapter 2 简单DC-DC变换器稳态分析小结 1 本章重点 1.1 小纹波近似 所谓小纹波近似就是DC-DC变换器的稳态分析中,假定开关频率次的纹波相对于直流分量而言非常小,可以将其忽略进行各 ...