vue3学习-局部使用vue框架案例

最新推荐文章于 2025-05-13 19:51:02 发布

等什么君！

最新推荐文章于 2025-05-13 19:51:02 发布

阅读量725

点赞数 12

分类专栏： vue 文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/m0_74124657/article/details/147869332

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

局部使用vue框架步骤

1 引用 vue框架的核心文件和涉及ES6语法的文件

注意：这里文件，我建议先下载到本地，在应用到文件中

vue核心文件

链接：

https://unpkg.com/vue@3.5.13/dist/vue.global.js

因为Vue3使⽤了很多ES6相关的规范，因此我们还需要下载ES6⽀持的⼀个核⼼⽂件、 vue.esm

browser.js 。

链接：

https://unpkg.com/vue@3/dist/vue.esm-browser.js

操作同上

2 在创建简单的web项目，在html文件的请求头中引用

3 创建createApp函数使用，

4 在html文件请求头中使用插值表达式引用函数中定义的变量

简单案例1

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="./vue.global.js"></script>
</head>
<body>
    <div id="app"> {{ message }} </div>
    
</body>
<script>
    Vue.createApp({
        setup() {
            return {
                message: 'Hello Vue!'
            }
        }
    }).mount('#app')
</script>
</html>

运行启动，选中合适的浏览器打开

简单案例2【结构化赋值语法】

注意：简单案例2 在案例1 的基础上进行了更新

结构化赋值语法

关于 “结构化赋值语法”

上一个案例，使用createApp函数，使用Vue.createApp 这种形式。这种，可以看似成java中类名.静态方法形式进行理解。

基于重复使用Vue.某函数这样的，在语法上进行了优化使用 结构化赋值语法

在前端使用结构化赋值语法，是把Vue抽离出来，减少重复使用Vue.某函数这样的，只要声明一次该函数属于Vue,后期使用可以直接调用该函数！

如：Vue.createApp({....})==const { createApp }=Vue; createApp({....}

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="./vue.global.js"></script>
</head>
<body>
    <div id="app"> {{ message }} </div>
    
</body>
<script>
    // 结构化赋值语法
    const { createApp }=Vue
   createApp({
        setup() {
            return {
                message: 'Hello Vue!!!!!!!!!!!!!'
            }
        }
    }).mount('#app')
</script>
</html>

运行启动，选中合适的浏览器打开

简单案例3【使用模块化开发模式】

注意：简单案例3 在案例2 的基础上进行了更新

使用模块化开发模式

关于 “ 使用模块化开发模式”

使用模块化开发模式有两步

1 在script 标签中，添加type属性，属性值为module
2 导入es6文件

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./vue.global.js"></script>
</head>
<body>
    <div id="app"> 
         {{name}} 
    </div>
  <script type="module">
    // 模块化开发模式
    import{reactive,createApp,ref} from './vue.esm-browser.js'
  createApp({

      setup(){
      
        return{
            name: 'Hello Vue'
           
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

测试结果

分析：

你会发现它抛出了一个错误，因为 ES 模块不能通过 file:// 协议工作，也即是当你打开一个本地文件时浏览器使用的协议。

由于安全原因，ES 模块只能通过 http:// 协议工作，也即是浏览器在打开网页时使用的协议。为了使 ES 模块在我们的本地机器上工作，我们需要使用本地的 HTTP 服务器，通过 http:// 协议来提供 index.html。

解决办法：下载插件：Live Server(本地服务器）

在扩展中找到 Live Server，下载，重启使用

重启成功后，鼠标右击看到

基本数据的简单应用，对象的简单应用

ref函数：用于基本数据类型的定义

reactive函数常用于对象的定义

注意：

1 无论是对象还是基本数据类型都被使用在setup函数中

2 在return 中返回出去，（可以理解为java中return方法返回值）

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./vue.global.js"></script>
</head>
<body>
    <div id="app"> 
         {{name}} 
        <h5>名字：{{objData.name}}，年龄：{{objData.age}}</h5>
        <p>{{a}}</p>
    </div>
  <script type="module">
    // 模块化开发模式
    import{reactive,createApp,ref} from './vue.esm-browser.js'
  createApp({

      setup(){
        const objData = reactive({
            "name": 'objData',
            'age':20
        })
        const a=ref("Hello Vue!!!!!!!!!!!!!!!!!!")
        return{
            name: 'Hello Vue',
            objData,
            a
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

测试结果

数组的简单应用

常在return 中定义数组元素

示例

export default {
  data() {
    return {
      fruits: ["苹果", "香蕉", "橙子"]
    };
  }
};

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title>Document</title>
  <script src="./vue.esm-browser.js"></script> -->
  <script src="./vue.global.js"></script>
</head>
<body>
    <div id="app"> 
         {{name}} 
        <h5>名字：{{objData.name}}，年龄：{{objData.age}}</h5>
        <p>{{array[0]}},{{array[1]}},{{array[2]}}</p>
        <p>{{a}}</p>
    </div>
  <script type="module">
    // 模块化开发模式
    import{reactive,createApp,ref} from './vue.esm-browser.js'
  createApp({

      setup(){
        const objData = reactive({
            "name": 'objData',
            'age':20
        })
        const a=ref("Hello Vue!!!!!!!!!!!!!!!!!!")
        return{
            name: 'Hello Vue',
            objData,
            array:[11,22,33],
            a
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

测试结果