文章目录
- 导文
- 下面是创建 Vue 实例的基本步骤
- 常用的 Vue 实例方法和属性
- 总结
导文
Vue的实例是用来创建 Vue 应用程序的对象。通过实例化 Vue 构造函数，我们可以创建一个具有响应式数据、计算属性、方法和生命周期钩子等特性的 Vue 实例。
下面是创建 Vue 实例的基本步骤
- 引入 Vue.js 库：在 HTML 文件中引入 Vue.js 库，可以通过 CDN 或下载本地文件进行引入。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 创建 Vue 实例：使用 new Vue() 创建一个 Vue 实例，并传入一个配置对象作为参数。
var app = new Vue({
// 配置对象
});
在配置对象中，我们可以指定以下几个属性：
-
el：指定 Vue 实例所挂载的元素，可以是一个 CSS 选择器字符串或一个 DOM 元素。
-
data：定义 Vue 实例的初始数据，通常是一个包含多个属性和对应值的对象。
-
computed：定义计算属性，根据已定义的数据属性计算出一个新的值并返回。
-
methods：定义 Vue 实例的方法，可以在模板中调用。
-
created/mounted：生命周期钩子函数，在 Vue 实例被创建/挂载到 DOM 后执行相应的操作。
- 挂载到DOM：将 Vue 实例挂载到指定的 DOM 元素上。
app.$mount("#app");
这样，Vue 实例就与指定元素绑定起来了，可以通过访问 app 对象来操作和更新数据，并在模板中进行双向绑定、事件监听等操作。
常用的 Vue 实例方法和属性
当创建一个 Vue 实例后，我们可以通过 Vue 的实例方法和属性来操作和管理应用程序的状态和逻辑。
下面是一些常用的 Vue 实例方法和属性：
$data：访问 Vue 实例中的数据对象。可以通过app.$data或直接在模板中使用$data来获取数据。
console.log(app.$data);
$props：访问组件实例接收的 props 数据。对于组件实例，可以通过app.$props访问传递给组件的 props 数据。
console.log(app.$props);
$watch：监听数据的变化。可以使用$watch方法监测指定数据的变化，并在变化时执行相应的回调函数。
app.$watch("propertyName", function(newValue, oldValue) {
// 处理数据变化
});
$set：向响应式对象添加新属性。有时候我们需要向已有的响应式对象中动态添加属性，可以使用$set方法。
app.$set(app.object, "newProperty", value);
$on / $emit：自定义事件的监听与触发。使用$on方法监听自定义事件，使用$emit方法触发自定义事件。
app.$on("customEvent", function(data) {
// 监听自定义事件
});
app.$emit("customEvent", eventData);
$refs：访问组件或元素的引用。可以通过 ref 属性给组件或元素指定引用名称，并通过$refs访问引用。
<my-component ref="myRef"></my-component>
app.$refs.myRef; // 访问组件实例或元素
$mount：手动挂载 Vue 实例。如果没有在创建实例时指定 el 属性，则需要手动调用$mount方法将实例挂载到指定的 DOM 元素上。
app.$mount("#app");
上述方法和属性只是 Vue 实例提供的一部分功能，还有更多的方法和属性可以用于处理事件、生命周期钩子、异步操作等。
总结
通过使用 Vue 实例，我们可以更方便地访问和管理应用程序的数据、状态和行为。同时，Vue 实例也是Vue框架中组件化开发的基础，通过实例可以创建包含特定功能和样式的可复用组件。
总结来说，Vue 的实例是用来管理应用程序状态和逻辑的对象，它提供了一种方便的方式来组织和操作应用程序的数据和行为。
