vue3
作者：互联网
最基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
template: '<div>Hello World</div>'
}).mount("#app")
</script>
</html>
createApp()方法：
在第一篇文章编写HelloWorld的时候，就写过这句话Vue.createApp()从英文单词上理解，这个就是创建一个应用create-创建，App-Application-应用，前面的Vue就是Vue这个框架，所以Vue.createApp()的意思就是创建一个Vue的应用。
mount()方法
mount()方法就是挂载到某个Html的DOM节点上，它接受一个字符串型参数,参数可以使用CSS选择器，一般都是ID选择器的形式，指定挂载的DOM元素。
mvvm设计模式讲解
Vue的编程设计模式应该叫做mvvm的设计模式。什么叫做mvvm哪？它首先是面向数据的编程，程序中定义了数据，然后定义了模板，Vue就可以把数据和模板自动进行关联。最后挂载到真实的DOM上，展示给用户。
mvvm解释: 第一个
m代表model数据，第一个v代表view视图，最后两个字幕vm代表viewModel视图数据连接层。
组件使用
<!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>
`
})
app.component('my-title', {
template: '<h1 style="text-align:center">象牙山洗脚城</h1>'
})
app.component('my-jiali', {
props: ['item', 'index'],
template: ` <li >[{{index}}]-{{item}}</li>`
})
app.mount("#app")
</script>
</html>
Vue3中有八个生命周期函数，
- beforeCreate( ) ：在实例生成之前会自动执行的函数
- created( ) : 在实例生成之后会自动执行的函数
- beforeMount( ) : 在模板渲染完成之前执行的函数
- mounted( ) : 在模板渲染完成之后执行的函数
- beforeUpdate ：当data中的数据变化时， 会立即自动执行的函数
- updated：当data中的数据发生变化，页面重新渲染完后，会自动执行的函数
- beforeUnmount( ) :当Vue应用失效时，会自动执行的函数
- unmounted() : 当Vue应用失效时，且DOM完全销毁之后，会自动执行
标签：Vue,createApp,函数,DOM,app,template,vue3 来源： https://www.cnblogs.com/foreXdd/p/14732549.html