Vue基础Vue快速上手
Posted Ricky_0528
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础Vue快速上手相关的知识，希望对你有一定的参考价值。
文章目录
1 Vue介绍
Vue简介
- Vue是一套用于构建用户界面的渐进式框架
- 简单理解就是用来做网页的框架
Vue优点
- 易用：相对于React和Angular来说，Vue上手简单
- 灵活：渐进式技术，能够开发任何规模的Web应用程序
- 性能：Vue采用了虚拟DOM、双向数据绑定等技术，运行速度快
下载/安装Vue
- 国内的一个网站：https://vue3js.cn/
- 安装Vue有三种方式
- CDN
- npm
- CLI
2 第一个Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
msg - title - $(price * 0.8).toFixed(1)
</div>
<script>
Vue.createApp(
data()
return
msg: 'Hello Vue3.0',
title: 'introduction',
price: 117
).mount('#app')
</script>
</body>
</html>
实现步骤
- 在页面中引入vue框架的核心文件
- 创建一个div标签，该标签要被Vue控制（挂载点）
- 使用Vue对象调用createApp方法来创建Vue应用实例，再调用mount方法将应用挂载到页面上（div标签中）
data
- data方法用来配置数据
- 内部必须使用return来返回一个对象
- 对象内的数据就是可用的数据，该数据可以在被控制的div区域内和createApp参数内使用
msg
- 插值表达式，表达式内写返回对象的key
- 将数据插入到页面中
- 插值表达式支持基本的计算操作
3 数据填充指令
<!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="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>我是原有内容 --- msg</p>
<p v-html="msg">我是原有内容 --- </p>
<p v-text="msg">我是原有内容 --- </p>
</div>
<script>
Vue.createApp(
data ()
return
msg: 'Hello World',
).mount('#app')
</script>
</body>
</html>
- v-text 在DOM中插入纯文本数据，此指令不会出现闪动问题
- v-html 在DOM中插入HTML代码片段
- v-pre 在DOM中直接输出代码源码（格式化源码输出）
4 v-bind指令
用来为标签的属性节点绑定数据，可以简写为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url" :title="title">website</a>
</div>
<script>
Vue.createApp(
data()
return
url: 'http://www.baidu.com',
title: '百度一下，你就知道',
website: '百度'
).mount("#app")
</script>
</body>
</html>
5 class样式绑定
两种方式
- 对象方式：
<div v-bind:class=" active: isActive"></div>- active：类名，定义在style标签中的类，书写css样式
- isActive：布尔值，true则active起效，false则active生效，定义在data中
- 数组方式：
<div v-bind:class="[fs, bgc]"></div>"- fs、bgc：变量，要定义在data中
- fs、bgc的值是类名，定义在style标签中的类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
.active
color: red;
border: 1px solid #336950;
.add
background-color: lightgreen;
.fs
font-style: italic;
.bgc
background-color: lightgrey;
</style>
</head>
<body>
<div id="app">
<p v-bind:class="active: isActive, add: isAdd">明月几时有，把酒问青天</p>
<h4 :class="[c1, c2]">不知天上宫阙，今夕是何年</h4>
</div>
<script>
const app =
data()
return
isActive: true,
isAdd: false,
c1: "fs",
c2: "bgc"
Vue.createApp(app).mount("#app")
</script>
</body>
</html>
6 style样式绑定
两种方式
- 对象方式：
<div :style="fontSize: fs"></div>- fontSize：属性名
- fs：样式值（变量），要定义在data中
- 数组方式：
<div :style="[c1, c2]"></div>- c1，c2：变量，定义在data中
- c1，c2：值是对象形式，内部是样式属性和值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<p :style="fontSize: objStyle.fs, backgroundColor: objStyle.bgc">曲径通幽处</p>
<h4 v-bind:style="[c1, c2]">禅房花木深</h4>
</div>
<script>
const app =
data()
return
objStyle:
fs: '20px',
bgc: 'orange'
,
c1:
fontSize: '30px',
color: 'blue',
backgroundColor: 'lightgrey'
,
c2:
border: '2px solid red'
Vue.createApp(app).mount("#app")
</script>
</body>
</html>
7 v-on指令
用来为标签绑定事件，可以简写为@
<button v-on:click="handle">点我</button>
- v-on：用来绑定事件，后面是事件类型
- handle：事件要执行的函数，该函数要写在methods节点中
- methods是一个对象
- 在methods中可以书写很多函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
.status
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: orange;
color: #fff;
</style>
</head>
<body>
<div id="app">
<div
:class="status: statusActive"
v-on:click="handle"
@mouseenter="enter('哈哈哈我来了')"
>点我</div>
</div>
<script>
const app =
data()
return
statusActive: true
,
methods:
handle()
this.statusActive = !this.statusActive
,
enter(str)
console.log(str)
Vue.createApp(app).mount('#app')
</script>
</body>
</html>
在对象中如果想调用data中的数据，一定需要使用this指针
8 实现图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
#app .content
width: 600px;
margin: 30px auto;
#app .content img
width: 600px;
#app .content div
display: flex;
justify-content: space-between;
</style>
</head>
<body>
<div id="app">
<div class="content">
<img :src="list[i]">
<div>
<button @click="prev">上一张</button>
<button @click="next">下一张</button>
</div>
</div>
</div>
<script>
const app =
data()
return
list: [
"./images/1.jpg",
"./images/2.jpg",
"./images/3.jpg",
"./images/4.jpg",
"./images/5.jpg"
],
i: 0
,
methods:
prev()
this.i = --this.i == -1 ? 4 : this.i
,
next()
this.i = 以上是关于Vue基础Vue快速上手的主要内容，如果未能解决你的问题，请参考以下文章