helloworld!
参考技术胖的blog:http://jspang.com/detailed?id=68
要引入Vue3的地址:
<script src="https://unpkg.com/vue@next"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
//创建Vue实例
template: '<div>Hello World</div>' // template是模板的意思,就是在JS里写html代码
}).mount("#app") //这个模板需要放一个位置,也就是说挂载,挂载到`id=app`的DOM上
</script>
</html>
计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>counter</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
counter: 1
}
},
mounted() {
console.log('页面加载完成后-自动执行')
setInterval(() => {
//lambda
this.counter += 1 //这个this.counter指向的就是data中的counter
//this.$data.counter +=1 //效果相同
}, 1000)
},
template: '<div>{
{counter}}</div>'
}).mount("#app");
</script>
</html>
按钮点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
counter: "欢迎光临,贵宾一位"
}
},
methods: {
welcomeBtnClick() {
this.counter = "欢迎你的光临,贵宾一位!"
},
byeBtnClick() {
this.counter = "欢迎下次光临"
},
},
template: `
<div>
<div>{
{counter}}</div>
<button v-on:click="welcomeBtnClick">有顾客来</button>
<button v-on:click="byeBtnClick">顾客离开</button>
</div>`
}).mount("#app");
</script>
</html>
if判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
counter: "欢迎光临,贵宾一位",
setMeal: '真空套餐 帝王套餐 夏日套餐 学生套餐',
isShowMeal: false
}
},
methods: {
welcomeBtnClick() {
this.counter = "欢迎你的光临,贵宾一位!"
},
byeBtnClick() {
this.counter = "欢迎下次光临"
},
showOrHideBtnClick() {
//改变判断值
this.isShowMeal = !this.isShowMeal
},
},
template: `
<div>
<div>{
{counter}}</div>
<button v-on:click="welcomeBtnClick">有顾客来</button>
<button v-on:click="byeBtnClick">顾客离开</button>
<div>
<div v-if="isShowMeal">{
{setMeal}}</div> //进行if判断
<button v-on:click="showOrHideBtnClick">显示/隐藏套餐</button>
</div>
</div>`
}).mount("#app");
</script>
</html>
循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
list: ['1-大脚', '2-刘英', '3-晓红']
}
},
methods: {
},
template: `
<ul>
<li v-for="item of list">{
{item}}</li>
</ul>`//对list进行循环,item就是里面的循环对象
}).mount("#app");
</script>
</html>
显示下标
<li v-for="(item,index) of list">[{
{index}}]{
{item}}</li>
注意index的位置,是第二个!
数据双向绑定(v-model)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
this.list.push(this.inputValue)
this.inputValue = '' //输入完以后就将inputValue的值清空
}
},
template: `
<ul>
<input v-model="inputValue" />
<button v-on:click="handleAddItem">增加佳丽</button>
<li v-for="(item,index) of list">[{
{index}}]{
{item}}</li>
</ul>`//对list进行循环,item就是里面的循环对象
}).mount("#app");
</script>
</html>
组件化开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>佳丽列表</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
template: `
<div>
<my-title/>
<input v-model="inputValue"/>
<button v-on:click="handleAddItem">增加佳丽</button>
<ul>
<my-jiali
v-for="(item,index) of list"
v-bind:item="item"
v-bind:index="index"
/>
</ul>
</div>
`
})
//这里定义了俩组件,一个是my-title,一个是my-jiali,这些组件可以用在template中,降低耦合
app.component('my-title', {
template: '<h1 style="text-align:center">象牙山洗脚城</h1>'
})//标题组件
app.component('my-jiali', {
//props 是用于接收父组件的参数的,通过v-bind将父组件的值传递给子组件中,props来获取值
props: ['item', 'index'],
template: `
<li>[{
{index}}]-{
{item}}</li>`
})//循环的组件
//最后挂载到id=app的 div标签上
app.mount("#app")
</script>
</html>
mvvm设计模式
Vue的编程设计模式应该叫做mvvm
的设计模式。什么叫做mvvm
哪?它首先是面向数据的编程,程序中定义了数据,然后定义了模板,Vue
就可以把数据和模板自动进行关联。最后挂载到真实的DOM
上,展示给用户。
mvvm解释: 第一个
m
代表model
数据,第一个v
代表view
视图,最后两个字幕vm
代表viewModel
视图数据连接层。
<script>
const app = Vue.createApp({
data() {
return {
message: 'jspang.com' //1.在这里定义了数据,也就是`model`数据
}
},
template: "<h2>{
{message}}</h2>" //2.在这里定义了模板,也就是`view`,
//定义后的自动关联,就叫做`vm`,viewModel数据视图连接层。
})
app.mount("#app")
</script>
Vue3.x生命周期函数
官方图
- beforeCreate( ) :在实例生成之前会自动执行的函数
- created( ) : 在实例生成之后会自动执行的函数
- beforeMount( ) : 在模板渲染完成之前执行的函数
- mounted( ) : 在模板渲染完成之后执行的函数
js代码
<script>
Vue.createApp({
data() {
return {
counter: "欢迎光临,贵宾一位",
setMeal: '真空套餐 帝王套餐 夏日套餐 学生套餐',
isShowMeal: false
}
},
methods: {
welcomeBtnClick() {
this.counter = "欢迎你的光临,贵宾一位!"
},
byeBtnClick() {
this.counter = "欢迎下次光临"
},
showOrHideBtnClick() {
this.isShowMeal = !this.isShowMeal
},
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log('mounted')
},
template: `
<div>
<div>{
{counter}}</div>
<button v-on:click="welcomeBtnClick">有顾客来</button>
<button v-on:click="byeBtnClick">顾客离开</button>
<div>
<div v-if="isShowMeal">{
{setMeal}}</div>
<button v-on:click="showOrHideBtnClick">显示/隐藏套餐</button>
</div>
</div>`
}).mount("#app");
</script>
beforeUpdate和updated的区别
在beforeUpdate
时,DOM的内容并没有渲染更新,而到了updated
中DOM的内容已经进行了更新。这就是两个生命周期函数的区别
<script>
Vue.createApp({
data() {
return {
message: 'jspang.com'
}
},
methods: {
handleItemClick() {
this.message = this.message == 'jspang.com' ? "技术胖" : "jspang.com"
}
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
mounted() {
console.log('mounted')
},
template: `
<h2 v-on:click='handleItemClick'>{
{message}}</h2>`
}).mount("#app");
</script>
beforUnmount和unmounted生命周期函数
这两个生命周期函数是在Vue销毁时自动执行的函数,一个是销毁前执行,一个是销毁后执行。
- beforeUnmount( ) :当Vue应用失效时,会自动执行的函数
- unmounted() : 当Vue应用失效时,且DOM完全销毁之后,会自动执行
关键js代码
<script>
const app = Vue.createApp({
data() {
return {
message: 'jspang.com'
}
},
methods: {
handleItemClick() {
this.message = this.message == 'jspang.com' ? "技术胖" : "jspang.com"
}
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeUnmount() {
console.log('beforeUnmount')
},
unmounted() {
console.log('unmounted')
console.log(document.getElementById('app').innerHTML)
},
mounted() {
console.log('mounted')
console.log(document.getElementById('app').innerHTML)
},
template: `
<h2 v-on:click='handleItemClick'>{
{message}}</h2>`
})
app.mount("#app");
在浏览器上输入
app.unmount()
即可看到效果
在浏览器执行app.unmount()
,会看到,在beforeUnmount
方法中还是有DOM内容的,然后到了unmounted
方法中,就已经没有任何的DOM内容了
Vue3中有八个生命周期函数,
- beforeCreate( ) :在实例生成之前会自动执行的函数
- created( ) : 在实例生成之后会自动执行的函数
- beforeMount( ) : 在模板渲染完成之前执行的函数
- mounted( ) : 在模板渲染完成之后执行的函数
- beforeUpdate :当data中的数据变化时, 会立即自动执行的函数
- updated:当data中的数据发生变化,页面重新渲染完后,会自动执行的函数
- beforeUnmount( ) :当Vue应用失效时,会自动执行的函数
- unmounted() : 当Vue应用失效时,且DOM完全销毁之后,会自动执行
这些生命周期虽然多,但总共就四个关键节点:创建、渲染、更新、销毁。最主要的理解是他们是自动执行的函数。