Vue学习笔记
安装方法
将https://unpkg.com/vue@3中的代码保存到项目目录下的lib文件夹中的vue.js中,在使用时引入即可。
简单入门案例
- 实现步骤
在页面中引入vue框架的核心文件
创建一个div标签,该标签要被Vue控制(挂载点)
使用Vue 对象调用createApp方法来创建Vue应用实例,再调用mount方法将应用挂载到页面上( div标签中)- data方法用来配置数据
内部必须使用return来返回一个对象
对象内的数据就是可用的数据,该数据可以在被控制的div区域内和createApp参数内使用- {{msg}}:差值表达式
双大括号中填的是key值, 将数据插入到页面中
插值表达式支持基本的(四则运算)计算操作
<!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>
<!-- 第一步: 在页面中引入vue框架的核心文件 -->
<script src="./lib/vue.js"></script>
</head>
<body>
<!-- 第二步: 在body中设置一个标签,vue会控制该标签 -->
<div id="app">
{{msg}}
</div>
<script>
Vue.createApp({
data() {
return {
msg: 'Hello Vue3 '
}
}
}).mount('#app')
</script>
</body>
</html>
常用指令
- Vue封装了一些自定义属性,这些自定义属性就叫指令
指令可以用来控制标签的数据显示、注册事件、样式设置等等
指令的核心作用就是帮助我们更好的操控页面
数据填充指令
- 差值表达式、v-html指令、v-text指令
v-html、v-text 会覆盖标签内原有的内容,插值表达式不会
v-html:能识别标签
<!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>{{msg}}</p>
<p v-html="msg"></p>
<p v-text="msg"></p>
</div>
<script>
Vue.createApp({
data() {
return{
msg:'<h3>Hello World</h3>'
}
}
}
).mount('#app')
</script>
</body>
</html>
v-bind指令
- 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>
</head>
<body>
<div id="app">
<a v-bind:href="url" v-bind:title="title">
{{website}}
</a>
<img :src="src" alt="">
</div>
<script src="./lib/vue.js"></script>
<script>
const app = {
data () {
return {
url: 'https://www.baidu.com/',
title: '百度网搜索',
website: '百度',
src: './images/001.png'
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
- v-bind绑定class属性
v-bind 用来绑定class属性时有两种方式∶
对象方式: <div v-bind:class=“{ active: isActive }”></div>
active:类名,定义在style标签中的类
isActive :布尔值,true类起效、false类失效,定义在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>
</head>
<script src="./lib/vue.js"></script>
<style>
.active {
text-align: center;
font-size: 14px;
}
.aaa {
background-color: orange;
}
</style>
<body>
<div id="app" >
<p :class="{active: isActive, aaa: isAAA}">对象绑定class属性</p>
<p :class="[c1, c2]">数组绑定class属性</p>
</div>
<script>
const app = {
data () {
return {
isActive: true,
isAAA: false,
c1: "active",
c2: "aaa"
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
- v-bind绑定style属性
v-bind用来绑定style属性时有两种方式:
对象方式: <div :style=“{ fontSize: fs }”></div>
fontSize :属性名
fs :样式值(变量),要定义在data中
数组方式: <div :style=“[fs, bgc]”></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: fs, backgroundColor: bgc}">对象绑定style属性</p>
<p :style="[a, c]">数组绑定style属性</p>
</div>
<script>
const app = {
data () {
return {
fs: '18px',
bgc: 'orange',
a: {
fontSize: '20px',
textAlign: 'center'
},
c: {
backgroundColor: 'lightblue'
}
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
v-on指令
- 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清除或添加样式 -->
<div id="app">
<div :class="{status: isStatus}" v-on:click="handle" @mouseenter="enter('已检测到鼠标')">点击清除样式</div>
</div>
<script>
const app = {
data() {
return {
isStatus: true
}
},
methods: {
handle(){
// 在对象中想调用data中的数据, 一定需要使用this指针
this.isStatus = !this.isStatus
},
enter(str) {
console.log(str)
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
v-if指令
- v-if 能够根据表达式的真假值来有条件地渲染元素
v-else、v-else-if
<!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">
<h3 v-if="age > 18">成年人</h3>
<h3 v-else-if="age == 18">我成年啦!!。</h3>
<h3 v-else="age < 18">未成年</h3>
</div>
<script>
const app = {
data() {
return {
age: 8
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
v-for指令
- v-for 循环渲染元素
list 要进行循环遍历的数组
item 每次取出的单元值
index 每次取出的单元索引
:key 为当前循环项绑定唯一标示
<li v-for=“(item,index) in list”:key=“index”> {{item}} </li>
<!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">
<h3>循环列表指令测试程序</h3>
<ul>
<li v-for="(item, index) in ary" :key="index">{{item}}</li>
</ul>
</div>
<script>
const app = {
data() {
return {
ary: ['明日方舟天下第三', '原神就是天', '黑神话悟空什么时候上线', '瓦罗兰特什么时候出国服', '超级期待绝区零']
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
v-model指令
- v-model 用于数据的双向绑定
双向绑定∶
data中定义的数据发生变化时,页面中的数据也跟着变化
修改页面中的数据时,data中的数据也会跟着变化
account修改,input中的值就会修改
input中的值修改,
account得值也会修改
<input type=“text” v-model=“account”
data (){
return {
account:‘用户名’
}
<!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 class="app">
<input type="text" v-model="account" @keyup="change">
<p>输入内容为:{{textInput}}</p>
</div>
<script>
const app = {
data() {
return {
account: '',
textInput: ''
}
},
methods: {
change() {
this.textInput = this.account;
}
}
}
Vue.createApp(app).mount('.app');
</script>
</body>
</html>
MVVM开发模式
- Vue是一种采用MVVM开发模式的框架
MVVM是—种分离开发思想,将页面开发分为三个部分
MVVM是Model-View-ViewModel的简写
Model :模型,简单理解就是要操作的数据
View :视图,就是页面结构
ViewModel:视图模型,是连接Model和View的桥梁
MVVM的核心思想是让前端程序员专注于业务的实现,最大限度的减少DOM操作
响应式数据声明
- CompositionAPI提供了两种响应式数据声明方式
ref()和reactive()
setup()是CompositionAPI的入口函数
通过ref()和reactive()声明的数据必须在setup 中return
ref():
ref()方法通常用来定义简单数据类型(数值型、字符串等)
const { ref } = Vue
let name = ref(‘王小明’);
let age = ref(8);
setup () {
return { name, age }}
<ul>
<li>姓名:{{ name }}</li>
<li>姓名:{{age }}</li>
</ul>
<!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">
请输入年龄:<input type="text" v-model="age">
<button @click="add">+</button>
<p>当前年龄为:{{age}}</p>
</div>
<script>
// 1.从Vue对象中将ref方法解构出来
const {ref} = Vue;
// 使用ref来声明响应式数据
let age = ref(0);
const app = {
setup () {
const add = () => {
console.dir(age);
// 返回的age是一个对象,通过修改其value属性来修改age的值
age.value ++ ;
}
return {age, add}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
- reactive:
reactive()方法通常用来定义复杂数据类型(数组、对象)
const { reactive } = Vue
const state = reactive({
id: 10001,
name: ‘王小明’,age: 8,
gender: ‘男’})
setup () { return {state} }
<ul>
<li>id : {{ state.id }}</li>
<li>姓名:{{ state.name }}</li>
<li>年龄:{{ state.age }}</l\i>
<li>性别:{{ state.gender }}</li>
</ul>
<!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">
<h3>游戏信息列表</h3>
<ul>
<li v-for="(item, index) in list" :key="index">{{item.name}} - {{item.type}}</li>
</ul>
</div>
<script>
const {reactive} = Vue;
const list = reactive([
{name: '明日方舟', type: '塔防二次元'},
{name: '原神', type: '开放世界'},
{name: '黑神话悟空', type: '动作玄幻'},
{name: '瓦罗兰特', type: 'fps射击竞技'},
{name: '绝区零', type: '肉鸽动作'}
])
const app = {
setup () {
return {list};
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
生命周期函数
- 生命周期: Vue实例挂载、更新、销毁的过程
Vue实例的生命周期会伴随各种事件,这些事件对应的函数叫做生命周期函数/生命周期钩子/生命周期钩子函数
生命周期函数会在某一时刻自动运行
optionsAPI:- 挂载︰创建Vue 实例并挂载到页面上
beforeCreate :创建之前
created :创建完成,一般用来初始化页面需要的数据
beforeMount :挂载之前
Mounted :挂载完成,挂载完成后可以直接操作DOM对象- 更新︰页面发生变化
beforeUpdate :更新之前
updated :更新完成
<!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">
<h3>生命周期函数测试代码</h3>
<p>{{msg}}</p>
<button @click = "change">更新</button>
</div>
<script>
const {ref} = Vue;
let msg = ref('Hello World !');
const app = {
beforeCreate () {
console.log('beforeCreate');
},
created () {
console.log('created');
},
beforeMount () {
console.log('beforeMount');
},
mounted () {
console.log('mounted');
},
beforeUpdate () {
console.log('beforeUpdate');
},
updated () {
console.log('updated');
},
setup () {
const change = () => {
msg.value = "Vue3 page updated !!.";
}
return {msg, change}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
compositionAPI:
- CompositionAPI取消了beforeCreate和created,直接使用setup即可
所有的钩子函数必须从Vue对象中解构出来
所有的钩子函数前都要加on
<!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">
<h3>生命周期函数测试代码</h3>
<p>{{msg}}</p>
<button @click = "change">更新</button>
</div>
<script>
const { ref,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated} = Vue;
let msg = ref('Hello World !');
const app = {
setup () {
const change = () => {
msg.value = "Vue3 page updated !!.";
}
onBeforeMount (() => {
console.log('onBeforeMount');
})
onMounted (() => {
console.log('onMounted');
})
onBeforeUpdate (() => {
console.log('onBeforeUpdate');
})
onUpdated (() => {
console.log('onUpdated');
})
return {msg, change}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>