最全的react视频【黑马程序员】--第十一章生命周期

最新推荐文章于 2025-01-07 20:05:19 发布

原创最新推荐文章于 2025-01-07 20:05:19 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

前端技术专栏收录该内容

111 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单应用案例，通过动态添加新元素到列表并进行数据绑定，展示了Vue的数据响应性和DOM操作能力。文章详细解释了如何使用v-model双向绑定输入框值，通过@click监听按钮点击事件来触发添加操作，以及利用v-for指令遍历显示列表项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="app">
        <!-- 添加新名称 -->
        <div>
            <input v-model="name" />
            <button @click="add">添加</button>
        </div>
        <ul>
            <li v-for="item in list" :key=item.id>
                <input type="checkbox" />
                编号：{{item.id}} --- 姓名：{{item.name}}
            </li>
        </ul>

    </div>

    <script type="text/javascript">
        const vue = new Vue({
            el: '#app',
            data: {
                name: '礼拜',
                list:[
                    {id: 0, name: '张三'},
                    {id: 1, name: '李四'},
                    {id: 2, name: '王五'}
                ]
            },
            methods: {
                add(){
                    console.log('add函数被执行')
                    var newuser = {id: this.list.length, name: this.name}
                    this.list.unshift(newuser)
                }
            },
            //生命周期函数
            beforeCreate(){
                console.log(this.name)//undefined
                //this.add()//this.add is not a function
                console.log(this.$el)//undefined
            },
            created(){
                console.log(this.name)//张三
                this.add()//add函数被执行
                console.log(this.$el)//undefined
            },
            beforeMount(){
                console.log(this.$el)//输出原始模板结构
            }

        })