前端框架Vue------＞第一天学习、Vue学习的路径、Vue官网（1）
vue的官方文档：https://cn.vuejs.org/
1、学习目标
2、前端知识体系
2.1 前端三要素
HTML（结构）:决定网页结构和内容
- CSS（表现）：设定网页的表现样式
- JavaScript（行为）：控制网页行为。（浏览器解释执行）
2.2、MVVM
是一种软件架构设计模式。
MVVM的核心是ViewModel，负责转换Model中的数据对象来让数据变得更容易管理和使用。作用
- 该层向上与视图层进行双向数据绑定
- 向下与Model层通过接口请求进行数据交互
优点：
- 低耦合性
- 可复用性
- 独立开发
- 可测试
2.3 、MVVM的组成部分
注意：ViewModel所封装出来的数据模型包括视图的状态和行为两部分，而Model层的数据模型是只包含状态的 - 例如页面的某一块展示什么内容，表示视图状态（展示）
- 页面加载进来时发生什么，点击某一块发生什么，某一块滚动时发生什么，属于视图的行为（交互）
3、第一个Vue程序
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
第一个vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>我的第一个Vue程序</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!!!"
}
})
</script>
</body>
</html>
控制台
4、Vue实例的生命周期
前端框架Vue------＞第一天学习、Vue学习的路径、Vue官网（1）的更多相关文章
- [转]OpenTK学习笔记(1)-源码、官网地址
OpenTK源码下载地址:https://github.com/opentk/opentk OpenTK使用Nuget安装命令:OpenTK:Install-Package OpenTK -Versi ...
- 前端框架Vue------＞第一天学习（3）
文章目录 8 .使用Axios实现异步通信 9 .表单输入绑定 9.1 . 什么是双向数据绑定 9.2 .为什么要实现数据的双向绑定 9.3 .在表单中使用双向数据绑定 8 .使用Axios实现异步通 ...
- 前端框架Vue------＞第一天学习（2） v-if
API:https://cn.vuejs.org/v2/api/#key 文章目录 5.条件渲染 5.1 . v-if 5.2 . v-else-if 6 .列表渲染 7 .事件监听 5.条件渲染 5 ...
- webpack4 前端框架基础配置实例-解决css分离图片路径问题
1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...
- Hadoop学习笔记（一）从官网下载安装包
Hadoop是一个分布式系统基础架构,由Apache基金会所开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储.要学习Hadoop从下载安装包开始 打开 ...
- OpenTK学习笔记(1)-源码、官网地址
OpenTK源码下载地址:https://github.com/opentk/opentk OpenTK使用Nuget安装命令:OpenTK:Install-Package OpenTK -Versi ...
- Go语言学习笔记——在本地建立一个官网查看
命令行内运行 godoc -http=:8080 运行完成后打开浏览器输入网址:http://localhost:8080能看到一个和官网一模一样的网站,然后查看帮助文档
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- web前端框架之Vue hello world
[博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] http ...
随机推荐
- devops-4：Jenkins基于k8s cloud和docker cloud动态增减节点
Jenkins管理动态节点 上文介绍Jenkins增加静态agent的步骤,除了静态增加外,还有动态管理的功能,两者最大的差异在于动态可以在有job运行时,临时加入一个agent到jenkins ma ...
- 【AGC】构建服务1-云函数示例
前言:上一次笔者给大家带来了AGC领域的远程配置服务的学习.这次我们再继续深化学习AGC的相关知识.在文章开始之前,再给读者简单介绍一下AGC,以免第一次来的读者不了解.所谓AGC就是AppGal ...
- 3.26省选模拟+NOI-ONLINE
今日趣闻: 这三个人都是同机房的,卡最优解(大常数选手不参与)....以至于最优解第一页都是我们机房的(有图为证,共三人) $NOI\ online$ $T1$ 首先模拟一遍记录这个点当前单调栈前面位 ...
- #万答10：mysqldump 是如何实现一致性备份的
万答10:mysqldump 是如何实现一致性备份的 实验场景 MySQL 8.0.25 InnoDB 实验步骤: 先开启 general_log 观察导出执行过程的变化 set global gen ...
- fast json 乱序问题解决过程
解决问题:保存到redis中的jsonstring在转回jsonObject的时候乱序: 解决方案:https://inlhx.iteye.com/blog/2312512 解决过程: 1 看fast ...
- Canvas 笔记目录
Canvas 基础笔记 初次认识 Canvas Canvas 线性图形(一):路径 Canvas 线性图形(二):圆形 Canvas 线性图形(三):曲线 Canvas 线性图形(四):矩形 Canv ...
- 十周周末总结 MySQL的介绍与使用
python 十周周末总结 MySQL的介绍与使用 MySQL字符编码与配置文件 查看数据库的基本信息(用户,字符编码) /s windos下MySQL默认的配置文件 my_default.ini 修 ...
- idea中无法在@Test 之下使用Scanner
//如何解决idea中无法在 @Test 之下使用Scanner@Testpublic void testInsert(){ Scanner scanner = new Scanner(System. ...
- Docker 入门指南
Docker 入门指南 目录 基础概念 安装教程 基本操作 常用安装 构建操作 容器编排 壹.基础概念 什么是Docker? Docker是基于Go开发的应用容器引擎,属于 Linux 容器的一种封装 ...
- MySQL 中的锁机制
介绍锁机制 技术是为了解决问题而生的,锁被用来实现隔离性,保证并发事务的正确性. 两段锁 & 一次封锁 两段锁 数据库遵循的是两段锁协议,将事务分成两个阶段,加锁阶段和解锁阶段(所以叫两段锁) ...