<!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>
效果如下图：