Vue3.x-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51764257/article/details/130262741

本文介绍了Vue.js的基本概念，包括其作为渐进式框架的特点，以及如何通过`createApp`函数创建应用，数据绑定和`data`、`methods`选项的使用。通过实例演示了如何在HTML中挂载和操作组件的属性和方法。

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

介绍：Vue.js是用于构建用户界面的渐进式框架，vue只关注view层，采用自底向上增量开发的设计，其目标是通过简单的ApI实现响应的数据绑定和组合的视图组件。

提示：在学习Vue前需要先了解HTML、CSS、javaScript的相关知识的了解。

创建后第一个demo中index.html文件代码分析

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo">
  {{ message }}
</div>

<script>
const App = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(App).mount('#app')
</script>
</body>
</html>

vue中的应用是通过createApp函数来创建的,传递给 createApp 的选项用于配置根组件。

const app=Vue.createApp({/*选项*/})

createApp 的参数是根组件（App），在挂载应用时，该组件是渲染的起点。

一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount('#app') 将 Vue 应用 App 挂载到 <div id="app"></div> 中。

Vue.createApp(App).mount('#app')

{{ }} 用于输出对象属性和函数返回值。

{{ message }} 对应应用中 message 的值。

data 选项

data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo"></div>

<script>
const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

document.write(vm.$data.count) // => 4
document.write("<br>")
document.write(vm.count)       // => 4
document.write("<br>")
// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// 反之亦然
vm.$data.count = 6
document.write(vm.count) // => 6
</script>
</body>
</html>

以上实例属性仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。

方法

我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。

以下实例我们添加了 methods 选项，选项中包含了 increment() 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo"></div>

<script>
const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})

const vm = app.mount('#app')

document.write(vm.count) // => 4
document.write("<br>")
vm.increment()

document.write(vm.count) // => 5
</script>
</body>
</html>