初识Vue

最新推荐文章于 2024-06-13 23:47:14 发布

扶苏1002

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量138

点赞数 5

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

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

版权

Vue2 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

一、Vue 是什么
二、vue的特性
二、Vue的两种使用方式
三、创建一个Vue实例

一、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>