之前發生了一個錯誤，事件綁定一直不成功，就是下面的錯誤代碼
<div id="app">
當前計數：{{count}}
<button v-if="0">大家好0</button>
<button v-if="1">大家好1</button>
<img v-bind:src="imgurl" alt="">
<a :href="aurl">百度一下</a>
</div>
<button v-on:click="count++">+</button>
<button v-on:click="sub">-</button>
就是因爲 button沒有放進div id="app"的div 裏面，所有沒有掛載，導致了事件沒有綁定成功
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
當前計數：{{count}}
<button v-on:click="count++">+</button>
<button v-on:click="sub">-</button>
<button v-if="0">大家好0</button>
<button v-if="1">大家好1</button>
<img v-bind:src="imgurl" alt="">
<a :href="aurl">百度一下</a>
</div>
<div id="a"></div>
<script>
const app = new Vue({
el: "#app",
data: {
count:1,
movies:["海賊王","星際穿越","火影","faker"],
imgurl:"1.jpg",
aurl:"www.baidu.com"
},
methods:{
sub:function(){
this.count--;
console.log("執行了代碼");
}
}
})
</script>
</body>
</html>
1.插值語句：
v-once
v-html
v-text
v-pre
v-cloak
2.動態綁定屬性
一般用於圖片的src 還有 a標籤的 鏈接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<img :src="imgurl">
<a :href="ahref">百度的鏈接</a>
</div>
</body>
<script>
const app = new Vue({
el: "#app",
data: {
imgurl: "picture/1.jpg",
ahref: "https://www.baidu.com"
}
})
</script>
</html>
3.計算屬性
就是在Vue下面有一個computed 的屬性，和 methods 區別就是 computed一個只需要運行一次，有緩存 ,methods 用一次調用一次
4.事件的監聽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="btnclick()">按鈕一</button>
<button @click="btnclick()">按鈕二</button>
<!-- <button @click="console.log('大家好')">按鈕一</button> -->
<button @click="btnclick2">按鈕三</button>
<button @click="btnclick3('joker',$event)">按鈕四</button>
<button>按鈕五</button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
name:"joker"
},
methods:{
btnclick(){
console.log("joker 你好 btnclick")
},
//這個是傳入事件
btnclick2(abc){
console.log("說謊家 你好 btnclic2")
console.log(abc)
},
//又想傳入參數，還有事件
btnclick3(abc,event){
console.log("你好 btnclic3")
console.log(abc)
console.log(event)
}
}
})
</script>
</body>
</html>
按鍵的監聽：
<input type="text" @keyup="keyup">
<input type="text" @keyup.enter="keyup">
5.條件判斷
v-if
v-else-if
v-else
6.循環遍歷
v-for
注意點，其中還可以放入key ,index ，等我學到的再次更新
v-for="(item,index) in movies"
