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. Frida使用文档（一）安装、启动、运行、关闭

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删!企鹅:1033383881 Frida使用 ...

  2. ShardingSphere-JDBC实战

    一.环境准备 1.数据库 创建2个库2个表: xdclass_shop_order_0 product_order_0 product_order_1 ad_config product_order_ ...

  3. 使用Fiddler劫持网络资源为前端开发助力（示例：Dynamic CRM 表单开发 也能热更新？ ）

    背景: 使用过vue开发的童鞋应该都知道,在开发vue项目的过程中,有个叫"热更新"的功能特别爽,在传统html开发到初次接触vue时,才发现原来前端开发可以这么香.热更新的表现形 ...

  4. 在 WXML 中直接使用 JS 代码

    因为有在 Vue 下开发应用的习惯,希望能够直接在 wxml 中的标签里使用 JS 代码.微信小程序其实也是可以的,在使用 JS 代码的时候需要用{{}}来包裹起来. 以下是在 wxml 中使用 JS ...

  5. [HNOI2011]卡农 （数论计数，DP）

    题面 原题面 众所周知卡农是一种复调音乐的写作技法,小余在听卡农音乐时灵感大发,发明了一种新的音乐谱写规则. 他将声音分成 n n n 个音阶,并将音乐分成若干个片段.音乐的每个片段都是由 1 1 1 ...

  6. java基础———break，continue

    break通常用在循环语句之中用来跳出循环: continue终止某次循环过程,跳过尚未执行的语句:接着执行下次是否执行循环的判定:

  7. mysql 重复执行创建表、新增字段脚本

    #bigint 可重复执行创建表脚本 1 Create Table If Not Exists `库名`.`表名`( 2 字段列表 3 ) ENGINE=InnoDB DEFAULT CHARSET= ...

  8. HCNP Routing&Switching之IP安全

    前文我们了解了DHCP安全相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16637627.html:今天我们来聊一聊IP安全相关话题: 技术背景 随着 ...

  9. Windows服务器的重复数据删除功能

    自从Windows server 2012开始,微软在系统层面提供了重复数据删除功能.重复数据删除是为了文件服务器.虚拟化服务器等设计的.其实只要是存放的文件有大部分内容是相同的就可以发挥很好的效果. ...

  10. 在Windows Server 2019中配置多元密码策略

    长久以来,微软活动目录中的账户只能配置同一个密码策略.上到管理员账户,下到普通用户的密码策略都是一样的.而且密码策略只能在域级别配置生效.OU级别的密码策略只会对该OU中计算机的本地账户生效.通常认为 ...