Vue基本使用一-hello world_vue-hello wolrd-优快云博客

本文介绍Vue.js的基础使用方法，包括如何引入Vue.js、创建Vue实例并进行数据绑定。通过示例展示了如何设置Vue实例的el配置项来指定管理的DOM范围，并在视图中展示来自data对象的数据。

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

使用 vue 的基本步骤：

1 引入 vue.js
2 创建 Vue 的实例
  Vue构造函数的参数是一个对象，对象中包含了很多的配置项

<script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      // el -> element
      // el 配置项的值是字符串（选择器）或者DOM对象
      // 作用：指定Vue管理的范围，只有在app元素内部的内容才会收到vue管理
      el: '#app',
      // 数据：相当于 MVVM 中的M数据模型，用来给视图（app）提供数据
      data: {
        msg: 'Hello world！！！',
        user:{name:'小李'}
      }
    })
    // 访问data属性vm.$data.msg === vm.msg
    console.log(vm.$data.msg);
    console.log(vm.msg);
  </script>

数据绑定

解释：{{}}从数据对象data中获取数据
说明：数据对象的属性值发生了改变，插值处的内容都会更新
说明：{{}}中允许使用JavaScript支持的所有表达式（注意，不能出现语句）
注意：Mustache 语法不能作用在 HTML 元素的属性上

<div id="app">
    <!-- Mustache语法也就是{{}}语法 或者 插值表达式 -->
    <h1>{{ msg }}</h1>
    <h1>{{ user.name }}</h1>
    <h1>{{ user.age }}</h1>
</div>

注意：
1 需要在视图中使用的数据，必须提前在data中声明
2 只有提前声明好的属性，才具有响应式的效果
user.name 是响应式的数据，因为已经提前在data中声明了
而 user.age 是非响应式的数据，因为没有提前在data中声明

动态添加响应式数据

// 第一个参数表示：要添加属性的对象
// 第二个参数表示：属性名称
// 第三个参数表示：属性的值
Vue.set(vm.user, 'age', 18)