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. Apache DolphinScheduler新一代分布式工作流任务调度平台实战-中

    @ 目录 架构设计 总体架构 启动流程图 架构设计思想简述 负载均衡 缓存 实战使用 参数 参数优先级 内置参数 基础内置参数 衍生内置参数 本地参数和全局参数 工作流传参 数据源管理 支持数据源 创 ...

  2. 有趣的特性：CHECK约束

    有趣的特性:CHECK约束 功能说明 在MySQL 8.0.16以前, CREATE TABLE允许从语法层面输入下列CHECK约束,但实际没有效果: CHECK (expr) 在 MySQL 8.0 ...

  3. 如何实现 System.out.println("a") 显示 b

    今天看到一篇文章不用反射,能否交换两个字符串的值. 心想字符串常量在常量池里面,是在就算用了反射也交换不了吧.转念一想,不对,字符串常量虽然本身在常量池里面,但是它依然是个对象,那么 private ...

  4. LuoguP1016 旅行家的预算 （贪心）

    胡一个错误代码都能有75pts 忘了怎么手写deque其实是懒 #include <cstdio> #include <iostream> #include <cstri ...

  5. java-Collection,List简单使用与方法/（集合使用-中）

    1.1集合只存放引用类型的元素并且集合存放的时元素的引用(地址)1.2新循环遍历集合 Collection c = new ArrayList(); c.add("one"); c ...

  6. Excel 运算符（三）：文本连接符

    文本连接符&用来合并文本串.比如,连接"计算机"和"基础"两个文本串:"计算机基础"&"基础",最终结果 ...

  7. 第六十六篇：Vue的watch侦听器

    好家伙,哇吃侦听器 1.watch侦听器 watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作 1.1.侦听器的基本用法 <body> <div id=" ...

  8. 【读书笔记】C#高级编程 第十五章 反射

    (一)在运行期间处理和检查代码 自定义特性允许把自定义元数据与程序元素关联起来.反射是一个普通术语,它描述了在运行过程中检查和处理程序元素的功能.例如,反射允许完成的任务: 枚举类型的成员 实例化新对 ...

  9. 后缀自动机（SAM）+广义后缀自动机（GSA）

    经过一顿操作之后竟然疑似没退役0 0 你是XCPC选手吗?我觉得我是! 稍微补一点之前丢给队友的知识吧,除了数论以外都可以看看,为Dhaka和新队伍做点准备... 不错的零基础教程见 IO WIKI ...

  10. 华南理工大学 Python第3章课后小测-1

    1.(单选)给出如下代码 s = 'Hello scut' print(s[::-1]) 上述代码的输出结果是(本题分数:4)A) HelloB) Hello scutC) olleH tucsD)  ...