个性化阅读
专注于IT技术分析

VueJS开发:Vue实例和组件component实例创建和原理详解

一、Vue实例创建和原理解析

VueJS开发的第一步是创建一个Vue实例,这个实例称为根vue实例,语法如下:

var app = new Vue({
            // options 选项
        });

下面看一个实例,看看Vue实例的构造函数需要哪些元素,如下:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h2>{{subtitle}}</h2>
        <h3>{{content}}</h3>
        <h4>{{details()}}</h4>
    </div>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

app.js代码如下:

var app = new Vue({
    el: "#app",
    data: {
        title: "VueJS实例",
        subtitle: "VueJS实例构造函数的所有元素解析",
        content: "VueJS开发,Vue实例创建,Vue的构造函数详解"
    },
    methods: {
        details: function(){
            return "all info: " + this.title + " " + this.subtitle + " " + this.content;
        }
    }
});

1、创建Vue的构造函数中传入的是一个对象,其中有一个el元素,它的值为DOM元素的id,在上面的例子中,el的值为#app,它是div元素的id,在上面的html代码中你可以看到:

<div id="app">

在div内部操作会影响该div元素,但是在div的外部进行其它处理或操作,则不会影响该div。

2、下一步是创建一个数据对象,它有3个属性:title、subtitle和content,和这些属性名相同的在div中也有,如下:

<div id="app">
        <h1>{{title}}</h1>
        <h2>{{subtitle}}</h2>
        <h3>{{content}}</h3>
    </div>

{{}}称为插值表达式,插值表达式中的元素将会被数据对象替换,要注意的是,数据对象和插值表达式中的相关名称要相同。

3、下一个是在vue构造函数中methods中定义了一个details函数,与该函数相对应的是#app元素中的{{details()}}。在插值表达式中的函数会被调用,调用的函数在methods中寻找,函数的返回值会打印在{{}}中,如下是以上程序的输出:

VueJS实例构造函数元素详细解析

4、以后的大多开发都是通过将options各种选项传给Vue的构造函数实现,主要是数据data,模板template,挂载元素,方法methods,回调callbacks等等。

下面看看是如下传入数据data元素的,注意上面只是一个例子,在data对象中是详细列出各种属性,但是开发中请不要这么做,因为data对象可能会很复杂,而且这个对象可能在其它地方也会用到,所以请用一个JavaScript对象封装起来,如下代码:

var block = {};
block.title = "VueJS实例";
block.subtitle = "VueJS实例构造函数的所有元素解析";
block.content = "VueJS开发,Vue实例创建,Vue的构造函数详解";

var app = new Vue({
    data: block, // 只需传一个对象即可
});
console.log(app.title);
console.log(app.$data);
console.log(app.$data.subtitle);
console.log(app.$data.content);

在console控制台查看输出如下:

VueJS实例data输出

其中console.log(app.title);输出block对象的title属性。

console.log(app.$data);输出app的data数据对象,该对象其实就是block。

console.log(app.$data.subtitle);输出block对象的subtitle属性。

二、Vue属性和组件component使用和原理解析

在Vue的组件component中,数据对象的引用需要通过一个函数,如下代码:

var block = {};
block.title = "VueJS实例";
block.subtitle = "VueJS实例构造函数的所有元素解析";
block.content = "VueJS开发,Vue实例创建,Vue的构造函数详解";

var app = new Vue({
    data: block, // 只需传一个对象即可
});
console.log(app.title);
console.log(app.$data);
console.log(app.$data.subtitle);
console.log(app.$data.content);

var Component = Vue.extend({
    data: function(){
        return block;
    }
});

var ct = new Component();
console.log(ct.title); // 输出block的title
console.log(ct.$data); // 输出Component中的data
console.log(ct.$data.subtitle); // 输出block或data的subtitle

1、在使用组件component的情况中,数据是一个函数,在Vue.extend中使用,注意extend传入的是一个对象。数据data是一个函数,如下:

data: function(){
        return block;
    }

2、要引用组件中的data数据对象,我们需要创建一个组件实例,也就是:

var ct = new Component();

要获取详细的数据,我们需要只需和上面Vue实例一样调用即可,例如:

console.log(ct.title); // 输出block的title
console.log(ct.$data); // 输出Component中的data
console.log(ct.$data.subtitle); // 输出block或data的subtitle

下面是浏览器console的输出:

vueJS组件component创建实例控制台输出

3、props属性,props的类型是一个字符串数组或一个对象,它的值是一个数组或一个对象,它们是用于接受来自父组件的数据的属性,例子1:

Vue.component("props sample", {
    props : ["size", "message"]
})

例子2:

Vue.component("props-demo", {
    props: {
        age: Number, // 属性age的类型检查
        username: { // 属性username的类型检查
            type: String, // 属性的类型为String
            default: "nickname",
            require: true,
            validator: function(value){
                return value != "" && value.length > 6;
            }
        }
    }
});

4、propsData属性,该属于用于单元测试。

5、type属性,值为字符串数组,例如{[key: string]: any},它需要在创建Vue实例期间传递,例如:

var Comp = Vue.extend({
    props: ["message"],
    template: "<div>{{message}}</div>"
 })
 var vm = new Comp({
    propsData: {
       message: "hello vue js"
    }
 })

6、computed属性,用于计算属性值,类型为:{[key: string]: Function | {get: Function, set: Function}},例子如下:

var app = new Vue({
    data: {name: "VueJS"}, // 属性name
    computed: { // 计算属性name的值
       // 获取name值
       basic: function () {
          return this.name + " " + "Development";
       },
       
       // 同时提供get和set函数
       direction: {
          get: function () {
             return this.name + " " + "UI";
          },
          set: function (v) {
             this.name = v;
          }
       }
    }
 })
 console.log(app.direction);
 app.direction = "ReactJS";
 console.log(app.name);
 console.log(app.basic);

computed中有两个函数,basic函数和direction函数,basic函数返回this.name+” ”+”Development”,函数direction有两个函数get和set。

变量app是一个Vue实例,可以使用调用basic和direction,其中app.direction调用其中的函数get函数,赋值时调用set函数,app.basic调用basic函数获取值,输出如下:

Vue实例computed输出

7、methods属性,Vue实例包含该methods属性,如下面的代码所示。我们可以使用Vue对象访问该函数。

var app = new Vue({
    data: {name: "VueJS"},
    methods: {
       topic: function () {
          this.name += " UI";
       }
    }
 })
 app.topic();
 console.log(app.name); // "VueJS UI" 

methods是Vue构造函数的一部分,使用vue实例对象app调用topic(),name属性的值会在topic函数中被更新,输出如下:

VueJS实例methods属性使用

更多内容推荐:Vue入门使用教程

赞(0) 打赏
未经允许不得转载:srcmini » VueJS开发:Vue实例和组件component实例创建和原理详解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏