引入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>
5、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>
// 生命周期函数，在 某一时刻 会自动执行的函数
const app=Vue.createApp({
data(){
return{
message: 'Hello world'
}
},
methods: {
handleItemClick() {
console.log('hello world')
}
},
beforeCreate(){ //在实例生成之前会自动执行的函数
console.log('beforecreate')
},
created(){ //实例生成之后会自动执行的函数
console.log('created')
},
beforeMount(){ //在模板渲染完成之前执行的函数
console.log('beforeMount')
},
mounted(){ //模板渲染完成之后执行的函数
console.log('mounted')
},
template: '<h1 v-on:click="handleItemClick">{{message}}</h1>'
})
app.mount("#app") //第二个app是上面的body标签里面的app这个id。
</script>
</html>
6、鼠标放上去悬空显示
<!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>
// 生命周期函数，在 某一时刻 会自动执行的函数
const app=Vue.createApp({
data(){
return{
message: 'chaofeng.com'
}
},
methods: {
handleItemClick() {
this.message = this.message == 'chaofeng.com'?'超峰博客':'chaofeng.com'
}
},
template: `
<h1 v-bind:title="message">{{message}}</h1>`
})
app.mount("#app") //第二个app是上面的body标签里面的app这个id。
</script>
</html>
对上面的一个改进
<!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>
// 生命周期函数，在 某一时刻 会自动执行的函数
const app=Vue.createApp({
data(){
return{
message: 'chaofeng.com'
}
},
methods: {
handleItemClick() {
this.message = this.message == 'chaofeng.com'?'超峰博客':'chaofeng.com'
}
},
// @符号相当于v-on:click
template: `
<h1
v-bind:title="message"
@click="handleItemClick"
>{{message}}</h1>
`
})
app.mount("#app") //第二个app是上面的body标签里面的app这个id。
</script>
</html>
7、阻止默认事件
<!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>
// 生命周期函数，在 某一时刻 会自动执行的函数
const app=Vue.createApp({
data(){
return{
message: 'chaofeng.com'
}
},
methods: {
handleItemClick() {
this.message = this.message == 'chaofeng.com'?'超峰博客':'chaofeng.com'
},
handleButton(e){
alert('技术胖')
}
},
// @符号相当于v-on:click
template: `
<h1
v-bind:title="message"
@click="handleItemClick"
>{{message}}
</h1>
<form action="https://www.baidu.com" @click.prevent="handleButton">
<button type="submit">submit</button>
</form>
`
})
app.mount("#app") //第二个app是上面的body标签里面的app这个id。
</script>
</html>
8、模板中的条件判断
<!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>
// 生命周期函数，在 某一时刻 会自动执行的函数
const app=Vue.createApp({
data(){
return{
message: 'bilibili'
}
},
methods: {
handleItemClick() {
this.message = this.message == 'chaofeng.com'?'超峰博客':'chaofeng.com'
}
},
// @符号相当于v-on:click
template: `
<h1 @click="handleItemClick" v-if="message=='chaofeng.com'" class="one">{{message}}</h1>
<h1 @click="handleItemClick" v-if="message=='超峰博客'" class="two">{{message}}</h1>
<h1 @click="handleItemClick" v-if="message=='bilibili'" class="three">{{message}}</h1>
`
})
app.mount("#app") //第二个app是上面的body标签里面的app这个id。
</script>
<style>
.one{color: red}
.two{color: green}
.three{color: orange}
</style>
</html>