Vue3基本使用
1.vue3特性
vue的引入方式
- cdn引入
示例代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<h2>哈哈哈h2>
<p>我是内容，呵呵呵p>
<div id="app">div>
<script src="https://unpkg.com/vue@next">script>
<script>
// 使用Vue
const app = Vue.createApp({
template:`Hello World
呵呵呵`
})
// 挂载
app.mount("#app");
script>
body>
html>
- 本地引入
示例代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">div>
<script src="./lib/vue.js">script>
<script>
var app = Vue.createApp({
template:'哈哈哈
'
})
app.mount("#app")
script>
body>
html>
数据展示
- 字符串
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">div>
<script src="./lib/vue.js">script>
<script>
const app = Vue.createApp({
template:'{{message}}
',
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>Documenttitle>
head>
<body>
<div id="app">div>
<script src="./lib/vue.js">script>
<script>
const app = Vue.createApp({
template:`
电影列表
- {{item}}
`,
data:function(){
return {
message:"你好啊，李银河",
movies:['大话西游','星际穿越']
}
}
})
app.mount("#app")
script>
body>
html>
- 计数器
Document
- 计数器（重构）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
<h2>当前计数器：{{counter}}h2>
<button @click="increment">+1button>
<button @click="decrement">-1button>
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>Documenttitle>
head>
<body>
<h2>当前计数：<span class="counter">span>h2>
<button class="add">+1button>
<button class="sub">-1button>
<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>Documenttitle>
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>Documenttitle>
head>
<body>
<div id="app">
<h2>当前计数：{{counter}}h2>
<button @click="increment">+1button>
<button @click="decrement">-1button>
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>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<h2>当前计数：{{counter}}h2>
<h2>计数双倍：{{counter*2}}h2>
<h2>展示的信息：{{info.split(" ")}}h2>
<h2>{{age>=18 ? "成年人" : "未成年人"}}h2>
<h2>{{getdate(date)}}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>Documenttitle>
head>
<body>
<div id="app">
<h2 v-once>
{{message}}
<h2>{{counter}}h2>
h2>
<h2>{{message}}h2>
<button @click="changemessage">修改messagebutton>
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>Documenttitle>
head>
<body>
<div id="app">
<h2>aa {{message}} bbh2>
<h2 v-text="message">22222222222h2>
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>Documenttitle>
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:'你好，世界'
}
}
})
app.mount("#app")
script>
body>
html>
- v-pre的使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
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>Documenttitle>
<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>Documenttitle>
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>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<div>
<button @click="change_img">更换一下图片button>
div>
<img v-bind:src="showImg" alt="">
<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>Documenttitle>
<style>
.active{
color: red;
}
style>
head>
<body>
<div id="app">
<h2 :class="classes">{{message}}h2>
<button :class="isActive ? 'active' : '' " @click="btnClick">我是按钮button>
<button :class="{active:isActive}" @click="btnClick">我是按钮button>
<button :class="{active:isActive,key}" @click="btnClick">我是按钮button>
<button class="abc cba" :class="{active:isActive,why:true,kobe:false}" @click="btnClick">我是按钮button>
<h2 :class="['abc','cba']">Hello Arrayh2>
<h2 :class="['abc',className]">hello Arrayh2>
<h2 :class="['abc',className,isActive ? 'active' : '']">hello Arrayh2>
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>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<h2 v-bind:style="{color:fontColor,fontSize:fontSize+'px'}">哈哈哈h2>
<h2 :style="objStyle">呵呵呵呵h2>
<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>Documenttitle>
<style>
.aaa{
color: red;
}
style>
head>
<body>
<div id="app">
<h2 :[name_cls]="'aaa'">ddddddddddddh2>
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>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<h2 :name="name" :age="age" :height="height">hello worldh2>
<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>Documenttitle>
<style>
.box{
width: 100px;
height: 100px;
background-color:red;
}
style>
head>
<body>
<div id="app">
<div class="box" v-on:click="divClick">div>
<div style="height: 20px;">div>
<div class="box" @click="divClick">div>
<div style="height: 20px;">div>
<h2>{{counter}}h2>
<button @click="increment">+1button>
<button @click="counter++">+1button>
<div class="box" @mousemove="divMousemove">div>
<div style="height: 20px;">div>
<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>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<button @click="btn1Click">按钮1button>
<button @click="btn2Click('why',age)">按钮2button>
<button @click="btn3Click('why',age,$event)">按钮3button>
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>Documenttitle>
<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>Documenttitle>
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>Documenttitle>
head>
<body>
<div id="app">
<div v-if="Object.keys(info).length">
<h2>{{message}}h2>
<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>Documenttitle>
head>
<body>
<div id="app">
<div v-if="Object.keys(info).length">
<h2>{{message}}h2>
<ul>
<li>姓名：{{info.name}}li>
<li>年龄：{{info.age}}li>
ul>
div>
<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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<h2>{{fullname}}h2>
<button @click="setFullname">改变fullnamebutton>
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>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<button @click="changeMessage">改变messagebutton>
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>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<h2>{{info.name}}h2>
<button @click="change_name">改变namebutton>
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>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<button @click="change_message">修改messagebutton>
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>