【vue-01】快速入门
什么是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 ...
随机推荐
- Andrew BP 神经网络详细推导
Lec 4 BP神经网络详细推导 本篇博客主要记录一下Coursera上Andrew机器学习BP神经网络的前向传播算法和反向传播算法的具体过程及其详细推导.方便后面手撸一个BP神经网络. 目录 Lec ...
- Java BasicNameValuePair怎么传数组类型的参数？
BasicNameValuePair 传数组的话可以这样传 map.put("ids[]", 1); map.put("ids[]", 2);
- Kubernetes 实战 —— 03. pod: 运行于 Kubernetes 中的容器
介绍 pod P53 pod 是 Kubernetes 中最为重要的核心概念,而其他对象仅仅用于 pod 管理. pod 暴露或被 pod 使用. pod 是一组并置的容器,代表了 Kubernete ...
- 基于autofac的属性注入
基于autofac的属性注入 什么是属性注入 在了解属性注入之前,要先了解一下DI(Dependency Injection),即依赖注入.在ASP.NET Core里自带了一个IOC容器,而且程序支 ...
- 手把手教你docker安装宝塔面板
手把手教你docker安装宝塔面板(针对小白提一下:需要先安装docker,安装docker的教程请自行百度,非常简单的),docker安装宝塔面板教程如下: 一.拉取centos镜像(当然这里拉取别 ...
- Java例题_39 判断奇偶后分数累加
1 /*39 [程序 39 分数累加] 2 题目:编写一个函数,输入 n 为偶数时,调用函数求 1/2+1/4+...+1/n,当输入 n 为奇数时,调用函数 3 1/1+1/3+...+1/n 4 ...
- Java中的映射Map - 入门篇
前言 大家好啊,我是汤圆,今天给大家带来的是<Java中的映射Map - 入门篇>,希望对大家有帮助,谢谢 简介 前面介绍了集合List,这里开始简单介绍下映射Map,相关类如下图所示 正 ...
- 计划任务统一集中管理系统cronsun(替代crontab)
一.背景 crontab 是 Linux 系统里面最简单易用的定时任务管理工具,相信绝大多数开发和运维都用到过,很多业务系统的定时任务都是通过 crontab 来定义的,时间长了后会发现存在很多问题: ...
- [SIGIR2020] Sequential Recommendation with Self-Attentive Multi-Adversarial Network
这篇论文主要提出了一个网络,成为Multi-Factor Generative Adversarial Network,直接翻译过来的话就是多因子生成对抗网络.主要是期望能够探究影响推荐的其他因子(因 ...
- OO电梯系列优化分享
目录 前言 HW5 HW6 第二次作业uml协作图 HW7 第三次作业uml协作图 前言 本单元作业在优化方面确实有一些想法值得分享,故单开一篇博客分享一下三次作业的优化以及架构. 三次作业的共同之处 ...