快捷搜索:  汽车  科技

vuejs使用技巧(Vue.js基础知识Vue实例)

vuejs使用技巧(Vue.js基础知识Vue实例)例如,如果我们如下定义Vue实例:传递给Vue构造函数的options对象可以具有数据和方法。Vue应用程序大致遵循Model-View-ViewModel模式,其中ViewModel具有应用程序的业务逻辑,View具有用户看到的视图,而Model具有数据。例如,我们可以如下定义一个Vue实例:const vm = new Vue({ });每个Vue应用都包含一个根Vue实例,并由new Vue创建。我们可以将其整理成一棵树,以便于维护。

vuejs使用技巧(Vue.js基础知识Vue实例)(1)

Vue.js是一个易于使用的Web应用程序框架,可用于开发交互式前端应用程序。

在本文中,我们将更详细地介绍Vue实例,包括如何定义它以及它的一些属性。

Vue实例的特征

每个Vue.js应用程序都从定义一个新的Vue实例开始。 Vue构造函数参数是一个带有各种属性的options对象。

我们经常使用vm来引用Vue实例,其中vm代表ViewModel。

Vue应用程序大致遵循Model-View-ViewModel模式,其中ViewModel具有应用程序的业务逻辑,View具有用户看到的视图,而Model具有数据。

例如,我们可以如下定义一个Vue实例:

const vm = new Vue({ });

每个Vue应用都包含一个根Vue实例,并由new Vue创建。我们可以将其整理成一棵树,以便于维护。

数据与方法

传递给Vue构造函数的options对象可以具有数据和方法。

例如,如果我们如下定义Vue实例:

const vm = new Vue({ el: "#app" data: { foo: "bar" } });

然后,我们添加代码:

console.log(vm.foo);

在我们的vm定义下面,由于data.foo的值为'bar',所以我们得到'bar'。

换句话说,如果我们有:

const data = { foo: "bar" }; const vm = new Vue({ el: "#app" data }); console.log(vm.foo === data.foo);

然后console.log将输出为true。

数据更改时,应用程序将使用新数据重新渲染。

如果我们在vm中创建一个新属性并将其设置如下:

let data = { foo: "bar" }; const vm = new Vue({ el: "#app" data }); vm.a = 1;

该应用不会重新渲染。而如果我们写:

let data = { foo: "bar" a: 1 }; const vm = new Vue({ el: "#app" data });

然后,该应用将重新渲染。这意味着我们必须将要渲染的数据放入data字段。

如果我们使用Object.freeze()冻结传递给data的对象,则Vue应用将不会重新渲染,因为无法更改属性。

因此,如果我们有:

let data = { foo: "bar" a: 1 }; Object.freeze(data); const vm = new Vue({ el: "#app" data });

初始渲染后无法进行任何更改,因为我们使用Object.freeze冻结了数据。

Vue实例还公开了许多实例属性和方法。

它们以$开头,以便让我们知道它们是Vue实例的一部分。

$el

我们具有$el属性,用来获取Vue实例所在的DOM元素。

例如,如果我们有:

let data = {foo:"bar"}; const vm = new Vue({ el:"#app", data }); console.log(vm.$el === document.getElementById("app"));

然后,由于我们的Vue实例位于ID为app的元素中,所以console.log将输出为true。

$data

$data属性等价于传递给Vue构造函数的options对象中设置的data属性的值。

因此,如果我们有:

let data = { foo: "bar" }; const vm = new Vue({ el: "#app" data }); console.log(vm.$data === data);

然后,由于data与vm.$data引用相同的对象,所以console.log输出true。

$watch

$watch是一个实例方法,可让我们监听options参数里data对象中的更改。

例如,如果我们有:

src/ index.js

let data = {foo: "bar"}; const vm = new Vue({ el: "#app", data }); vm.$watch("foo" (newValue oldValue) => { console.log(newValue oldValue); });

src/ index.html:

<!DOCTYPE html> <html> <head> <title>Hello</title> <meta charset="UTF-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="foo" /> </div> <script src="./src/index.js"></script> </body> </html>

然后,当我们在输入框中输入内容时,console.log会输出data.foo新旧值:

vm.$watch("foo" (newValue oldValue) => { console.log(newValue oldValue); });

这是因为data.foo属性的更改在被一直监听着。当我们在框中键入内容时,v-model会自动更新foo的值。

因此,当我们键入内容时,将监听foo的更改,并由传递给$watch方法的处理函数记录该更改。

总结

通过将具有data,el和methods属性的options对象传递给Vue构造函数来创建Vue实例。它返回我们Vue应用程序的实例。

实例具有$el属性,以获取我们的应用程序所在的DOM元素。

此外,还有$data属性可获取data属性的值,以获取options对象中的data属性值数据。

最后,我们有$watch方法来监听数据中的更改。

推荐阅读:

构建Vue.js组件的10个技巧

如何在Vuejs中实现页面空闲超时检测

猜您喜欢: