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）的更多相关文章

  1. [转]OpenTK学习笔记(1)-源码、官网地址

    OpenTK源码下载地址:https://github.com/opentk/opentk OpenTK使用Nuget安装命令:OpenTK:Install-Package OpenTK -Versi ...

  2. 前端框架Vue------＞第一天学习（3）

    文章目录 8 .使用Axios实现异步通信 9 .表单输入绑定 9.1 . 什么是双向数据绑定 9.2 .为什么要实现数据的双向绑定 9.3 .在表单中使用双向数据绑定 8 .使用Axios实现异步通 ...

  3. 前端框架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 ...

  4. webpack4 前端框架基础配置实例-解决css分离图片路径问题

    1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...

  5. Hadoop学习笔记（一）从官网下载安装包

    Hadoop是一个分布式系统基础架构,由Apache基金会所开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储.要学习Hadoop从下载安装包开始 打开 ...

  6. OpenTK学习笔记(1)-源码、官网地址

    OpenTK源码下载地址:https://github.com/opentk/opentk OpenTK使用Nuget安装命令:OpenTK:Install-Package OpenTK -Versi ...

  7. Go语言学习笔记——在本地建立一个官网查看

    命令行内运行 godoc -http=:8080 运行完成后打开浏览器输入网址:http://localhost:8080能看到一个和官网一模一样的网站,然后查看帮助文档

  8. (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]

    https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...

  9. web前端框架之Vue hello world

    [博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] http ...

随机推荐

  1. 【Maui正式版】创建可跨平台的Maui程序，以及有关依赖注入、MVVM双向绑定的实现和演示

    前言:Maui终于在昨天(2022年8月9日)推送出来了.今儿就迫不及待来把玩一下先. A.我本地已有VS2022,不过版本比较老,此处选择更新.工具 -> 获取功能和更新里面,可以获取到新版本 ...

  2. LuoguP3047 [USACO12FEB]附近的牛Nearby Cows（树形DP，容斥）

    \[f[u][step] = \begin{cases} C[u] & step = 0 \\ (\sum{f[v][step - 1]}) - f[u][step - 2] \cdot (d ...

  3. synchronized原理剖析

    synchronized原理剖析 并发编程存在什么问题? 1️⃣ 可见性 可见性:是指当一个线程对共享变量进行了修改,那么另外的线程可以立即看到修改后的最新值. 案例演示:一个线程A根据 boolea ...

  4. Linux-shell笔记1

    一次执行很多命令,可以用:分割每个命令,依次运行所有命令.但是不是进程列表,要用()包围命令才是进程列表.它们有什么差别呢?进程列表是启动了一个子SHELL来执行的.用echo $BASH_SUBSH ...

  5. [SDOI2012]走迷宫 （强连通分量缩点，动态规划，高斯消元）

    题面 Morenan被困在了一个迷宫里.迷宫可以视为N个点M条边的有向图,其中Morenan处于起点S,迷宫的终点设为T.可惜的是,Morenan非常的脑小,他只会从一个点出发随机沿着一条从该点出发的 ...

  6. C++ IO流_数据的旅行之路

    1. 前言 程序中的数据总是在流动着,既然是流动就会有方向.数据从程序的外部流到程序内部,称为输入:数据从程序内部流到外部称为输出. C++提供有相应的API实现程序和外部数据之间的交互,统称这类AP ...

  7. 通过宏封装实现std::format编译期检查参数数量是否一致

    背景 std::format在传参数量少于格式串所需参数数量时,会抛出异常.而在大部分的应用场景下,参数数量不一致提供编译报错更加合适,可以促进我们更早发现问题并进行改正. 最终效果 // 测试输出接 ...

  8. Python入门系列（二）语法风格

    python缩进 Python使用缩进来表示代码块,例如 if 5 > 2: print("Five is greater than two!") 如果跳过缩进,Python ...

  9. Java方法总结

    什么是方法 何谓方法 就是一个方法只完成一个功能,这样利于后期的扩展 例子: public static void main(String[] args) {    System.out.printl ...

  10. win10电脑自动连接蓝牙设备攻略

    每次在电脑上想连接蓝牙耳机,但不想手动去连接怎么办呢? 自动连接! 其实微软已经解决了这个问题,只要打开蓝牙,他就会自动匹配上次连接的设备 打开设置--->设备勾选 "显示使用&quo ...