526互联

Vue2学习笔记

发布时间 2023-03-25 23:39:06作者: rustling

VUE官网: https://cn.vuejs.org/
参考教程: https://v2.cn.vuejs.org/v2/guide

快速入门

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Quick Vue Example</title>
  <!-- 引入 Vue 库 -->
  <script src="vue.js"></script>
</head>
<body>
  <!-- 定义 Vue 应用程序的挂载点 -->
  <div id="app">
    <h1>{{ message }}</h1>
  </div>

  <!-- 引入我们的 JavaScript 文件 -->
  <script src="main.js"></script>
</body>
</html>

// main.js
// 创建一个 Vue 实例
var app = new Vue({
    // 定义应用程序的挂载点
    el: '#app',
    // 定义数据属性
    data: {
      message: 'hello Vue!'
    }
  });