Vue基础 | Vue实例

Meter孙

已于 2023-05-08 16:10:31 修改

阅读量85

点赞数

文章标签： vue.js javascript 前端

于 2023-05-08 13:46:37 首次发布

本文链接：https://blog.csdn.net/Metersun1/article/details/130557262

版权

Vue应用始于Vue函数创建的新实例。实例化时，可以传递包含el、data和methods等选项的对象。data中的属性是响应式的，改变会驱动视图更新。新增的属性不会触发响应式更新，除非在实例创建时已存在。Vue实例还提供了一些以$开头的内置属性和方法。

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

Vue基础

创建一个Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。当创建一个 Vue 实例时，你可以传入一个选项对象。在选项对象中，最常用的对象有el（元素）、data（数据）和methods（方法）。

数据与方法

当一个Vue实例被创建时，它将data对象中所有的property加入到Vue的响应式系统中。当这些property的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于data中的property才是响应式的。

如果添加一个新的property例如vm.b = 'hi'，则对b的改动将不会触发任何视图的更新。因为在下面的代码中b并不存在于data中的property中，只有msg的改动会触发视图的更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue学习</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{ msg }}</h1>
</div>
</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: 'Vue学习'
        },
        methods: {}
    })
</script>
</html>

如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: {
    text: '',
    count: 0,
    hidden: false
}

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：

const vm = new Vue({
        el: '#app',
        data: {
            msg: "Vue学习"
        },
        methods: {}
    })
vm.#el === document.getElementById('app'))
vm.$data === {"msg": "Vue学习"}