4.前端-Vue的基本介紹
阿新 • • 發佈：2021-07-31
- {{}}只能放在文字上去顯示 在其他地方使用得用v-bind可以直接簡寫成：（雙大括號在網路垃圾的時候會暫顯 v-text就不會）
- el：掛載的模板
- data：繫結的資料 當資料的值開始變化檢視也跟著變化我們稱之為相應式的
- methods：裡面可以定義方法
- 雙向繫結：檢視改變資料也應該相應的改變 --v-model
- 繫結單機事件：v-on:click
<!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>Document</title> </head> <body> <div id="app"> <!-- 使用v-model進行雙向繫結 --> <input type="text" v-model="num"> <!--單擊增加次數事件 --> <button v-on:click="num++">點選增加次數</button> <!-- 也可以使用函式繫結事件 --> <button v-on:click="logout()">點選減少次數</button> <h1>{{name}},歡迎寧,現在的時間是{{newDate()}},登陸第{{num}}次</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> let vm=new Vue({ el: "#app", data:{ name: "宇智波", num: 1 }, methods: { newDate(){ return new Date().toLocaleDateString() }, logout(){ //需要使用this才能呼叫的到 this.num--; } }, }) </script> </body> </html>
v-text和v-html
v-bind
v-model實現下拉框
實現單選框
v-on：簡寫是@
.stop阻止事件的傳播
點選3依舊會冒泡傳出2的函式，但是不會往1傳播了
v-for用於迴圈
v-if和v-show用於控制元素顯示和隱藏
v-else和v-else if