1.vue3特性
vue的引入方式
- cdn引入
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>哈哈哈</h2>
<p>我是内容，呵呵呵</p>
<div id="app"></div>
<!-- cdn引入 -->
<script src="https://unpkg.com/vue@next"></script>
<script>
// 使用Vue
const app = Vue.createApp({
template:`<h2>Hello World</h2><span>呵呵呵</span>`
})
// 挂载
app.mount("#app");
</script>
</body>
</html>- 本地引入
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
var app = Vue.createApp({
template:'<h1>哈哈哈</h1>'
})
app.mount("#app")
</script>
</body>
</html>数据展示
- 字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
template:'<h2>{{message}}</h2>',
data:function(){
return {
title:"hello world",
message:'你好，vue3'
}
}
})
app.mount("#app")
</script>
</body>
</html>- 列表数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
template:`
<h2>电影列表</h2>
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
`,
data:function(){
return {
message:"你好啊，李银河",
movies:['大话西游','星际穿越']
}
}
})
app.mount("#app")
</script>
</body>
</html>- 计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
template:`
<h2>当前计数器：{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
`,
data:function(){
return {
counter:0
}
},
methods:{
increment:function(){
this.counter++
},
decrement:function(){
this.counter--
}
}
})
app.mount("#app")
</script>
</body>
</html>- 计数器（重构）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>当前计数器：{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
data:function(){
return {
counter:0
}
},
methods:{
increment:function(){
this.counter++
},
decrement:function(){
this.counter--
}
}
})
app.mount("#app")
</script>
</body>
</html>- 原生dom计数器实现(命令式编程实现）
vue是声明式编程思想，原生是命令式编程思想。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 命令式编程和声明式编程 -->
<h2>当前计数：<span class="counter"></span></h2>
<button class="add">+1</button>
<button class="sub">-1</button>
<script>
// 获取dom
const h2El = document.querySelector("h2")
const counterEl = document.querySelector(".counter")
const addBtnEl = document.querySelector(".add")
const subBtnEl = document.querySelector('.sub')
// 2.定义一个变量记录数据
let counter = 10
counterEl.textContent = counter
// 2.监听按钮的点击
addBtnEl.onclick = function(){
counter++
counterEl.textContent = counter
}
subBtnEl.onclick = function(){
counter--
counterEl.textContent = counter
}
</script>
</body>
</html>- options选项-data属性选项的详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<button @click="changeMessage">改变message的值</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
data(){
return {
message:"hello"
}
},
methods:{
changeMessage:function(){
this.message = "你好，世界";
}
}
})
app.mount("#app")
</script>
</body>
</html>- options_method属性选项
注意method中方法不可以使用箭头函数
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
data:function(){
return {
counter:0
}
},
methods:{
increment:function(){
this.counter++;
},
// es6写法
increment(){
},
// es6的箭头函数
increment:()=>{
},
decrement:function(){
this.counter--;
}
}
})
app.mount("#app")
</script>
</body>
</html>VsCode生成代码片段
- 第一步，复制自己要生产的代码；
- 第二部，https://snippet-generator.app/在该网站中生成代码片段；
- 第三步，在VsCode中配置代码片段；设置-》首选项-》配置用户代码片段
Vue基础语法
- vue的Mustache语法
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1.基本使用 -->
<h2>{{message}}</h2>
<h2>当前计数：{{counter}}</h2>
<!-- 2.表达式 -->
<h2>计数双倍：{{counter*2}}</h2>
<h2>展示的信息：{{info.split(" ")}}</h2>
<!-- 3.三元运算符 -->
<h2>{{age>=18 ? "成年人" : "未成年人"}}</h2>
<!-- 4.调用methods中函数 -->
<h2>{{getdate(date)}}</h2>
<!-- 注意不能定义语句 -->
<!-- <h2>{{const name="hello"}}</h2> -->
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
counter:100,
info:"my name is why",
age:22,
date:'17:03:01',
}
},
methods:{
getdate:function(date){
return "2023-10-22 "+date
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-once的使用
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 指令：v-once 只渲染一次 -->
<h2 v-once>
{{message}}
<h2>{{counter}}</h2>
</h2>
<h2>{{message}}</h2>
<button @click="changemessage">修改message</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
counter:100
}
},
methods:{
changemessage:function(){
this.message = '你好，世界';
this.counter = this.counter*2;
console.log(this.message,this.counter);
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-text的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>aa {{message}} bb</h2>
<h2 v-text="message">22222222222</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue"
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-html的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{content}}</h2>
<h2 v-html="content"></h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
content:'<span style="color: red;font-size: 40px;">你好，世界</span>'
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-pre的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-pre>{{message}}</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue"
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-cloak的使用
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<h2 v-cloak>{{message}}</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
setTimeout(()=>{
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue"
}
}
})
app.mount("#app")
},3000)
</script>
</body>
</html>- v-memo的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<div v-memo="[name]">
<h2>姓名：{{name}}</h2>
<h2>性别：{{sex}}</h2>
<h2>年龄：{{age}}</h2>
</div>
<button @click="change_btn">改变信息</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
name:'张三',
sex:'男',
age:'18'
}
},
methods:{
change_btn:function(){
this.age = 20;
// this.name = '李四';
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-bind的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<div>
<button @click="change_img">更换一下图片</button>
</div>
<img v-bind:src="showImg" alt="">
<!-- v-bind语法糖是 : -->
<a :href="baidu">百度一下</a>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
baidu:'http://www.baidu.com',
img1:'http://p1.music.126.net/PCT_tuIWRxEHZNtE5dpxOA==/109951168999152069.jpg?imageView&quality=89',
img2:'https://p1.music.126.net/eQieDtxqnlHNSvrdiO4x_w==/109951168999193521.jpg?imageView&quality=89',
message:"hello vue",
showImg:'http://p1.music.126.net/PCT_tuIWRxEHZNtE5dpxOA==/109951168999152069.jpg?imageView&quality=89'
}
},
methods:{
change_img:function(){
this.showImg = this.showImg === this.img1 ? this.img2 : this.img1
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-bind绑定基本属性class(对象写法和数组写法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 1.基本绑定class -->
<h2 :class="classes">{{message}}</h2>
<!-- 2.动态class可以写对象语法 -->
<button :class="isActive ? 'active' : '' " @click="btnClick">我是按钮</button>
<!-- 对象语法的基本使用 -->
<button :class="{active:isActive}" @click="btnClick">我是按钮</button>
<!-- 对象语法的多个键值对 -->
<button :class="{active:isActive,key}" @click="btnClick">我是按钮</button>
<!-- 动态绑定class是可以和普通的class同时使用 -->
<button class="abc cba" :class="{active:isActive,why:true,kobe:false}" @click="btnClick">我是按钮</button>
<!-- 动态class来可以写数组语法（了解） -->
<h2 :class="['abc','cba']">Hello Array</h2>
<h2 :class="['abc',className]">hello Array</h2>
<h2 :class="['abc',className,isActive ? 'active' : '']">hello Array</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
classes:"abc cba nba",
isActive:false
}
},
methods:{
btnClick:function(){
this.isActive = !this.isActive
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-bind中style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!-- style中的某些值，来自data中 -->
<!-- 动态绑定style，在后面跟上 对象类型 -->
<h2 v-bind:style="{color:fontColor,fontSize:fontSize+'px'}">哈哈哈</h2>
<!-- 动态的绑定属性，这个属性是一个对象 -->
<h2 :style="objStyle">呵呵呵呵</h2>
<!-- style的数组语法 -->
<h2 :style="[objStyle,{backgroundColor:'purple'}]">嘿嘿嘿</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
fontColor:"blue",
objStyle:{
fontSize:'50px',
color:"green"
}
}
}
})
app.mount("#app")
</script>
</body>
</html>- 绑定属性名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.aaa{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 :[name_cls]="'aaa'">dddddddddddd</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
name_cls:"class",
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-bind直接绑定对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 :name="name" :age="age" :height="height">hello world</h2>
<h2 v-bind="info"></h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
info:{name:"why",age:18,height:1.88,address:'广州市'},
name:"why",
age:18,
height:1.88
}
}
})
app.mount("#app")
</script>
</body>
</html>03.Vue的事件绑定
- 绑定事件的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<div id="app">
<!-- 1.基本使用 -->
<div class="box" v-on:click="divClick"></div>
<div style="height: 20px;"></div>
<!-- 2.语法糖写法 -->
<div class="box" @click="divClick"></div>
<div style="height: 20px;"></div>
<!-- 3.绑定的方法位置，也可以写成一个表达式 -->
<h2>{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="counter++">+1</button>
<!-- 4.绑定其他方法 -->
<div class="box" @mousemove="divMousemove"></div>
<div style="height: 20px;"></div>
<!-- 5.元素绑定多个事件 -->
<div class="box" @click="divClick" @movsemove="divMousemove"></div>
<div style="height: 20px;"></div>
<div class="box" v-on="{click:divClick,mousemove:divMousemove}"></div>
<div style="height: 20px;"></div>
<div class="box" @="{click:divClick,mousemove:divMousemove}"></div>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
counter:10
}
},
methods:{
divClick:function(){
console.log('divClick')
},
increment:function(){
this.counter++;
},
divMousemove:function(){
console.log('divMousemove')
}
}
})
app.mount("#app")
</script>
</body>
</html>- 绑定的参数传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<button @click="btn1Click">按钮1</button>
<button @click="btn2Click('why',age)">按钮2</button>
<button @click="btn3Click('why',age,$event)">按钮3</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
age:18
}
},
methods:{
btn1Click(event){
console.log(event)
},
btn2Click(name,age){
console.log("btn2Click",name,age)
},
btn3Click(name,age,event){
console.log("btn3Click",name,age,event)
}
}
})
app.mount("#app")
</script>
</body>
</html>- 绑定事件的修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<div class="box" @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue"
}
},
methods:{
btnClick(event){
console.log('btnClick')
},
divClick(){
console.log('divClick')
}
}
})
app.mount("#app")
</script>
</body>
</html>Vue的条件渲染
- 完成需求Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<template v-if="Object.keys(info).length">
<h2>个人信息</h2>
<ul>
<li>姓名：{{info.name}}</li>
<li>年龄：{{info.age}}</li>
</ul>
</template>
<template>
<h2>没有输入个人信息</h2>
<p>请输入个人信息后，展示内容</p>
</template>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
info:{name:"why",age:18}
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-if的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if="Object.keys(info).length">
<h2>{{message}}</h2>
<!-- v-if="条件" -->
<ul>
<li>姓名：{{info.name}}</li>
<li>年龄：{{info.age}}</li>
</ul>
</div>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"个人信息",
info:{name:"why",age:18}
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-if-else的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if="Object.keys(info).length">
<h2>{{message}}</h2>
<!-- v-if="条件" -->
<ul>
<li>姓名：{{info.name}}</li>
<li>年龄：{{info.age}}</li>
</ul>
</div>
<!-- v-else -->
<div v-else>
<h2>没有个人信息</h2>
<p>请输入个人信息后，展示内容</p>
</div>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"个人信息",
info:{}
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-else-if使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h1 v-if="score > 90">优秀</h1>
<h2 v-else-if="score > 80">良好</h2>
<h3 v-else-if="score >= 60">及格</h3>
<h4 v-else>不及格</h4>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
score:70
}
}
})
app.mount("#app")
</script>
</body>
</html>- template元素的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<template v-if="Object.keys(info).length">
<h2>个人信息</h2>
<ul>
<li>姓名：{{info.name}}</li>
<li>年龄：{{info.age}}</li>
</ul>
</template>
<template>
<h2>没有输入个人信息</h2>
<p>请输入个人信息后，展示内容</p>
</template>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
info:{name:"why",age:18}
}
}
})
app.mount("#app")
</script>
</body>
</html>- 条件渲染-阶段案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<button @click="toggle">切换</button>
</div>
<div v-if="isshowcode">
<img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
</div>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
isshowcode:true
}
},
methods:{
toggle(){
this.isshowcode = !this.isshowcode;
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-show条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<button @click="toggle">切换</button>
</div>
<div v-if="isshowcode">
<img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
</div>
<div class="v_show" v-show="isshowcode">
<img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
</div>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
isshowcode:true
}
},
methods:{
toggle(){
this.isshowcode = !this.isshowcode;
}
}
})
app.mount("#app")
</script>
</body>
</html>Vue的列表渲染
- v-for的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<ul>
<li v-for="(item,index) in movies">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in products">
{{item.id}}-----{{item.name}}-----{{item.price}}
</li>
</ul>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
movies:['星际穿越','少年派','大话西游','多啦A梦'],
products:[
{id:110,name:"Macbook",price:9.9},
{id:111,name:"iphone",price:9.9},
{id:112,name:"小米手环",price:9.9},
]
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-for的其他数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!-- 字符串 -->
<ul>
<li v-for="(item,index) in message">{{item}}</li>
</ul>
<!-- 数组 -->
<ul>
<li v-for="(item,index) in for_arr">{{item.title}}</li>
</ul>
<!-- 对象 -->
<ul>
<li v-for="(item,key,index) in airtcle">{{item}}--{{key}}---{{index}}</li>
</ul>
<!-- 数字 -->
<ul>
<li v-for="(item,index) in 10">{{item}}</li>
</ul>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
airtcle:{id:1,title:'标题一',desc:'描述'},
for_arr:[
{id:1,title:'标题一'},
{id:2,title:'标题二'},
{id:3,title:'标题三'},
]
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-for和template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!-- 如果div没有实际意义，那么可以使用template -->
<template v-for="(value,key,indx) in infos">
<span>{{value}}</span>
<div>{{key}}</div>
<span>{{index}}</span>
</template>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
infos:{name:'why',age:18,height:1.88}
}
}
})
app.mount("#app")
</script>
</body>
</html>- 数组更新的检测
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<ul>
<li v-for="(item,index) in names">{{item}}</li>
</ul>
<button @click="change_val()">操作</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
names:["abc","cba","nba","aaa","ccc"]
}
},
methods:{
change_val:function(){
// 1.直接修改为另一个数组
// this.names = ["why","abc"];
// 2.通过一些数组的方法，修改数组中的元素
// this.names.push("why")
// this.names.pop()
// this.names.splice(2,1,"why")
// this.names.sort()
// this.names.reverse()
// 3. 不修改元数据的方法是不能监听watch
const newNames = this.names.map(item => item + "why")
this.names = newNames;
}
}
})
app.mount("#app")
</script>
</body>
</html>- v-for中的key属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<ul>
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
letters:["a","b","c"]
}
}
})
app.mount("#app")
</script>
</body>
</html>Vue的computed
- 复杂数据的处理-插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{this.num1 + this.num2}}</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
num1:1,
num2:2
}
},
methods:{
}
})
app.mount("#app")
</script>
</body>
</html>- 复杂数据的处理-methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{get_sub()}}</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
num1:1,
num2:2
}
},
methods:{
get_sub(){
return this.num1 + this.num2;
}
}
})
app.mount("#app")
</script>
</body>
</html>- 复杂数据的处理-computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{get_sub}}</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
num1:1,
num2:2
}
},
computed:{
get_sub(){
return this.num1 + this.num2;
}
},
methods:{
}
})
app.mount("#app")
</script>
</body>
</html>- computed和methods区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{get_sub}}</h2>
<h2>{{get_sub}}</h2>
<h2>{{get_sub}}</h2>
<h2>{{get_ext()}}</h2>
<h2>{{get_ext()}}</h2>
<h2>{{get_ext()}}</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
num1:1,
num2:2
}
},
computed:{
get_sub(){
console.log('computed get_sub-------------')
return this.num1 + this.num2;
}
},
methods:{
get_ext(){
console.log('methods get_ext-------------')
return this.num1 + this.num2;
}
}
})
app.mount("#app")
</script>
</body>
</html>- 计算属性的set和get写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{fullname}}</h2>
<button @click="setFullname">改变fullname</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
firstname:'coder',
lastname:'why'
}
},
computed:{
// 完整语法
fullname:{
get:function(){
return this.firstname+" "+this.lastname
},
set:function(value){
const names = value.split(" ")
this.firstname = names[0]
this.lastname = names[1]
}
}
},
methods:{
setFullname(){
this.fullname = "kobe bryant"
}
}
})
app.mount("#app")
</script>
</body>
</html>Vue的watch侦听
- Vue的data的watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<button @click="changeMessage">改变message</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
info:{name:'why',age:18}
}
},
methods:{
changeMessage(){
this.message = '你好，世界';
this.info = {name:"kobe"}
}
},
watch:{
// 1.默认对象参数 newValue/oldValue
message(newValue,oldValue){
console.log('message数据发生了变化：',newValue,oldValue)
},
info(newValue,oldValue){
// 2.如果是对象类型，那么拿到的是代理对象
// console.log("info数据发生了变化：",newValue,oldValue)
// console.log(newValue.name,oldValue.name);
// 3.获取原生对象
console.log({ ...newValue });
console.log(Vue.toRaw(newValue));
}
},
})
app.mount("#app")
</script>
</body>
</html>- Vue的watch监听器选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{info.name}}</h2>
<button @click="change_name">改变name</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
info:{name:'coder',age:18}
}
},
methods:{
change_name(){
this.info.name = "kobe"
}
},
watch:{
// 默认watch监听不会进行深度监听
// info(newVlaue,oldValue){
// console.log("监听到info的改变：",newVlaue,oldValue)
// }
// 进行深度监听
info:{
handler(newValue,oldValue){
console.log("监听到info改变：",newValue,oldValue)
console.log(newValue === oldValue)
},
// 监听器选项：
// info进行深度监听
deep:true,
// 第一次渲染直接执行一次监听
immediate:true
},
"info.name":function(newValue,oldValue){
console.log("name发生改变：",newValue,oldValue)
}
}
})
app.mount("#app")
</script>
</body>
</html>- Vue的$watch监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<button @click="change_message">修改message</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue"
}
},
methods:{
change_message(){
this.message = '你好，世界';
}
},
created(){
// ajax/fetch/axios
console.log("created");
this.$watch("message",(newValue,oldValue)=>{
console.log("message数据变量：",newValue,oldValue)
},{deep:true,imediate:true})
}
})
app.mount("#app")
</script>
</body>
</html>