vue3

2023-10-31 16:18:04

最基本使用

<!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完全销毁之后，会自动执行

码农公寓

mvvm设计模式讲解

相关文章