Vue3基本使用(基础部分)
CSDN发表于:2024-05-11 10:53:14浏览:168次
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是声明式编程思想,原生是命令式编程思想。
```html
<!DOCTYPE html>Document 当前计数:
6. options选项-data属性选项的详解
```html
<!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>
Vue的阶段案例
- 购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in card_list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button :disabled="item.num <= 1" @click="sub(index,-1)">-</button>
{{item.num}}
<button @click="sub(index,1)">+</button>
</td>
<td @click="del(index)">删除</td>
</tr>
</tbody>
</table>
<div>总计:{{count}}</div>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"购物车",
card_list:[
{id:1,name:'php教程',price:30,num:1},
{id:2,name:'Go教程',price:40,num:1},
{id:3,name:'java教程',price:20,num:1},
],
}
},
computed:{
count(){
let price = 0;
for(const item of this.card_list){
price += item.price * item.num;
}
return price
}
},
methods:{
sub:function(index,num){
console.log(index,num)
this.card_list[index].num = this.card_list[index].num + num;
},
del:function(index){
this.card_list.splice(index,1);
}
}
})
app.mount("#app")
</script>
</body>
</html>
Vue的双向绑定
- v-model的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!-- 收到实现v-model -->
<input type="text" :value="val" @input="change_val">
<div>val的值{{val}}</div>
<!-- 自动实现 -->
<input type="text" v-model="model_val">
<div>model_val的值{{model_val}}</div>
<!-- textarea -->
<textarea name="" id="" cols="30" v-model="textarea_value" rows="10"></textarea>
<div>textarea_value的值{{textarea_value}}</div>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
val:'abcd',
model_val:'hello',
textarea_value:'aaaaaaaaaaa'
}
},
methods:{
change_val:function(eve){
this.val = eve.target.value;
}
}
})
app.mount("#app")
</script>
</body>
</html>
- v-model绑定textarea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!-- 收到实现v-model -->
<input type="text" :value="val" @input="change_val">
<div>val的值{{val}}</div>
<!-- 自动实现 -->
<input type="text" v-model="model_val">
<div>model_val的值{{model_val}}</div>
<!-- textarea -->
<textarea name="" id="" cols="30" v-model="textarea_value" rows="10"></textarea>
<div>textarea_value的值{{textarea_value}}</div>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
val:'abcd',
model_val:'hello',
textarea_value:'aaaaaaaaaaa'
}
},
methods:{
change_val:function(eve){
this.val = eve.target.value;
}
}
})
app.mount("#app")
</script>
</body>
</html>
- v-model绑定checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!-- 单选框 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>单选框:{{isAgree}}</h2>
<hr>
<div class="hobbies">
<h2>请选择你的爱好:</h2>
<label for="sing">
<input type="checkbox" id="sing" v-model="hobies" value="唱">唱
</label>
<label for="jump">
<input type="checkbox" id="jump" v-model="hobies" value="跳">跳
</label>
<label for="rap">
<input type="checkbox" id="rap" v-model="hobies" value="rap">rap
</label>
<h1>你的爱好:{{hobies}}</h1>
</div>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
isAgree:false,
hobies:[]
}
}
})
app.mount("#app")
</script>
</body>
</html>
- v-model绑定radio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<label for="man">
<input type="radio" id="man" v-model="gender" value="man"> 男
</label>
<label for="wman">
<input type="radio" id="wman" v-model="gender" value="wman"> 女
</label>
<h2>性别:{{gender}}</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
gender:"man"
}
}
})
app.mount("#app")
</script>
</body>
</html>
- v-model绑定select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!-- select 单选 -->
<select name="" v-model="fruit" id="">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<h2>单选:{{fruit}}</h2>
<!-- select 多选 -->
<select name="" multiple size="3" v-model="fruits" id="">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<h2>多选:{{fruits}}</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
fruit:"orange",
fruits:[]
}
}
})
app.mount("#app")
</script>
</body>
</html>
- v-model的值绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!-- select 多选 -->
<select name="" multiple size="3" v-model="fruits" id="">
<option v-for="(item,index) in select_option" :key="item.val" :value="item.val">{{item.txt}}</option>
</select>
<h2>多选:{{fruits}}</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
fruit:"orange",
fruits:[],
select_option:[
{val:'apple',txt:'苹果'},
{val:'orange',txt:'橘子'},
{val:'banana',txt:'香蕉'},
]
}
}
})
app.mount("#app")
</script>
</body>
</html>
- v-model的修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!-- 1.lazy绑定事件 onchange -->
<input type="text" v-model.lazy="message">
<h2>message:{{message}}</h2>
<hr>
<!-- 2.number:自动将内容转换为数子 -->
<input type="text" v-model.number="counter" name="" id="">
<h1>counter:{{counter}}--{{typeof counter}}</h1>
<hr>
<input type="number" v-model.number="counter2" name="" id="">
<h1>counter:{{counter2}}--{{typeof counter2}}</h1>
<hr>
<!-- 3.trim去除首位空格 -->
<input type="text" v-model.trim="content">
<h2>content:{{content}}</h2>
<hr>
<!-- 4. 使用多个修饰符 -->
<input type="text" v-model.lazy.trim="content">
<h2>content:{{content}}</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
// data:option api
data(){
return {
message:"hello vue",
counter:0,
counter2:0,
content:''
}
},
watch:{
content(newValue,oldValue){
console.log('newValue',newValue)
}
}
})
app.mount("#app")
</script>
</body>
</html>
Vue组件化开发
- vue的根组件使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const App = {
// data:option api
data(){
return {
message:"hello vue"
}
}
};
const app = Vue.createApp(App)
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>
<product-item></product-item>
<product-item></product-item>
<product-item></product-item>
</div>
<!-- 组件product-item的模板 -->
<template id="item">
<div class="product">
<h1>我是商品</h1>
<h3>商品图片</h3>
<div>商品价格¥9.9</div>
<p>商品描述</p>
</div>
</template>
<script src="./lib/vue.js"></script>
<script>
const App = {};
const app = Vue.createApp(App)
// 注册一个全局组件
app.component("product-item",{
template:"#item"
})
app.mount("#app")
</script>
</body>
</html>
- 组件自己的逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 驼峰命名不起作用 -->
<!-- <ComponentTitle></ComponentTitle> -->
<product-item></product-item>
<component-title></component-title>
<product-item></product-item>
<component-title></component-title>
<product-item></product-item>
<component-title></component-title>
<product-item></product-item>
</div>
<!-- 组件product-item的模板 -->
<template id="item">
<div class="product">
<h1>我是商品</h1>
<h3>商品图片</h3>
<div>商品价格¥9.9</div>
<p>商品描述</p>
</div>
</template>
<!-- 组件product-item的模板 -->
<template id="ComponentTitle">
<div>
<h1>商品标题</h1>
</div>
</template>
<script src="./lib/vue.js"></script>
<script>
const App = {};
const app = Vue.createApp(App)
// 注册一个全局组件
app.component("product-item",{
template:"#item"
})
app.component("ComponentTitle",{
template:"#ComponentTitle"
})
app.mount("#app")
</script>
</body>
</html>
- vue全局组件的特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 驼峰命名不起作用 -->
<!-- <ComponentTitle></ComponentTitle> -->
<product-item></product-item>
<component-title></component-title>
<product-item></product-item>
<component-title></component-title>
<product-item></product-item>
<component-title></component-title>
<product-item></product-item>
</div>
<!-- 组件product-item的模板 -->
<template id="item">
<div class="product">
<h1>我是商品</h1>
<h3>商品图片</h3>
<div>商品价格¥9.9</div>
<p>商品描述</p>
</div>
</template>
<!-- 组件product-item的模板 -->
<template id="ComponentTitle">
<div>
<h1>商品标题</h1>
</div>
</template>
<script src="./lib/vue.js"></script>
<script>
const App = {};
const app = Vue.createApp(App)
// 注册一个全局组件
//app.componten都是全局组件 全局组件的特点:一旦注册成功后,可以在任意其他组件的template中使用
app.component("product-item",{
template:"#item"
})
app.component("ComponentTitle",{
template:"#ComponentTitle"
})
app.mount("#app")
</script>
</body>
</html>
- vue局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<product-item></product-item>
<product-item></product-item>
<product-item></product-item>
</div>
<!-- 组件product-item的模板 -->
<template id="product">
<div class="product">
<h1>{{title}}--------我是商品</h1>
<h3>商品图片</h3>
<div>商品价格¥{{price}}</div>
<p>商品描述</p>
</div>
</template>
<script src="./lib/vue.js"></script>
<script>
const ProductItem = {
template:"#product",
data(){
return {
title:'我是product的标题',
price:9.9
}
}
}
const app = Vue.createApp({
// data:option api
components:{
ProductItem,
},
data(){
return {
message:"hello vue"
}
}
})
app.mount("#app")
</script>
</body>
</html>
感谢大家观看,我们下次见。