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

局部使用vue框架步骤

简单案例1

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

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

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

数组的简单应用

局部使用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 }=VuecreateApp({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>

测试结果