一、vue之初体验-两种方式引入vue

news/2024/10/30 11:18:53/

一、Vue引入方式-CDN

<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>Document</title></head><body><h2>哈哈哈</h2><p>我是内容,呵呵呵呵</p><div id="app"></div><!--CDN地址--><script src="https://unpkg.com/vue@next"></script><script>// 使用Vue// 有一个全局对象Vue, Vue里面有一个函数createApp,调用他用小括号(),然后传入一些参数需要用{}// 调用createApp函数会返回一个新的对象,我们给这个对象起一个名字为app。因为你本身就是创建一个APP(createApp),所以肯定是返回一个APP// template: 编写htmlconst app = Vue.createApp({template: `<h2>Hello World</h2>`,});// 上面创建了一个app对象,那我下面就能使用这个对象。// app.mount 挂载,你得告诉我这个template里面的东西你准备挂载到哪里,是上面的h2标签还是P标签// 一般在开发vue的时候,我们会专门搞个div,给个id=app(id的值随意)// 你给我挂载到div上面,哪个div? id=app的div// 底层通过queryselector去查找id=app的元素,并且把template这个内容给他渲染到div里面去。app.mount('#app');</script></body>
</html>

如果我们没挂载之前(注释app.mount("#app")),界面长什么样子?


 挂载之后呢?

是不是一目了然了?

// app.mount 挂载,你得告诉我这个template里面的东西你准备挂载到哪里,是上面的h2标签还是P标签
// 一般在开发vue的时候,我们会专门搞个div,给个id=app(id的值随意)
// 你给我挂载到div上面,哪个div? id=app的div
// 底层通过queryselector去查找id=app的元素,并且把template这个内容给他渲染到div里面去。

1 是不是我们自己开发的?是普通的html标签渲染出来的

2 一开始是不是只是一个div标签?但是最终给我渲染出来Hello World?

那是为什么呢?那是因为我们Vue框架创建了一个app对象并给了一个模板,这个模板就是告诉他,待会你通过vue给我渲染哪些东西。渲染出来后挂载到id=app的div元素上面。而且是挂载到div里面的。我们通过网页F12查看一下。

仔细看,是不是包在div元素里面 

 

那此时我们再在template模板里面再加一个span,那此时页面长啥样呢?

 

这样子大家能理解vue的这里面每一行代码到底是什么含义了?

他其实就是将我们template里面的所有东西渲染出来,然后挂载到指定的元素里面。

这样子我们可以做到一部分用原生开发,一部分让vue给我们渲染出来。这就是vue的渐进式的体验。

二、Vue引入方式-本地引入

但是通过CDN引入的时候有一个不好地方是啥?我举例我们当前有一个项目,这个项目是不是要使用vue?使用vue的话会怎么做?先从CDN的服务器把vue先下载、请求下来。虽然CDN的服务器效率是非常高的,但是还是有发出网络请求这一个过程。

所以我们是不是可以把Vue这样的一个框架直接放到本地?放到本地的话,我们直接从本地加载vue是不是效率会高一点?

那对应的script标签里面的src是不是得写本地vue的源码。所以我们新建一个lib包,下面新增一个vue.js文件。

 我们在vue.js创建一个Vue对象,对象里面有一个createApp方法,这个方法会给你返回另外一个对象。

 写完上面的东西之后我们来到02_Vue引入方式-本地.html里,我们是不是可以引入这个vue.js这个文件?是不是也可以使用我们自己创建的Vue.createApp?当然可以。但是很明显我们这样子操作不可能达到第一个方法中引入CDN的效果?除非我们进一步去完善vue.js里面的内容。

这只是方便大家了解这个引入的一个过程,方便理解。

 所以我们在vue.js中存放Vue开发团队已经开发好的Vue框架。通过CDN链接打开网址复制粘贴到我们的vue.js文件中。然后我们就能够在我们的文件中去使用对应的vue的api。

那么Vue的api怎么来使用呢?

  1. 第一步创建app
  2. 挂载app
<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>Document</title></head><body><div id="app"></div><script src="lib/vue.js"></script><script>// 1. 创建app// 有一个全局对象Vue, Vue里面有一个函数createApp,调用他用小括号(),然后传入一些对象类型的参数需要用{}// 在传入的对象里面写入一个template属性, 这个属性的话是对应html的结构。const app = Vue.createApp({template: `<h1>Hello Vue</h1>`,});// 2. 挂载app// 总结而言就是 Vue帮我渲染一个这样子的hello vue,并且把渲染出来的东西挂载到id=app这个div里面。app.mount('#app');</script></body>
</html>

 


http://www.ppmy.cn/news/40740.html

相关文章

python传参数的方法

Python的参数传递是通过传参指针来完成的&#xff0c;当参数指针指向了另一个变量时&#xff0c;它就会被传递给它。这种传递方式与 Java或C#中的传参方式是类似的&#xff0c;在 Python中&#xff0c;参数可以是一个字符串&#xff0c;也可以是一个对象。这个方法的好处是它不…

Shell脚本之函数

一、函数概念及格式 1、函数的概念 函数定义&#xff1a;封装的可重复利用的具有特定功能的代码 函数就是可以在shell脚本当中做出一个类似自定义执行的命令的东西&#xff0c;最大的功能就是简化我们很多的代码。 将命令序列按照格式书写在一起可方便重复使用命令序列 2、…

chatGPT回答字数限制解除-怎么突破chatGPT长度的限制

ChatGPT如何写作 ChatGPT 是一种基于机器学习的自然语言处理技术&#xff0c;可以自动生成文本&#xff0c;包括段落、文章、新闻、电子邮件、推文等。以下是使用 ChatGPT 进行写作的基本过程&#xff1a; 确定写作内容和细节&#xff1a;首先需要 确定要生成的文本内容和相关…

QT桌面的构建

文章目录 前言一、按键类的创建二、按键样式设计三、详细代码讲解总结前言 本篇文章开始我将带大家构建一个属于自己的QT桌面,这个桌面将适用于ARM和Linux等。 一、按键类的创建 首先我们需要创建一个按键类,这个按键类需要包含一个按键和一个lable用来显示按键的名字。 效…

一天吃透计算机网络八股文

网络分层结构 计算机网络体系大致分为三种&#xff0c;OSI七层模型、TCP/IP四层模型和五层模型。一般面试的时候考察比较多的是五层模型。最全面的Java面试网站 五层模型&#xff1a;应用层、传输层、网络层、数据链路层、物理层。 应用层&#xff1a;为应用程序提供交互服务…

【面试】记一次安恒面试及总结

文章目录SQL 注入sql注入的原理&#xff1f;如何通过SQL注入判断对方数据库类型&#xff1f;补充一下其他方法判断数据库类型时间盲注的函数XPath注入抓不到http/https包&#xff0c;怎么办&#xff1f;app无自己的ssl证书app有自己的ssl证书-证书绑定(SSL pinning)逻辑漏洞有哪…

数电基础一:原码、反码和补码

一、原理和计算 1、原码 在数字电路中&#xff0c;我们用逻辑电路输出的高低电平表示二进制码1、0&#xff0c;我们有时候需要对正数和负数进行操作&#xff0c;但是在二进制逻辑电路中只有0和1&#xff0c;并没有负号&#xff0c;所以我们在数值的最高位添0表示正数&#xff0…

【Python】字符串 ③ ( Python 字符串格式化 | 单个占位符 | 多个占位符 | 不同类型的占位符 )

文章目录一、Python 字符串格式化1、字符串格式化 - 单个占位符2、字符串格式化 - 多个占位符3、字符串格式化 - 不同类型的占位符一、Python 字符串格式化 在上一篇博客 【Python】字符串 ② ( 字符串拼接 | 字符串与非字符串不能直接拼接 | TypeError: can only concatenate …