【vue-01】快速入门
2024-10-20 03:58:00
什么是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 实例内部。
最新文章
- Redis学习笔记一:数据结构与对象
- stage simulator
- 黑马程序员——OC语言 三大特性之继承
- js实现把网页table导成Excel
- nginx下增加模块
- c# 操作xml题目
- 【转】linux设备驱动程序之简单字符设备驱动
- 求和问题总结(leetcode 2Sum, 3Sum, 4Sum, K Sum)
- C++函数声明和定义深度解析
- Raphael的text及对齐方式
- Pok 使用指南
- Prometheus+AlertManager实现邮件报警
- Centos6.5部署Rsyslog+cron+rsync备份服务器
- codevs 1464 装箱问题 2
- hydra 及相关示例
- 从零开始一个http服务器(六)-多路复用和压力测试
- php发送get和post请求
- JS PHP MySQL 字符长度
- BZOJ3997 TJOI2015组合数学(动态规划)
- AWK 怎么读取标准输入(STDIN)
热门文章
- 001-HashMap源码分析
- vue 弹窗禁止底层滚动
- Python基础【基本数据类型】
- 使用C# (.NET Core) 实现模板方法模式 (Template Method Pattern)
- Androi Studio 之 RelativeLayout
- .NET 开源配置组件 AgileConfig 初体验
- 翻译:《实用的Python编程》07_04_Function_decorators
- 解决删除Azure Active Directory的Enterprise Applications异常
- Python基础(二十一):面向对象“类”第四课——魔法方法
- 可读性友好的JavaScript:两个专家的故事