目录
1. Vue简介
2. 创建Vue应用
2.1 下载JS文件
2.2 引用JS文件
2.3 调用Vue方法编辑
2.4 运行一下试试:
2.5 代码如下
3.模块化开发模式
3.1 Live Server插件
3.2 运行
4. 常用的标签
4.1 reactive
4.1.1 运行结果
4.1.2 代码:
4.2 ref
4.2.1 运行结果
4.2.2 代码:
4.3 事件处理
鼠标点击事件
1. v-on: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 代码如下
<!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.模块化开发模式
接下来就是运行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 代码:
<!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 代码:
<!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
运行结果:
代码:
<!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>
