什么是VUE 创建第一个VUE实例

最新推荐文章于 2024-05-06 13:53:27 发布

斐波娜娜

最新推荐文章于 2024-05-06 13:53:27 发布

阅读量642

点赞数 9

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/christmassss/article/details/135734490

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了Vue框架的基本概念，包括渐进式开发、框架与库的区别，以及如何使用Vue创建第一个实例。通过实例展示了如何在Vue中基于数据渲染用户界面，包括准备容器、引入包、创建Vue实例并配置数据。

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

一、什么是Vue

概念：Vue (读音 /vjuː/，类似于 view) 是一套 构建用户界面 的 渐进式 框架

Vue2官网：Vue.js

1.什么是构建用户界面

基于数据渲染出用户可以看到的界面

2.什么是渐进式

所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点

Vue的两种开发方式：

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

3.什么是框架

所谓框架：就是一套完整的解决方案

举个栗子

如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。

我们只需要在“毛坯房”的基础上，增加功能代码即可。

提到框架，不得不提一下库

库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等
框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

下图是库和框架的对比。

框架的特点：有一套必须让开发者遵守的规则或者约束

咱们学框架就是学习的这些规则官网

二、创建第一个VUE实例

我们已经知道了Vue框架可以基于数据帮助我们渲染出用户界面，那应该怎么做呢？

比如就上面这个数据，基于提供好的msg 怎么渲染后右侧可展示的数据呢？

核心步骤（4步）：

准备容器
引包（官网） — 开发版本/生产版本
创建Vue实例 new Vue()
指定配置项，渲染数据

1. el:指定挂载点
2. data提供数据


  <body>
    <!-- 
  创建Vue实例，初始化渲染
  1. 准备容器 (Vue所管理的范围)
  2. 引包 (开发版本包 / 生产版本包) 官网
  3. 创建实例
  4. 添加配置项 => 完成渲染
-->

    <!-- 不是Vue管理的范围 -->
    <div class="box2">box2 -- {{ count }}</div>
    <div class="box">box -- {{ msg }}</div>
    -----------------------------------------------------
    <!-- Vue所管理的范围 -->
    <div id="app">
      <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
      <h1>{{ msg }}</h1>
      <a href="#">{{ count }}</a>
    </div>

    <!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
      // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
      const app = new Vue({
        // 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
        el: "#app",
        // 通过 data 提供数据
        data: {
          msg: "Hello 娜娜",
          count: 666,
        },
      });
    </script>
  </body>

运行结果如下： box2和box不是Vue管理的容器，所以不能够拿到数据进行渲染

斐波娜娜

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
什么是VUE 创建第一个VUE实例

概念：Vue (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架Vue.js基于数据渲染出用户可以看到的界面所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点所谓框架：就是一套完整的解决方案举个栗子如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上，增加功能代码即可。提到框架，不得不提一下库库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等。
复制链接

扫一扫