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

一、什么是Vue

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

Vue2官网:Vue.js

1.什么是构建用户界面

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

2.什么是渐进式

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

Vue的两种开发方式:
  1. Vue核心包开发
    场景:局部模块改造
  2. Vue核心包&Vue插件&工程化
    场景:整站开发

3.什么是框架

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

举个栗子

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

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

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

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

下图是 库 和 框架的对比。

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

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

二、创建第一个VUE实例 

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

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

核心步骤(4步):

  1. 准备容器
  2. 引包(官网) — 开发版本/生产版本
  3. 创建Vue实例  new Vue()
  4. 指定配置项,渲染数据
    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管理的容器,所以不能够拿到数据进行渲染

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/639807.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 基础技术——addView 流程

笔者希望做一个系列&#xff0c;整理 Android 基础技术&#xff0c;本章是关于 addView 在了解 addView 流程之前&#xff0c;先回答下以下几个问题&#xff1a; PhoneWindow是什么时候创建的&#xff1f; DectorView 是什么&#xff1f; DectorView 是什么时候创建的&#xf…

ABS10-ASEMI智能LED灯具专用ABS10

编辑&#xff1a;ll ABS10-ASEMI智能LED灯具专用ABS10 型号&#xff1a;ABS10 品牌&#xff1a;ASEMI 封装&#xff1a;ABS-4 最大重复峰值反向电压&#xff1a;1000V 最大正向平均整流电流(Vdss)&#xff1a;1A 功率(Pd)&#xff1a;50W 芯片个数&#xff1a;4 引脚数…

曲线生成 | 图解三次样条曲线生成原理(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 什么是样条&#xff1f;2 三次样条曲线原理2.1 曲线插值2.2 边界条件2.3 系数反解 3 算法仿真3.1 ROS C仿真3.2 Python仿真3.3 Matlab仿真 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细…

研学活动报名系统源码开发方案

一、项目背景与目标 &#xff08;一&#xff09;项目背景&#xff1a; 随着教育水平的提高和人们对综合素质培养的需求增加&#xff0c;研学活动作为一种教育方式受到了广大家长和学生的青睐。为了更好地组织和管理研学活动&#xff0c;需要建立一个研学活动报名系统&#xf…

C#,入门教程(22)——函数的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(21)——命名空间&#xff08;namespace&#xff09;与程序结构的基础知识https://blog.csdn.net/beijinghorn/article/details/124140653 一、函数的基本概念 一个软件的结构大体如下&#xff1a; 大厦application: a plaza { --…

【C++】stack与queue的模拟实现

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 前言 stack与queue的实现比较简…

轮胎侧偏刚度线性插值方法

一、trucksim取数据 步骤一 步骤二 二、数据导入到matlab中 利用simulink的look up table模块 1是侧偏角&#xff1b;2是垂直载荷&#xff1b;输出是侧向力。 侧向力除以侧偏角就是实时的侧偏刚度。

【LeetCode】每日一题 2024_1_21 分割数组的最大值(二分)

文章目录 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01;题目&#xff1a;分割数组的最大值题目描述代码与解题思路 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 今天是 hard&#xff0c;难受&#xff0c;还好有题解大哥的清晰讲解 题目&a…

C#实现基于Word保护性模板文件的修改

目录 制作一个保护性模板文件 给文件设置保护密码 设计模板内容 限制编辑 进一步的需求 范例运行环境 Office DCOM 配置 设计实现 进一步修改模板文件 设置和取消保护 遍历WORD内容控件 总结 制作一个保护性模板文件 在类似一些OA的自动化处理或审批类系统里&a…

【 文本到上下文 #4】NLP 与 ML

一、说明 欢迎回到我们的 NLP 博客系列&#xff01;当我们进入第四部分时&#xff0c;焦点转移到机器学习 &#xff08;ML&#xff09; 和自然语言处理 &#xff08;NLP&#xff09; 之间的动态相互作用上。在本章中&#xff0c;我们将深入探讨 ML 和 NLP 的迷人协同作用&#…

【Linux】Shell 命令以及运行原理

Shell 命令以及运行原理 当用户登录 Linux 系统的时候&#xff0c;系统会给用户创建一个新的进程&#xff0c;一般叫做 bash&#xff08;命令行解释器&#xff09;。 Linux 严格意义上说的是一个操作系统&#xff0c;我们称之为 “核心&#xff08; kernel &#xff09;” &…

Kafka 问题排查

订单宽表数据不同步 事情的起因是专员在 ze app 上查不到订单了&#xff0c;而订单数据是从 mysql 的 order_search_info 查询的&#xff0c;order_search_info 表的数据是从 oracel 的 BZ_ORDER_INFO 表同步过来的&#xff0c;查不到说明同步有问题 首先重启&#xff0c;同步…

0004.电脑开机提示按F1

常用的电脑主板不知道什么原因&#xff0c;莫名其妙的启动不了了。尝试了很多方法&#xff0c;没有奏效。没有办法我就只能把硬盘拆了下来&#xff0c;装到了另一台电脑上面。但是开机以后却提示F1&#xff0c;如下图&#xff1a; 根据上面的提示&#xff0c;应该是驱动有问题…

Spring Security工作原理(三)

在认证之间保存请求 如处理安全异常中所示,当请求没有认证且需要认证资源时,需要保存请求以便在认证成功后重新请求受保护的资源。在Spring Security中,这是通过使用RequestCache实现来保存HttpServletRequest来实现的。 RequestCache HttpServletRequest被保存在Request…

可替代Allegro A3901的国产GC3901 5V H 桥驱动器,驱动电流能力更强,且低成本,大电流

步进电机驱动的应用方案目前市场上大多选用国外品牌的电机驱动器&#xff0c;其中ALLEGRO的A3901在这一块的应用很广泛。但是由于市场越来越成熟&#xff0c;当前对于产品开发成本要求也越来越低&#xff0c;国产品牌也推出了相应的镜头驱动器&#xff0c;因此ALLEGRO的A3901已…

Win10/11中VMware Workstation设置网络桥接模式

文章目录 一、添加VMware Bridge Protocol服务二、配置桥接参数1.启用系统Device Install Service服务2.配置VMware 需要确认物理网卡是否有添加VMware Bridge Protocol服务 添加VMware Bridge Protocol服务 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参…

枚举类型有着一篇足以

✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;橘橙黄又青-CSDN博客 1.关键字enum的定义 enum是C语言中的一个关键字&#xff0c;enum叫枚举数据类型&#…

helm 一键部署

helm HPA rancher 安全机制 k8s的核心功能&#xff1a;组件功能 k8s的网络 命令行基本的增删改查 deployment statefulsets 挂载卷&#xff1a;emptyDir&#xff0c; hostPath&#xff0c; nfs pv pvc 动态pvc必问 configmap ingress hpa pod 的自动伸缩 helm 什么是hel…

python opencv 图片缺陷检测(讲解直方图以及相关系数对比法)

一、利用直方图的方式进行批量的图片缺陷检测&#xff08;方法简单&#xff09; 二、步骤&#xff08;完整代码见最后&#xff09; 2.1灰度转换&#xff08;将原图和要检测对比的图分开灰度化&#xff09; 灰度化的作用是因为后面的直方图比较需要以像素256为基准进行相关性比…

Vue2中CesiumV1.113.0加载离线地图

Vue2中CesiumV1.113.0加载离线地图&#xff0c;本文以天地图为例。 1.使用nodejs获取天地图 新建nodejsdownmap项目文件夹&#xff0c;初始化项目 npm init -y src/index.js // An highlighted block var Bagpipe require(bagpipe) var fs require("fs"); var r…