Vue3基础学习笔记（二）Vue基础语法1

smellsummer

已于 2023-08-23 11:32:14 修改

阅读量38

点赞数

分类专栏： vue基础学习笔记文章标签： vue.js 学习笔记

于 2023-06-21 09:23:37 首次发布

本文链接：https://blog.csdn.net/smellsummer/article/details/131231262

版权

vue基础学习笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

应用和组件基础概念

<body>
    <div id="root"></div>
</body>
<script>
    // createApp表示创建一个Vue应用，存储到app变量中
    // 传入的参数表示应用最外层的组件应该如何展示
    // vue面向对象编程参考了mvvm设计模式，m->moddle数据，v->view 视图，vm->viewModel 视图数据连接层
    const app= Vue.createApp({
        data(){
            return{
                message:'hello'
            }
        },
        template:"<div>{{message}}</div>"
    });
    // vm代表的就是vue应用的根组件
    const vm = app.mount('#root');
</script>

生命周期函数

生命周期函数：在某一时刻会自动执行的函数
在这里插入图片描述

beforeCreate() 在实例生成之前会自动执行函数
created() 在实例生成之后会自动执行函数
beforeMount() 在组件内容被渲染到页面之前自动执行的函数
mounted()在组件内容被渲染到页面之后自动执行的函数
beforeUpdate() 当数据发生变化时自动执行的函数
updated()当数据发生变化时，同时页面更新后，自动执行的函数
beforeUnmount() 当vue应用失效时，自动执行的函数
unmounted() 当vue应用失效,且dom完全销毁之后，自动执行的函数

整体代码如下：

<body>
    <div id="root"></div>
</body>
<script>
    const app= Vue.createApp({
        data(){
            return{
                message:'hello'
            }
        },
        // 在实例生成之前会自动执行函数
        beforeCreate() {
            console.log('beforeCreate');
        },
        // 在实例生成之后会自动执行函数
        created() {
            console.log('created');
        },
        // 在组件内容被渲染到页面之前自动执行的函数
        beforeMount() {
            console.log(document.getElementById('root').innerHTML,'beforeMount')
        },
        // 在组件内容被渲染到页面之后自动执行的函数
        mounted() {
            console.log(document.getElementById('root').innerHTML,'mounted')
        },
        // 当数据发生变化时自动执行的函数(可在控制台修改vm.$data.message数据进行测试)
        beforeUpdate() {
            console.log(document.getElementById('root').innerHTML,'beforeUpdate')
        },
        // 当数据发生变化时，同时页面更新后，自动执行的函数
        updated() {
            console.log(document.getElementById('root').innerHTML,'updated')
        },
        // 当vue应用失效时，自动执行的函数(可在控制台输入app.unmount()使vue失效进行测试)
        beforeUnmount() {
            console.log(document.getElementById('root').innerHTML,"beforeUnmount")
        },
        // 当vue应用失效,且dom完全销毁之后，自动执行的函数
        unmounted() {
            console.log(document.getElementById('root').innerHTML,"unmounted")
        },
        template:`
        <div>
            {{message}}
        </div>
        `
    });
    const vm = app.mount('#root');
</script>

输出结果1：
执行beforeMount()函数，组件内容未被渲染到页面上，页面内容（document.getElementById(‘root’).innerHTML）为空
执行mounted() 函数，组件内容已被渲染到页面上，页面内容（document.getElementById(‘root’).innerHTML）正常显示hello
Alt
输出结果2：
在控制台输入vm.$data.message = “ABC” ，将页面显示的数据 hello修改为 ABC
Alt
输出结果3：
在控制台输入app.unmount()使vue失效
Alt

smellsummer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3基础学习笔记（二）Vue基础语法1

/</// createApp表示创建一个Vue应用，存储到app变量中// 传入的参数表示应用最外层的组件应该如何展示// vue面向对象编程参考了mvvm设计模式，m->moddle数据，v->view 视图，vm->viewModel 视图数据连接层constcreateAppdatareturnmessage'hello'template;// vm代表的就是vue应用的根组件constmount'#root';</
复制链接

扫一扫

专栏目录