<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本模闆指令</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Test">
<p>
Vue 是一套建構使用者界面的漸進式架構。
它的思想在于，資料操作元素，MVVM模式，而傳統的模式是需要根據dom中存在的元素，然後通過js方式擷取到
dom對象以便于操作對象的值
</p>
<!-- 插值表達式 -->
{{ msg }}<br>
<!-- v-model -->
<input type="text" name="v-model" id="model" v-model="msg" />
<br>
<!-- v-on -->
<button @click="reverseMessage">測試</button>
<div>
<ul>
<!-- v-for -->
<li v-for="(item,index) in foods">{{ item }}</li>
</ul>
<input type="text" v-model="tempFoods" />
<button @click=addFoods(tempFoods)>添加資料</button>
<button @click=deteleFoods()>删除資料</button>
</div>
<!-- v-bind -->
<div>
<p :class="bgcolor">我的背景色将會改變</p>
<button @click=changeStyle()>改變顔色</button>
</div>
<!-- v-show和v-if -->
<div>
<p v-show="tShow">我出來了</p>
<button @click="changeShow()">點選我将會顯示或隐藏（show）</button>
</div>
<div>
<p v-if="tIf">我出來了</p>
<button @click="changetIf()">點選我将會顯示或隐藏（if）</button>
</div>
</div>
<!--mount是将指定的元件挂載到Vue應用中 -->
<!-- createApp是指建立Vue應用 -->
<!-- this代指被Vue管理的對象 -->
<!-- 使用v-model實作雙向資料綁定 -->
<!-- 雙向資料綁定，指的是可以通過資料改變dom元素的值，也可以通過dom元素輸入的值改變資料的值 -->
<!-- v-for指令用于周遊資料動态的生成dom元素 -->
<!-- v-if是條件判斷的指令，用于控制dom元素是否會顯示插入dom對象中，
v-show有同樣的效果，隻是v-show使用css屬性的display：none來控制的，dom元素始終在dom對象中 -->
<!-- v-bind是對标簽的屬性值進行綁定操作 -->
<script lang="ts">
const app = {
data() {
return {
msg: 'Runoob!',
foods: ["冬瓜", "西瓜", "甜菜", "空心菜"],
tempFoods: '',
bgcolor: 'bg',
tShow: true,
tIf: true
}
},
methods: {
reverseMessage() {
this.msg = "改變值了"
},
addFoods(food) {
if (food === '') {
console.log("不能添加空的資料")
} else {
this.foods.push(food)
console.log("添加成功")
}
},
deteleFoods() {
this.foods.pop()
},
changeStyle() {
this.bgcolor = 'ba'
},
changeShow() {
this.tShow = !this.tShow
console.log("tshow" + this.tShow)
},
changetIf() {
this.tIf = !this.tIf
console.log("tIf" + this.tIf)
}
}
}
Vue.createApp(app).mount('#Test')
</script>
</body>
<style>
.bg {
background-color: rgba(10, 124, 245, 0.067);
}
.ba {
background-color: rgb(149, 124, 173);
}
</style>
</html>
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)