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

最新推荐文章于 2023-10-11 11:11:37 发布

覆水难收呀

最新推荐文章于 2023-10-11 11:11:37 发布

阅读量1.9k

点赞数 1

分类专栏：前端Vue 文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/Sean_0819/article/details/130119649

版权

前端Vue 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

一、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: 编写html
      const 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怎么来使用呢？

第一步创建app
挂载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>

覆水难收呀

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一、vue之初体验-两种方式引入vue

如果我们没挂载之前(注释app.mount("#app"))，界面长什么样子？挂载之后呢？是不是一目了然了？1 是不是我们自己开发的？是普通的html标签渲染出来的2 一开始是不是只是一个div标签？但是最终给我渲染出来Hello World？那是为什么呢？那是因为我们Vue框架创建了一个app对象并给了一个模板，这个模板就是告诉他，待会你通过vue给我渲染哪些东西。渲染出来后挂载到id=app的div元素上面。而且是挂载到div里面的。我们通过网页F12查看一下。
复制链接

扫一扫