前言
vue基本实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
Hello {{geyao}}
</div>
<script>
const app=new Vue({
el:"#app",
data:{
geyao:"歌谣"
}
})
</script>
</body>
</html>
运行结果
插值表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>Hello {{geyao}}</p>
<p>Hello {{1+2}}</p>
<p>Hello {{age=18?1:2}}</p>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
geyao:"歌谣",
age:18
}
})
</script>
</body>
</html>
运行结果
vue响应式特性
开发者工具安装vue-devtools
指令和v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-html="geyao"></div>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
geyao:"<h1>歌谣</h1>",
age:18
}
})
</script>
</body>
</html>
运行结果
v-show和v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="flag">geyao</div>
<div v-show="flag">geyao</div>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
geyao:"<h1>歌谣</h1>",
age:18,
flag:true
}
})
</script>
</body>
</html>
运行结果
v-else和v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="age==18">geyao</div>
<div v-else="flag">nv</div>
<div v-if="age>=90">geyao</div>
<div v-else-if="age>=80">geyao</div>
<div v-else-if="age>=70">geyao</div>
<div v-else="age>=60">fangfang</div>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
geyao:"<h1>歌谣</h1>",
age:60,
flag:true
}
})
</script>
</body>
</html>
运行结果
v-on内联语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{age}}
<button v-on:click="age++">增加</button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
geyao:"<h1>歌谣</h1>",
age:60,
flag:true
}
})
</script>
</body>
</html>
运行结果
v-on方法处理数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{data}}</p>
<button @click="changeData">methods处理函数</button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
data:111,
age:60,
flag:true
},
methods:{
changeData(){
console.log("geyao")
this.data++
}
}
})
</script>
</body>
</html>
运行结果
v-bind属性设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{data}}</p>
<button @click="changeData(2)">methods处理函数</button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
data:111,
age:60,
flag:true
},
methods:{
changeData(count){
console.log("geyao")
this.data=this.data+count
}
}
})
</script>
</body>
</html>
运行结果
v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{data}}</p>
<img :src="url">
<button>methods处理函数</button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
url:"./1.jpg",
data:111,
age:60,
flag:true
},
methods:{
changeData(count){
console.log("geyao")
this.data=this.data+count
}
}
})
</script>
</body>
</html>
运行结果
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul v-for="(item,index) in data">
<li>{{item}}</li>
</ul>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
url:"./1.jpg",
data:["111","222","333"],
age:60,
flag:true
},
methods:{
changeData(count){
console.log("geyao")
this.data=this.data+count
}
}
})
</script>
</body>
</html>
运行结果
