目录
[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.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>