引入vue插件，开发时直接使用<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>的方式来，这种称为cdn方式的引入，学习的时候用着很不错。
1、创建第一个应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{ message }} {{ name }}</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: 'hello vue!',
name: 'Vue'
}
})
</script>
</body>
</html>
效果如下所示：
2、用vue实现前端的一个计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
Vue.createApp({ //创建一个vue实例
// data函数负责返回数据，声明式的返回数据的方法
data(){
return {
counter: 1
}
},
//钩子函数
mounted(){
setInterval(()=>{
//下面两种用任何一种都可以
// this.counter += 1
this.$data.counter += 1
},1000)
},
template: '<h2><div>{{ counter }}</div></h2>' //双大括号表示字面量
}).mount("#app")
</script>
</html>
3、vue实现鼠标点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
Vue.createApp({
data(){
return {
content: "",
setMeal: "真空套餐 帝王套餐 夏日套餐 学生套餐",
isShowMeal: false
}
},
// methods声明一个事件绑定一个方法
methods: {
welcomeBtnClick() {
this.content = "欢迎你的光临，贵宾一位"
},
byeBtnClick(){
this.content = "欢迎下次光临"
},
showOrHidebtnClick(){
this.isShowMeal = !this.isShowMeal
}
},
template: `
<div>
<div><h1>{{ content }}</h1></div>
<button v-on:click="welcomeBtnClick"><h3>有顾客来</h3></button>
<button v-on:click="byeBtnClick"><h3>顾客离开</h3></button>
<div>
<div v-if="isShowMeal">{{setMeal}}</div>
<button v-on:click="showOrHidebtnClick">显示/隐藏套餐</button>
</div>
</div>
`
}).mount("#app")
</script>
</html>
4、实现一个点击添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
Vue.createApp({
data(){
return{
list: [],
inputValue: ''
}
},
methods: {
handleAdditem(){
// push就是给数组增加数据的，类似python中的list.append()方法
this.list.push(this.inputValue)
this.inputValue=''
}
},
template:`
<div>
//v-model多用于输入框
<input v-model="inputValue" />
<button v-on:click="handleAdditem">增加水果</button>
<ul>
<li v-for="(item,index) in list">[{{index}}]{{item}}</li>
</ul>
</div>
`
}).mount('#app')
</script>
</html>