vue3基础学习(上) [简单标签] (vscode)

目录

[1. Vue简介](#1. Vue简介)

[2. 创建Vue应用](#2. 创建Vue应用)

[2.1 下载JS文件](#2.1 下载JS文件)

[2.2 引用JS文件](#2.2 引用JS文件)

[2.3 调用Vue方法​编辑](#2.3 调用Vue方法编辑)

[2.4 运行一下试试:](#2.4 运行一下试试:)

[2.5 代码如下](#2.5 代码如下)

3.模块化开发模式

[3.1 Live Server插件](#3.1 Live Server插件)

[3.2 运行](#3.2 运行)

[4. 常用的标签](#4. 常用的标签)

[4.1 reactive](#4.1 reactive)

[4.1.1 运行结果](#4.1.1 运行结果)

[4.1.2 代码:](#4.1.2 代码:)

[4.2 ref](#4.2 ref)

[4.2.1 运行结果](#4.2.1 运行结果)

[4.2.2 代码:](#4.2.2 代码:)

[4.3 事件处理](#4.3 事件处理)

鼠标点击事件

[1. v-on:click](#1. v-on:click)

[2. @click](#2. @click)

代码:


1. Vue简介

Vue是一种前端开发的渐进式框架,类似Springboot框架,当我们需要一些组件或功能时,直接引用地址,或下载到本地进行引用

我们现在用的是**Vue3,**也就是组合式 , Vue2是选项式

官网地址 : 简介 | Vue.js

环境准备: 安装好node.js , 并配置好环境变量

2. 创建Vue应用

2.1 下载JS文件

首先我们需要在官网上下载两个.js文件:

https://unpkg.com/vue@3.5.13/dist/vue.global.jshttps://unpkg.com/vue@3.5.13/dist/vue.esm-browser.js

推荐是下载到电脑 , 进行本地的引用 , 如果网络不好 , 根据网络地址引用可能会出错误

2.2 引用JS文件

感叹号快速生成,html,head,body等标签

2.3 调用Vue方法

2.4 运行一下试试:

2.5 代码如下

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个Vue项目</title>
</head>
<h1>第一个Vue项目</h1>
<!-- 引入Vue.js -->
<script src="./vue.global.js"></script>
<div id="app">
    {{msg}}
</div>

<body>
    <script>
        Vue.createApp({
            setup() {
                return {
                    msg: "Hello Vue"
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

3.模块化开发模式

前⾯我们下载了2个核⼼的js⽂件,但是在第⼀次使⽤vue的时候只⽤到了⼀个,还有⼀个没有⽤到。 vue.esm-browser.js⽂件
前⾯使⽤的是传统的模式进⾏开发,接下来在传统开发的基础上,改成模块化开发的⽅式。

接下来就是运行html , 但是模块化的html不能直接运行 , 需要Live Server插件才能运行

3.1 Live Server插件

3.2 运行

在html文件里 , 鼠标右键 选择Open With Live Server

4. 常用的标签

4.1 reactive

这是定义对象的一种方法,且只能定义对象, 方法比较简单

4.1.1 运行结果

4.1.2 代码:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个Vue项目</title>
</head>
<h1>第一个Vue项目</h1>
<!-- 引入Vue.js -->
<script src="./vue.global.js"></script>
<div id="app">
    {{msg}}


    {{data.name}},{{data.age}},{{data.sex}}
</div>

<body>
    <script>
        Vue.createApp({
            setup() {
                // 这里可以写一些数据和逻辑代码
                //定义数据和方法都使用const定义
                const data = Vue.reactive({
                    name: '张三',
                    age: 20,
                    sex: '男'
                })
                return {
                    msg: "Hello Vue",
                    data

                }
            }
        }).mount('#app')
    </script>
</body>

</html>

4.2 ref

ref 的用法上和reactive差不多,只有使用变量的时候有一点不一样

可以看到我定义的一个方法竟然这么复杂 , 对这些符号分割一下

const changeName = () => {

// 方法体

}

所以固定格式是::::::: 方法名 = () => {}

在方法中 改变data中的name , 需要用data.value.name , 事实上 ref定义的数据 , 不只是有值 , 还有其他的属性名 , 数据值放在一个叫做value 的键 , 数据就是值 . 所以要引用数据 , 必须要**.value**

当然 , 只需要在body 里的script 进行引用

4.2.1 运行结果

可以看到 , 我的代码中定义data的 是 张三 , 调用方法后输出数据变成了 李四

4.2.2 代码:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个Vue项目</title>
</head>
<h1>第一个Vue项目</h1>
<div id="app">
    {{changeName()}}
    {{data}}
</div>

<body>
    <script type="module">
        import { createApp, ref } from './vue.esm-browser.js'
        createApp({
            setup() {
                const data = ref({
                    name: '张三',
                    age: 20,
                    sex: '男'
                })
                const changeName = () => {
                    data.value.name = '李四'
                }
                return {
                    msg: 'Hello Vue!',
                    data,
                    changeName
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

4.3 事件处理

鼠标点击事件

1. v-on:click

运行结果:

2. @click

运行结果:

代码:
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个Vue项目</title>
</head>
<div id="app">
    <button @click="click"> 点击我</button>
</div>

<body>
    <script type="module">
        import { createApp, ref } from './vue.esm-browser.js'
        createApp({
            setup() {
                const click = () => {
                    alert('你点击了按钮')
                }
                return {
                    click
                }
            }
        }).mount('#app')
    </script>
</body>

</html>
相关推荐
我爱学嵌入式25 分钟前
C语言第 9 天学习笔记:数组(二维数组与字符数组)
c语言·笔记·学习
im_AMBER4 小时前
学习日志19 python
python·学习
灵感__idea6 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴7 小时前
Mix
前端·webgl
代码续发7 小时前
前端组件梳理
前端
试图让你心动8 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_8 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
chenchihwen8 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记8 小时前
sass中@mixin与 @include
前端·sass