vue @click 赋值_vue: 深入及生命周期

最新推荐文章于 2024-08-16 07:34:20 发布

weixin_39790102

最新推荐文章于 2024-08-16 07:34:20 发布

阅读量1.6k

点赞数

本文探讨了Vue框架中的关键概念，包括如何在外部改变Vue实例内容，Vue的底层数据绑定机制，以及Vue实例的生命周期。特别讨论了$el、_data和$refs属性的作用，虚拟DOM的实现原理，以及beforeCreate到destroyed期间的各个生命周期钩子函数的触发顺序。同时强调在特定生命周期阶段访问data和methods的限制。

摘要由CSDN通过智能技术生成

在外部(js中或者其他vue实例中)改变vue实例中的内容

<div id="app">
     <p>{
    { title }}</p>
</div>
<div id="app2">
    <p>{
    { title }}</p>
    <button @click = 'changeTitle'>change vm1 title</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const vm = new Vue({
    
     el : "#app",
     data : {
    
         title: "我是一个vue实例"
     }
 })

 setTimeout(() => {
    
 vm.title = "我通过timer改变!"
        }, 1000)

 const vm2 = new Vue({
    
     el : "#app2",
     data : {
    
         title: "我是一个vue实例2"
     },
     methods: {
    
         changeTitle: function() {
    
             vm.title = "变变变！"
         }
     }
 })
</script>

在以上代码中，把vue实例赋值给一个名字，在其他地方就可以通过该名字调用这个实例的内容，比如在setTimeout中调用，或者是在vm2中调用。