02-vue-el 和 data

Gy-qwert

已于 2024-02-18 20:39:08 修改

阅读量172

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2023-07-31 02:15:20 首次发布

本文链接：https://blog.csdn.net/qq_47128897/article/details/132014320

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在Vue框架中，"el"和"data"是两个重要的选项。

el（element）：

el选项用于指定Vue实例所管理的DOM元素，它可以是一个选择器字符串或一个DOM元素。Vue将会控制el指定的DOM元素及其内部的内容。
当Vue实例创建时，它会自动将模板编译成渲染函数，并替换el所指定的DOM元素及其内部的内容。这样，Vue实例就会管理el所指定的DOM元素下的所有子节点，使其成为Vue的一部分。
例如，你可以使用el选项将Vue实例绑定到页面中的一个特定的DOM元素上，使其成为Vue的根节点。

data：

data选项是用来定义Vue实例的数据对象。它包含了Vue实例需要响应式更新的数据。
你可以将各种类型的数据定义在data中，如基本数据类型（字符串、数字等）、对象甚至是数组。
在Vue实例中，你可以通过this.$data来访问数据对象，也可以在模板中通过双大括号插值或指令来使用这些数据。
Vue会递归地将data中的属性转换为getter/setter，使得当这些属性被访问或修改时，能够自动触发视图的更新。

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>Vue Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ greeting }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</body>
</html>

JavaScript代码：

new Vue({
  el: '#app',
  data: {
    greeting: 'Hello, Vue!',
    count: 0
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
});

在上述示例中，我们创建了一个简单的Vue实例，并将其绑定到id为"app"的<div>元素上。Vue实例的el选项指定了DOM元素，即<div>元素，它将被Vue所管理。

在data选项中，我们定义了两个属性：greeting和count。greeting存储了一个字符串，表示问候语；count存储了一个数字，表示计数器的值。

在模板中，我们使用双大括号插值语法（{{ }}）来展示数据。{{ greeting }}将显示"Hello, Vue!"，{{ count }}将显示计数器的当前值。

同时，我们还定义了一个方法increment，当点击按钮时会触发该方法。该方法会将count属性的值加1，从而实现计数器的增加。

当页面加载时，Vue会自动编译模板，替换el所指定的DOM元素及其内部的内容。最终得到的页面将显示问候语和计数器，并且当点击按钮时，计数器会自动增加，并更新视图。