1-2 Vue Instance

最新推荐文章于 2025-03-31 16:13:54 发布

huangminmin1001

最新推荐文章于 2025-03-31 16:13:54 发布

阅读量238

点赞数

分类专栏： 1-1Vue

本文链接：https://blog.youkuaiyun.com/huangmin113659/article/details/96304158

版权

1-1Vue 专栏收录该内容

3 篇文章

订阅专栏

本文通过两个示例展示了Vue.js中如何使用实例方法监听数据变化并实现数据绑定。第一个示例冻结了对象属性来观察Vue的数据响应机制；第二个示例演示了如何利用Vue的$watch方法来监听特定数据的变化。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ foo }}</p>
    <!-- this will no longer update `foo`! -->
    <button v-on:click="foo = 'baz'">Change it</button>
</div>
<hr>
<div id="example">
    hello
</div>
<hr>
<script>
    var obj = {
        foo: 'bar'
    }

    Object.freeze(obj)

    new Vue({
        el: '#app',
        data: obj
    })
//------------------------
    var data = { a: 1 }
    var vm = new Vue({
        el: '#example',
        data: data
    })

    vm.$data === data // => true
    vm.$el === document.getElementById('example') // => true

    // $watch is an instance method
    vm.$watch('a', function (newValue, oldValue) {
        console.log(newValue,oldValue)
    })
</script>
</body>
</html>