查看“Vue3 教程”的源代码

{{DISPLAYTITLE:Vue3 教程}}[[Category:Vue 3 教程|1]]
= Vue3 教程 =

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单，本教程基于 Vue 3.0.5 版本测试。

== 阅读本教程前，您需要了解的知识： ==

* HTML
* CSS
* JavaScript

本教程主要介绍了 Vue3.x 版本的使用。

== 第一个实例 ==

== Vue 3.0 实例 ==

<sample title="" desc="" lang="html" hererun="1">
<div id="hello-vue" class="demo">
  {{ message }}
</div>
 </sample>
<run name=""> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 小白教程(xiaobai.wang)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html> </run>
点击 &quot;尝试一下&quot; 按钮查看在线实例

== 参考资料： ==

官方网站：https://v3.vuejs.org/

中文文档: https://staging-cn.vuejs.org/guide/introduction.html

Webpack 入门教程：https://www.xiaobai.wang/w3cnote/webpack-tutorial.html