初识Vue

最新推荐文章于 2024-11-23 10:33:05 发布

扶苏1002

最新推荐文章于 2024-11-23 10:33:05 发布

阅读量163

点赞数 5

分类专栏： Vue2 文章标签： vue.js 前端前端框架

本文链接：https://blog.csdn.net/qq_44741577/article/details/135953864

版权

Vue2 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的基本概念，包括其作为用户界面构建框架的特点，数据驱动视图的机制，以及两种主要的使用方式（核心包和工程化）。还详细讲解了如何在HTML中创建一个简单的Vue实例，包括引用CDN和VueCLI的使用。

摘要由CSDN通过智能技术生成

一、Vue 是什么

概念

Vue 是一个用于①构建用户界面的②渐进式③框架

构建用户界面：基于数据驱动页面
渐进式：循序渐进的学习
框架:一套完整的项目解决方案，提升开发效率个(理解记忆规则)
Vue2官网

①构建用户界面

②渐进式

③框架

二、vue的特性

在这里插入图片描述

特性	作用	说明
数据驱动视图	数据的变化会驱动视图自动更新	页面结构会被vue自动渲染
双向数据绑定	form表单负责采集数据，Ajax负责提交数据到js数据中	vue自动获取表单数据

二、Vue的两种使用方式

① Vue 核心包开发
场景：局部模块改造
②Vue 核心包&Vue 插件工程化（Vue Cli）
场景：整站开发

三、创建一个Vue实例

3.1. 核心步骤

3.2. Vue的cdn线上地址

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

3.3. 创建Vue实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初识Vue</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!",
        },
      });
    </script>
  </body>
</html>