前端框架学习之 搭建vue2的环境 书写案例并分析

目录

搭建vue的环境

Hello小案例

分析案例


搭建vue的环境

官方指南假设你已经了解关于HTML CSS 和JavaScript的中级知识

如果你刚开始学习前端开发

将框架作为你的第一步可能不是最好的主意

掌握好基础知识再来吧

之前有其他框架的使用经验会有帮助

但这不是必需的

最开始学习vue 不推荐直接用脚手架 cli

我们推荐两种安装vue的方式

第一种是直接用< script >< /script >标签引入

第二种使用NPM

我们采用直接引入的方式

Vue 2 已经终止支持且不再维护。 请升级到 Vue 3 或了解有关 Vue 2 终止支持 (EOL) 的信息。

下载 放入

引入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><!-- 引入 vue --><script type="text/javascript" src="./js/vue.js"></script></head><body></body><script></script></html>

看一眼控制台

我们在控制台输入Vue

找到Vue这个函数

安装一个脚手架

我们在国内的网络是访问不了谷歌商店的

我们选择的是引入本地文件

我们可以手动添加扩展程序

这时候我们发现

控制台之前那个警告

提醒我们要安装vue的Detools

脚手架

我们还可以关闭这个提示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识vue</title><!-- 引入 vue --><script type="text/javascript" src="./js/vue.js"></script></head><body><script type="text/javascript">Vue.config.productionTip=false;</script></body></html>

Hello小案例

我们在前端这样书写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识vue</title><!-- 引入 vue --><script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root"><h1>Hello World</h1></div><script type="text/javascript"><!--阻止vue在启动时生成生产提示-->Vue.config.productionTip=false;</script></body></html>

这边报错

查看具体信息

找127.0.0.1 本机的5500服务器

去要页前图标

我们在vscode里面有这个选项

默认就是在本机的5500这个端口上开了一个服务器

并且把当前文件整合到这个服务器上去

证实我们的想法

建立联系

Vue容器和div

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识vue</title><!-- 引入 vue --><script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root"><h1>Hello World</h1></div><script type="text/javascript">//阻止 Vue 在启动时生成生产提示Vue.config.productionTip=false;//创建 Vue 实例 const x=new Vue({//用于指定当前 Vue 实例为哪个容器服务 值通常为 css 选择器字符串el:'#root'})</script></body></html>

我们为什么不把这个World

转化成一个数据模型

我们只负责把数据维护好 那样用到数据的地方自然还会改变

我们在script标签里面修改

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识vue</title><!-- 引入 vue --><script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root"><!-- Vue 插值语法-->><h1>Hello , {{name}}</h1></div><script type="text/javascript">//阻止 Vue 在启动时生成生产提示Vue.config.productionTip=false;//创建 Vue 实例 new Vue({//用于指定当前 Vue 实例为哪个容器服务 值通常为 css 选择器字符串el:'#root',//data 中用于存储数据 数据供 el 所指定的容器去使用//数值我们暂时先写成一个对象data:{name:'尚硅谷',}})</script></body></html>

浏览器

root容器里面的代码被称为Vue模版

我们来看一看

先有的是上面的div标签里的容器

然后才有Vue实例

容器知道后把实例拿过来

解析

然后扫描有没有自己设计的特殊语法

然后把name填到里面

就生成了全新的div 标签为root的容器

再把解析完的东西重新加载到页面上 替换到先前的东西

解析后就成为了模版 一个正常的html片段

分析案例

如果创建两个容器

标签都是root

那么是否这两个容器都能被Vue接管呢

然而我们的页面却不这么认为

Vue实例并没有解析下一个容器

我们换一种思路

假如只有一个容器

我们由两个Vue实例

接管的区域都是标签为root

那么会出现什么情况呢

浏览器

这边报错

Vue找不到元素root 在37行

再看这个

一个容器只能被一个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><!-- 引入 vue --><script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root"><!-- Vue 插值语法--><h1>Hello , {{name}},{{adderss}}</h1></div><script type="text/javascript">//阻止 Vue 在启动时生成生产提示Vue.config.productionTip=false;//创建 Vue 实例 new Vue({//用于指定当前 Vue 实例为哪个容器服务 值通常为 css 选择器字符串el:'#root',//data 中用于存储数据 数据供 el 所指定的容器去使用//数值我们暂时先写成一个对象data:{name:'尚硅谷',adderss:'北京昌平',}})</script></body></html>

浏览器显示

Vue实例有一个

但是Vue里面可能有很多东西

方框中包裹的内容

必须写成js中的表达式

以后我们就不需要操作dom了

我们找一下Vue的开发者工具

root代表的是根

Vue实例

 

总结

个人号推广

博客主页

朱道阳-CSDN博客

Web后端开发

https://blog.csdn.net/qq_30500575/category_12624592.html?spm=1001.2014.3001.5482

Web前端开发

https://blog.csdn.net/qq_30500575/category_12642989.html?spm=1001.2014.3001.5482

数据库开发

https://blog.csdn.net/qq_30500575/category_12651993.html?spm=1001.2014.3001.5482

项目实战

https://blog.csdn.net/qq_30500575/category_12699801.html?spm=1001.2014.3001.5482

算法与数据结构

https://blog.csdn.net/qq_30500575/category_12630954.html?spm=1001.2014.3001.5482

计算机基础

https://blog.csdn.net/qq_30500575/category_12701605.html?spm=1001.2014.3001.5482

回忆录

https://blog.csdn.net/qq_30500575/category_12620276.html?spm=1001.2014.3001.5482

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

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

相关文章

JDK垃圾回收机制和垃圾回收算法

查看java相关信息 java -XX:PrintCommandLineFlags -version UseParallelGC 即 Parallel Scavenge Parallel Old,再查看详细信息 内存分配策略 1. 对象优先在 Eden 分配 大多数情况下&#xff0c;对象在新生代 Eden 区分配&#xff0c;当 Eden 区空间不够时&#xff0c;发…

PX4 UM982 配合F9P Base 进行 RTK 定位

UM982是新兴的常见双天线GPS模块&#xff0c;支持双天线定向&#xff0c;RTK功能&#xff0c;PX4也引入了对其的支持&#xff0c;需要按需额外设置 官方手册号称直接用F9P做地面站&#xff0c;搭配QGC使用就能进行RTK定位 但是经过实践&#xff0c;发现这样是进不了RTK模式的…

Docker---最详细的服务部署案例

提供python服务的docker一键部署&#xff0c;示例已配置负载均衡&#xff0c;不需要的在nginx.conf和docker-compose注释相关代码即可 文件结构 1、dockerfile # 服务的dockerfile# 服务依赖的镜像 FROM python:3.7# 设置容器内服务的工作目录 WORKDIR /app# 复制当前文件夹所…

基于Rspack实现大仓应用构建提效实践|得物技术

一、实践背景 随着项目的逐步迭代&#xff0c;代码量和依赖的逐渐增长&#xff0c;应用的构建速度逐步进入缓慢期。以目前所在团队的业务应用来看&#xff08;使用webpack构建&#xff09;&#xff0c;应用整体构建耗时已经普遍偏高&#xff0c;影响日常开发测试的使用效率&am…

护网--2

实验要求&#xff1a; 1、办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 2、分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的http服务器 3、多出口环境基于带宽比例进行选路&#xff0c;但是&#xff0c;…

实现keepalive+Haproxyde 的高可用

需要准备五台实验机 一台客户机&#xff1a;test1 两台&#xff1a;一主一备的实验机&#xff1a;test2 test3 两台真实服务器&#xff1a;nginx1 nginx2 实验 首先在两台实验机上安装Haproxy 安装依赖环境&#xff0c;并将Haproxy的包进行解压处理 yum install -y pcre…

nodejs安装部署运行vue前端项目

文章目录 1.安装nodejs2.安装Vue CLI1.配置npm镜像源&#xff1a;2.安装Vue CLI&#xff1a;3.创建Vue项目4.启动Vue项目5.Express 1.安装nodejs Node.js 是一个免费、开源、跨平台的 JavaScript 运行时环境&#xff0c;它让开发人员能够创建服务器、Web 应用、命令行工具和脚…

【自动驾驶汽车通讯协议】UART通信详解:理解串行数据传输的基石

文章目录 0. 前言1. 同步通讯与异步通讯1.1 同步通信1.2 异步通信 2. UART的数据格式3. 工作原理3.1 波特率和比特率3.2 UART的关键特性 4. UART在自动驾驶汽车中的典型应用4.1 UART特性4.2应用示例 5. 结语 0. 前言 按照国际惯例&#xff0c;首先声明&#xff1a;本文只是我自…

xlive.dll丢失怎么办,xlive.dll文件的主要用途

xlive.dll丢失怎么办&#xff1f;目前是有很多方法可以解决这个xlive.dll丢失的问题的&#xff0c;只要你仔细的去了解xlive.dll这个文件&#xff0c;至于使用哪种方法&#xff0c;主要还是看你的实际情况&#xff0c;因为情况不同选择使用的方法也是不一样的&#xff0c;下面一…

底软驱动 | Linux虚拟内存

为了更有效的管理内存并且少出错&#xff0c;现代操作系统提供了一种对主存的抽象概念&#xff0c;叫做虚拟内存(VM)。虚拟内存提供了三个重要的能力: 1.它将主存(物理内存)看成是一个存储在磁盘上的地址空间的高速缓存&#xff0c;在主存中只保留活动区域&#xff0c;并且根据…

openEuler 安装 podman 和 podman compose

在 openEuler 22.03 LTS SP4 中&#xff0c;你可以使用 dnf 包管理器来安装 Podman 和 Podman Compose。openEuler 默认使用 dnf 作为包管理器&#xff0c;所以这是安装软件的首选方式。 关于 openEuler 22.03 LTS SP4 下载地址&#xff1a; https://www.openeuler.org/zh/dow…

【256 Days】我的创作纪念日

目录 &#x1f33c;01 机缘 &#x1f33c;02 收获 &#x1f33c;03 日常 &#x1f33c;04 成就 &#x1f33c;05 憧憬 最近收到官方来信&#xff0c; 突然发现&#xff0c;不知不觉间&#xff0c;距离发布的第一篇博客已过256天&#xff0c;这期间我经历了春秋招、毕业答辩…

Access denied for user ‘root‘@‘localhost‘ (using password: YES)解决办法

在Spring配置数据源时&#xff0c;当使用Spring容器加载druid.properties数据库连接池配置文件时&#xff0c;容易碰到create connection SQLException, url: jdbc:mysql://127.0.0.1:3306/mydbs, errorCode 1045, state 28000 java.sql.SQLException: Access denied for user …

破解YouTube限制:保姆级教程,轻松查看博主邮箱

近期YouTube取消了博主的邮箱展示&#xff0c;这造成了不小的轰动&#xff0c;给想要联系博主的粉丝和想要寻求网红合作的品牌都带来了极大的不便。但这难不倒万能的网友&#xff01;最新发现&#xff0c;通过一串神秘代码可以在YouTube上查看到博主的邮箱&#xff0c;这里Nox聚…

CycleGAN深度学习项目

远程仓库 leftthomas/CycleGAN: A PyTorch implementation of CycleGAN based on ICCV 2017 paper "Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks" (github.com) 运行准备 Anaconda 安装需要的库 指令 pip install panda…

LPRNet 车牌识别部署 rk3588(pt-onnx-rknn)包含各个步骤完整代码

虽然车牌识别技术很成熟了&#xff0c;但完全没有接触过。一直想搞一下、整一下、试一下、折腾一下&#xff0c;工作之余找了一个简单的例子入个门。本博客简单记录一下 LPRNet 车牌识别部署 rk3588流程&#xff0c;训练参考 LPRNet 官方代码。 1、导出onnx   导出onnx很容易…

【postgresql】权限(Privileges)

权限&#xff08;privileges&#xff09;是决定用户或角色可以对数据库对象&#xff08;如表、视图、序列和函数&#xff09;执行哪些操作的许可。权限对于维护安全性和控制对数据的访问至关重要。 权限分类 在 PostgreSQL 中&#xff0c;权限分为以下几种&#xff1a; SELEC…

数据库基本查询(表的增删查改)

一、增加 1、添加信息 insert 语法 insert into table_name (列名) values (列数据1&#xff0c;列数据2&#xff0c;列数据3...) 若插入时主键或唯一键冲突就无法插入。 但如果我们就是要修改一列信息也可以用insert insert into table_name (列名) values (列数据1&am…

客户端通过服务器进行TCP通信(三)

一. 对TCP的基础讲解 服务端 1. 首先创建一个套接字&#xff0c;TCP是面向字节流的套接字&#xff0c;故需要使用SOCK_STREAM 2. 然后使用bind()函数将套接字与服务器地址关联(如果是在本地测试&#xff0c;直接将地址设置为217.0.0.1或者localhost&#xff0c;端口号为1000…

内存函数(C语言)

内存函数 以下函数的头文件&#xff1a;string.h 针对内存块进行处理的函数 memcpy 函数原型&#xff1a; void* memcpy(void* destination, const void* source, size_t num);目标空间地址 源空间地址num&#xff0c;被拷贝的字节个数 返回目标空间的起始地…