Vue(20-30)
vue3推荐插件：可以在命令行提示vue命令补全
1监视
切换布尔值，++1等类似的小计算可以放在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>Documenttitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="root">
<h2>今天天气very{{showWeather}}h2>
<button @click = 'changeWeather'>点击切换天气try one trybutton>
div>
<script>
new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
showWeather(){
return this.isHot?'热，很热很热':'不热，凉快的很'
}
},
methods: {
changeWeather(){
return this.isHot = !this.isHot
}
}
})
script>
body>
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>Documenttitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="root">
<h2>今天天气very{{showWeather}}h2>
<button @click = 'isHot =!isHot'>点击切换天气try one trybutton>
div>
<script>
new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
showWeather(){
return this.isHot?'热，很热很热':'不热，凉快的很'
}
},
// methods: {
// changeWeather(){
// return this.isHot = !this.isHot
// }
//}
})
script>
body>
html>
如何调用window属性：
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>Documenttitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="root">
<h2>今天天气very{{showWeather}}h2>
<button @click = 'window.alert(110)'>点击切换天气try one trybutton>
div>
<script>
new Vue({
el:'#root',
data:{
isHot:true,
window
},
computed:{
showWeather(){
return this.isHot?'热，很热很热':'不热，凉快的很'
}
},
// methods: {
// changeWeather(){
// return this.isHot = !this.isHot
// }
//}
})
script>
body>
html>
2监视属性
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>监视属性title>
<script src="../js/vue.js">script>
head>
<body>
<div id="root">
<h2>今天天气好{{info}}!h2>
<button @click="changeWeather">点击切换天气button>
div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
isHot:true,
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{
immediate:true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
}
})
script>
body>
html>
vm.$watch('isHot',{
immediate:true,
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
watch和computed对比
绑定class样式
绑定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>Documenttitle>
<script src="./js/vue.js">script>
head>
<body>
<style>
.basic{
width: 400px;
height: 100px;
border:1px solid black;
}
.happy{
border: 4px solid red;
background-color: rgba(255,255,0,0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2,197,2);
background-color: grey;
}
.normal{
background-color: skyblue;
}
.atguigu1{
background-color: yellowgreen;
}
.atguigu2{
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.atguigu3{
border-radius: 20px;
}
style>
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}div> <br>
<div class="basic" :class="classArr">{{name}}div> <br>
<div class="basic" :style="styleObj">{{name}}div>
div>
body>
<script>
const vm = new Vue({
el:'#root',
data:{
name:'上硅谷',
mood:'normal',
classArr:['atguigu1','atguigu2','atguigu3'],
classObj:{
atguigu1:false,
atguigu2:false,
},
styleObj:{
fontSize:'40px',
}
},
methods:{
changeMood(){
const arr = ['normal','happy','sad']
const index = Math.floor(Math.random()*3)
this.mood=arr[index]
}
}
})
script>
html>
28条件渲染
v-show:条件渲染
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>Documenttitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="root">
<h2 v-show="a">welcome to {{name}}h2>
<h2 v-show="false">welcom broh2>
<h2 v-show="1===3">welcom broh2>
div>
<script>
new Vue({
el:'#root',
data:{
name:'尚硅谷',
a:false,
}
})
script>
body>
html>
v-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>Documenttitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="root">
<h2>当前n的值是：{{n}}h2>
<button @click="n++">点我n变大button>
<div v-show="n ===1">angulardiv>
<div v-show="n ===2">reactdiv>
<div v-show = 'n===3'>vuediv>
div>
<script>
new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:0,
}
})
script>
body>
html>
v-if,v-else-if,v-else
9列表渲染
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>Documenttitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="root">
<ul>
ul>
<h1>info of carh1>
<ul>
<li v-for="(value,key) of car">{{value}}_{{key}}li>
ul>
div>
<script>
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'zhangsan',age:18},
{id:'002',name:'zhangsan',age:19},
{id:'003',name:'zhangsan',age:20},
],
car:{
name:'奥迪',
price:'80w',
color:'black',
}
}
})
script>
body>
html>
10key（很重要）
!important