【Vue简介+搭建Vue开发环境+Hello小案例】

Vue简介+搭建Vue开发环境+Hello小案例

  • 1 Vue简介
  • 2 搭建Vue开发环境
  • 3 Hello小案例

1 Vue简介

  • Vue是一套用于构建用户界面的渐进式JavaScript框架。(渐进式:Vue可以自底向上逐层的应用<简单应用:只需要一个轻量小巧的核心库><复杂应用:可以引入各式各样的Vue插件>)
  • Vue特点:
    1> 采用组件化模式,提高代码复用率、且让代码更好维护。
    在这里插入图片描述
    2> 声明式编码,让编码人员无需直接操作DOM,提高开发效率。
    在这里插入图片描述
    3> 使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 学习Vue之前要掌握的JavaScript基础知识:ES6语法规范;ES6模块化;包管理器;原型、原型链;数组常用方法;axios;promise…
  • Vue2官网:https://v2.cn.vuejs.org/
  • Vue3官网:https://cn.vuejs.org/

2 搭建Vue开发环境

  • 步骤一:学习 -> 教程 -> 安装 -> 直接用<script>引入 -> 点击下载
    在这里插入图片描述
  • 步骤二:新建两个文件夹
    在这里插入图片描述
  • 步骤三:将下载的两个js文件放入JS文件夹内,新建html文件并引入Vue
    在这里插入图片描述
  • 步骤四:安装Vue Devtools:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 步骤五
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

3 Hello小案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识Vue</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!--总结初识Vue:1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;3.root容器里的代码被称为【Vue模板】;4.Vue实例和容器是一一对应的;5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;注意区分:js表达式 和 js代码(语句)1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:(1). a(2). a+b(3). demo(1)(4). x === y ? 'a' : 'b'2.js代码(语句)(1). if(){}(2). for(){}--><!-- 准备好一个容器 --><div id="root"><h1>Hello!{{name}},{{address}},{{Date.now()}}</h1> <!-- 花括号是插值语法 --></div><script>Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示// 创建Vue实例new Vue({el:'#root', // el是element元素的简称 用于指定当前Vue实例为哪个容器服务,值通常为CSS选择器字符串data:{ // data中用于存储数据,数据供el所指定的容器使用,值暂时先写成一个对象name:'小王',address:'陕西'}}) // 里面的对象为配置对象</script>
</body>
</html>

在这里插入图片描述

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

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

相关文章

tp8 Editor.md

Editor.md - 开源在线 Markdown 编辑器 放于public文件夹下 html代码&#xff1a; <div class"layui-col-md12" id"content"><textarea name"content" placeholder"详情" class"layui-textarea">{notempty nam…

05-Zookeeper典型使用场景实战

上一篇&#xff1a;04-Zookeeper集群详解 1. Zookeeper 分布式锁加锁原理 如上实现方式在并发问题比较严重的情况下&#xff0c;性能会下降的比较厉害&#xff0c;主要原因是&#xff0c;所有的连接都在对同一个节点进行监听&#xff0c;当服务器检测到删除事件时&#xff0c…

目标追踪学习经验总结

标题目标追踪算法学习经验总结   最近对目标追踪算法进行了学习&#xff0c;以下是我的学习经验&#xff0c;如有不对之处&#xff0c;欢迎大家指正。 1、简介 1.1 定义 目标跟踪是通过分析视频图片序列&#xff0c;对检测出的各个候选目标区域实施匹配&#xff0c;定位出这…

nat综合实验

路漫漫其修远兮,吾将上下而求索。 实验目的如图 实验思路&#xff1a;配置内网&#xff0c;再配置外网&#xff0c;再做nat clien1配置 clien2配置 pc3配置 lsw1配置 sysname lsw1 # vlan batch 10 20 30 # interface MEth0/0/1 # interface Eth-Trunk1port link-type trunkp…

数据结构——排序

排序算法 前言一、认识排序排序的概念常见的排序算法排序实现的接口 二、常见排序算法的实现插入排序直接插入排序希尔排序 选择排序直接选择排序堆排序 交换排序冒泡排序 三、各个排序的效率比较四、完整代码演示&#xff1a;shell_insert.hshell_insert.ctest.c 总结 前言 来…

怎样在CSDN插入代码块 怎么变色?

添加代码块&#xff0c;通常有三种方式&#xff1a; 文章目录 ①点击 工具栏中的代码块 代码块 </>&#xff0c;② 快捷键 ctrlshiftk③ 先粘贴上代码&#xff0c;在选中 ctrlshiftk4 如果代码没有变彩色 ①点击 工具栏中的代码块 代码块 </>&#xff0c; 例如 选…

Docker版部署RocketMQ开启ACL验证

一、拉取镜像 docker pull apache/rocketmq:latest 二、准备挂载目录 mkdir /usr/local/rocketmq/data mkdir /usr/local/rocketmq/conf 三、运行 docker run \ -d \ -p 9876:9876 \ -v /usr/local/rocketmq/data/logs:/home/rocketmq/logs \ -v /usr/local/rocketmq/data…

Redis之zset类型

文章目录 Redis之zset类型1. 添加元素/获取集合中元素的数量2. 按照元素分数从小到大的顺序返回索引从start到stop之间的所有元素3. 获取元素的分数4. 删除元素5. 获取指定分数范围的元素6. 增加某个元素的分数7. 获得指定分数范围内的元素个数8. 获取元素的排名9. 按照排名范围…

Hive【Hive(二)DML】

启动 hive 命令行&#xff1a; hive DML 数据操作 1、数据导入 1.1、向表中装载数据&#xff08;load&#xff09; 语法&#xff1a; hive> load data [local] inpath 数据的path [overwrite] into table student [partition (partcol1val1,…)];&#xff08;1&#x…

轻松上手Docker:学习如何创建和运行自己的Docker容器

文章目录 轻松上手Docker&#xff1a;学习如何创建和运行自己的Docker容器容器的介绍Docker的技术架构容器的工作机制&#xff08;Docker&#xff09;容器的关键技术 - NamespaceNamespace隔离说明 容器的关键技术 - CgroupDocker环境搭建1&#xff09;安装基础软件包2&#xf…

十四,间接漫反射用到球体中

间接光照分为间接漫反射和间接镜面反射。 辐照度图是用来适用于间接漫反射的。 直射光也有漫反射&#xff0c;对比下两者。 直接光kD * albedo / PI * radiance * NdotL&#xff1b;其中radiance * NdotL是光照, 间接光&#xff1a; kD * texture(irradianceMap, N).rgb* al…

SD-MTSP:萤火虫算法(FA)求解单仓库多旅行商问题MATLAB(可更改数据集,旅行商的数量和起点)

一、萤火虫算法&#xff08;FA&#xff09;简介 萤火虫算法(Firefly Algorithm&#xff0c;FA)是Yang等人于2009年提出的一种仿生优化算法。 参考文献&#xff1a;田梦楚, 薄煜明, 陈志敏, et al. 萤火虫算法智能优化粒子滤波[J]. 自动化学报, 2016, 42(001):89-97. 二、单仓…

八大排序详解

目录 1.排序的概念及应用 1.1 排序的概念 1.2 排序的应用 1.3 常见的排序算法 2.常见排序算法的实现 2.1 直接插入排序 2.1.1 基本思想 2.1.2 动图解析 2.1.3 排序步骤&#xff08;默认升序&#xff09; 2.1.4 代码实现 2.1.5 特性总结 2.2 希尔排序 2.2.1 基本思…

HarmonyOS开发:封装一个便捷的Log工具类

前言 日志打印&#xff0c;没什么好说的&#xff0c;系统已给我们提供&#xff0c;且调用也是非常的简单&#xff0c;我们封装的目的&#xff0c;一是扩展&#xff0c;打印一些不常见的类型&#xff0c;比如格式化json&#xff0c;使得日志看起来比较好看&#xff0c;二是&…

GEO生信数据挖掘(二)下载基因芯片平台文件及注释

检索到目标数据集后&#xff0c;开始数据挖掘&#xff0c;本文以阿尔兹海默症数据集GSE1297为例 目录 下载平台文件 1.AnnotGPL参数改为TRUE,联网下载芯片平台的soft文件。&#xff08;国内网速奇慢经常中断&#xff09; 2.手工去GEO官网下载 转换芯片探针ID为gene name 拓…

智能合约经典漏洞案例,xSurge 重入漏洞+套利 综合运用

智能合约经典漏洞案例&#xff0c;xSurge 重入漏洞套利 综合运用 1. 事件介绍 xSurge 被攻击事件发生在 2021-08-16 日&#xff0c;距离今天已经近 1 年了&#xff0c;为什么还会选择这个事件进行分析&#xff1f;主要是这个攻击过程很有意思&#xff0c;有以下的几点思考 使…

UG\NX二次开发 通过点云生成曲面 UF_MODL_create_surf_from_cloud

文章作者:里海 来源网站:《里海NX二次开发3000例专栏》 感谢粉丝订阅 感谢 Rlgun 订阅本专栏,非常感谢。 简介 有网友想做一个通过点云生成曲面的程序,我们也试一下 效果 代码 #include "me.hpp" /*HEAD CREATE_SURF_FROM_CLOUD CCC UFUN */

【2023年11月第四版教材】第15章《风险管理》(合集篇)

第15章《风险管理》&#xff08;合集篇&#xff09; 1 章节说明2 管理基础2.1 风险的属性2.2 风险的分类★★★2.3 风险成本★★★2.4 管理新实践 3 管理过程4 管理ITTO汇总★★★5 过程1-规划风险管理6 过程2-识别风险6.1 识别风险★★★6.2 数据收集★★★6.3 数据分析★★★…

基于微信小程序快递取件上门预约服务系统设计与实现(开题报告+任务书+源码+lw+ppt +部署文档+讲解)

文章目录 前言运行环境说明用户的主要功能有&#xff1a;管理员的主要功能有&#xff1a;具体实现截图详细视频演示代码参考论文参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;…

范数Norm-衡量向量大小的方法

性质 非负性: 范数的值总是非负的,且当且仅当向量全为零时,范数的值为零。 齐次性: 对于任意实数α,有 三角不等式: 对于任意向量x和y,有 常见范数 L1: 向量所有元素绝对值的和,权重稀疏 L2:欧几里得范数,权重平滑 无穷范数:表示向量中最大的元素 为什么使用范…