清淨
  • Java

    • Java 基础
  • 框架

    • Flyway
    • MapStruct
    • Spring Cloud
  • 中间件

    • Elasticsearch
    • Redis
    • RabbitMQ
    • Kafka
  • 三剑客

    • HTML
    • CSS
    • JavaScript
  • 进阶

    • jQuery
    • ECMAScript6
    • TypeScript
  • Vue

    • Vue2
    • Vue3
    • VuePress
  • Linux
  • Jenkins
  • Maven
  • MySQL
  • 插件工具
  • 代码集成
  • 其它

    • 数据结构与算法
    • 计算机网络
    • 操作系统
    • 设计模式
迁移日志
订阅号
微信订阅号
微信订阅号
GitHub
  • Java

    • Java 基础
  • 框架

    • Flyway
    • MapStruct
    • Spring Cloud
  • 中间件

    • Elasticsearch
    • Redis
    • RabbitMQ
    • Kafka
  • 三剑客

    • HTML
    • CSS
    • JavaScript
  • 进阶

    • jQuery
    • ECMAScript6
    • TypeScript
  • Vue

    • Vue2
    • Vue3
    • VuePress
  • Linux
  • Jenkins
  • Maven
  • MySQL
  • 插件工具
  • 代码集成
  • 其它

    • 数据结构与算法
    • 计算机网络
    • 操作系统
    • 设计模式
迁移日志
订阅号
微信订阅号
微信订阅号
GitHub
  • Vue2

    • 简介
    • 起步
    • Vue 实例
    • Vue 指令
    • 监听数据变化
    • 操作 DOM
    • 组件化
    • 模块化
    • webpack
    • Vue CLI
    • Vue-Router
    • Vuex
    • 事件总线 $bus
    • 混入 Mixin
    • better-scroll
    • Axios
    • Vue 细节补充
    • 项目中遇到的问题

起步

先来看一个最简单的 Vue 案例。

首先,引入 Vue:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.s"></script>

然后编写第一个 Vue 程序:

<!-- Vue入门 声明式渲染 -->
<div id="app">{{ message }}</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  }
})

最后,在浏览器中打开,看看网页中会显示什么呢?

想要编辑此页?
上次更新: 2023/3/18 19:48
贡献者: djf
←简介Vue 实例→
[ 纸上得来终觉浅绝知此事要躬行 ]
Copyright © 2021-present Junfeng Dai
蜀ICP备2021009537号