Vue实例对象

最新推荐文章于 2024-12-13 22:54:13 发布

原创最新推荐文章于 2024-12-13 22:54:13 发布 · 9k 阅读

23 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

4 篇文章

订阅专栏

Vue实例对象是Vue.js的基础，通过new Vue()构造，常用参数包括el（指定挂载点）、template（定义模板）和data（管理数据）。data中的属性在实例中可直接访问，并用于模板渲染。Vue实例的生命周期包括多个阶段。组件方面，可以全局或局部注册，如全局注册组件`Vue.component(id, definition)`，局部注册则在Vue实例的components选项中定义。" 88399361,8094212,进程的组成与描述,"['操作系统', '进程管理']

Vue实例对象
Vue()是一个构造函数，用new Vue(构造参数)得到的就是一个实例对象，Vue实例对象是Vue.js中最基本的单元。构造参数是一个对象，构造参数的属性即为参数选项，常见的参数选项有el、data、template、components等。
在项目中，在main.js中通过创建最外层的Vue实例对象来实现根结点、根组件的功能。

参数选项：

el：即element，表示当前Vue实例对象的装载位置，装载在哪个元素上，也称为挂载点。装载的含义是将template中的内容替换挂载点元素所对应的全部HTML代码。
template：表示装载的内容，HTML代码、包含其他组件的HTML片段，称为模板。
data：数据，是一个对象，表示该实例对象会用到的数据，其中的属性和属性值（字段）会被代理到当前实例对象。比如data中有一个属性为fruit，属性值为banana，那么可以在实例对象中直接用属性访问符号（·）来访问。也可以直接在template对应的HTML片段中引用相应字段，比如用{{变量名}}来实现数据渲染。例：
var my = new Vue({
el:"#app",
template: “

{{fruit}}}

”,
data:{
fruit:“banana”
}
});
my.fruit;//“banana”
1.1 完整测试代码

新建index.html文件，其中采用

index.html 渲染出来的页面可以发现整个div#app被替换成了template中的HTML片段

也可以用class属性来获取挂载点，即el属性为.outerDiv，渲染结果与采用id来获取挂载点，即el属性为#app时的渲染结果相同。

    var my = new Vue({
        el:".outerDiv",
        template: "<p>{{fruit}}</p>",
        data:{
            fruit:"banana"
        }
    });

1.2 Vue实例对象的生存周期

https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

2.Vue组件
2.1 测试代码

  本节使用vue-cli生成一个项目Demo4，主要在main.js、index.html中操作>。首先清空main.js代码，接下来一步步写入代码。本项目已经安装了插件（cnpm install），因此启动时直接cnpm run dev（开发环境）即可。

import Vue from “vue” ES6语法，引入vue这个库并赋值给Vue这个变量，类似于require()，这样Vue就引入到main.js的全局中。

----------index.html----------------

demo4

------------main.js--------------

import Vue from ‘vue’

new Vue({
el:"#app",
template:“

hello world{{word}}

”,
data:{
word:" nihao"
}
});
2.2 组件的注册和引入

（1）组件树

（2）组件的注册和引入

（2.1）全局注册：Vue.component(id,definition)

   全局注册的组件为全局组件。

    这里的id为组件名，也就是在index.html中使用标签所引用的名字，definition相当于new Vue(构造参数)，只不过可以省略new Vue()，直接将构造参数填入即可，子组件一般就不需要挂载点el了，但是一般需要template、data。

    参数选项data有两种方式，一种是data:{}，另一种是data:function(){return {};}，后者不会出现单一引用问题（比如index.html中引入了多个<my-header>标签，那么这些标签所引用的data中的数据不会共享，不会发生影响彼此的情况），建议采用后者。

---------main.js------------

import Vue from ‘vue’

Vue.component(“my-header”,{
template:"

{{word}} This is my header

",
data:function () {
return {
word:“hello word”
}
}
});

new Vue({
el:"#app"
});
----------index.html------------（仅显示body）

结果

（2.2）局部注册

      每个组件都是一个Vue实例对象，其中都有components参数选项，可以使用这个参数选项对当前实例对象（组件）注册其子组件。子组件又可以注册其子组件，进而形成了组件树。这里components是一个对象，其中的字段值我们一般抽象出来一个变量，比如myHeader和myHeaderChild，这些变量的值其实就是子组件（实例对象），只不过我们可以省略new Vue()，直接使用构造参数来表示。

------------main.js--------------

import Vue from ‘vue’

let myHeaderChild = {
template:"

“,
data:function () {
return {
fruit:“Apple”
}
}
};
let myHeader = {
template:”

{{word}} This is my header

",
data:function () {
return {
word:“hello word”
}
},
components: {
“my-header-child”:myHeaderChild
}
};

new Vue({
el:"#app",
components:{
“my-header”:myHeader
}
});
-------------index.html--------------

结果