Vue.js

Vue.js 是一款用于构建用户界面的渐进式框架。

Vue 的核心特性包括：

  • 声明式渲染
  • 组件化

Vue 的功能：

  • 模板引擎
  • 组件
  • 路由
  • 状态管理器（用于管理数据，提升可伸缩性）
  • 自动化构建

核心基本语法：

第一步：引入 Vue.js

html
1 2 
<!-- 引入 Vue.js 的 CDN 地址 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

第二步：模板引擎代码示例

html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="js/vue.js"></script>
</head>
<body>
   <!-- Vue 是一个前端框架，核心包括模板引擎和声明式渲染，组件增加页面的复用性，
        路由用于前端路由，状态管理器用于管理数据，自动化构建满足需求 -->
   <div id="app"></div>
</body>
</html>

<script>
   // 创建 Vue 实例
   new Vue({
      el: '#app',  // 挂载点
      template: `
         <h1>{{ title }}</h1>
      `,
      data: {
         title: "尴尬"  // 数据
      }
   });
</script>

总结：
模板引擎的基本概念包括：

  1. 获取一批数据（可能来源于用户或后端）。
  2. 动态组合这些数据。
  3. 将组合好的内容插入到页面的特定位置（称为“挂载点”）。
    最终，Vue 会将数据（data）和模板（template）结合，形成应用的用户界面。