Vue实例初始化的选项配置对象详解

1. Vue实例的的data对象

  • 介绍

Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据。也是Vue的核心属性。 它是Vue绑定数据到HTML标签的数据源泉,另外Vue框架会自动监视data里面的数据变化,自动更新数据到HTML标签上去。本质原理是:Vue会自动将data里面的数据进行递归抓换成getter和setter,然后就可以自动更新HTML标签了,当然用getter和setter所以老的浏览器Vue支持的不够好。

  • data对象的类型:

    • 类型是Object或者Function。
    • 如果是组件对象中,data必须是Function类型。【后面学了组件后就明白了,暂时对组件先放放。】
  • 实例:

// 创建普通的Vue实例
var vm = new Vue({
data: data
})
// 组件定义 
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
  data: function () {
  //这里必须是函数!!!
    return { a: 1 }
  }
})

2. Vue实例的computed

  • 介绍

Vue的计算属性(computed)的属性会自动混入Vue的实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了,再计算属性中定义的函数里面可以直接使用指向了vue实例的this,异常方便的啊。

  • 类型

{ 键:函数} { [key: string]: Function | { get: Function, set: Function } } 当然,可以省略setter,如果省略了setter,那么值就可以是普通函数,但是必须有返回值。

  • 官方的实例

    var vm = new Vue({
    data: { a: 1 },
    computed: {
    // 仅读取,值只须为函数
    aDouble: function () {
    return this.a * 2
    },
    // 读取和设置
    aPlus: {
    get: function () {
    return this.a + 1
    },
    set: function (v) {
    this.a = v - 1
    }
    }
    }
    })
    vm.aPlus // -> 2
    vm.aPlus = 3
    vm.a // -> 2
    vm.aDouble // -> 4

      

3. methods

  • 类型: { [key: string]: Function }

  • 详细:

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。

  • 示例:
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2

4. watch

  • 类型

{ [key: string]: string | Function | Object }

  • 详细:

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

  • 示例:
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
// 监控a变量变化的时候,自动执行此函数
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1
//注意,不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。 

参考综合案例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之数据监控</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<input type="button" name="btnGetNumber" value="增加" v-on:click="getNumber()">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
// 事件响应方法的逻辑代码
getNumber: function (e) {
this.number += 1; // 不管是内联方法调用,还是绑定事件处理器两种方式执行事件响应方法的时候 this都是指向 app
}
},
watch: {
// 监控number的变化,并自动执行下面的函数
number: function (val, oldVal) {
console.log('val:' + val + ' - oldVal: ' + oldVal);
}
}
});
</script>
</body>
</html>

5. 设置el的详解

  • 类型

string | HTMLElement

限制: 只在由 new 创建的实例中遵守。

  • 详细:

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标,也就是说Vue绑定数据到哪里去找。可以是CSS 选择器,也可以是一个 HTMLElement实例

在实例挂载之后(生命周期的内容后面会详细讲的奥), 元素可以用 vm.$el 访问。

如果这个选项在实例化时有作用,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。

// 几乎所有例子都用到这个,所以就不再赘述
var app = new Vue({
el: '#app',
...
});
参考: http://www.cnblogs.com/fly_dragon/p/6220273.html

Vue实例初始化的选项配置对象详解的更多相关文章

  1. ASP.NET Core的配置(2):配置模型详解

    在上面一章我们以实例演示的方式介绍了几种读取配置的几种方式,其中涉及到三个重要的对象,它们分别是承载结构化配置信息的Configuration,提供原始配置源数据的ConfigurationProvi ...

  2. mvc-servlet---ServletConfig与ServletContext对象详解(转载)

    ServletConfig与ServletContext对象详解 一.ServletConfig对象    在Servlet的配置文件中,可以使用一个或多个<init-param>标签为s ...

  3. JavaWeb学习----JSP内置对象详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  4. mha配置参数详解

    mha配置参数详解: 参数名字 是否必须 参数作用域 默认值 示例 hostname Yes Local Only - hostname=mysql_server1, hostname=192.168 ...

  5. reids配置参数详解

    转自:http://www.jb51.net/article/60627.htm reids配置参数详解 #daemonize no  默认情况下, redis 不是在后台运行的,如果需要在后台运行, ...

  6. Java编程配置思路详解

    Java编程配置思路详解 SpringBoot虽然提供了很多优秀的starter帮助我们快速开发,可实际生产环境的特殊性,我们依然需要对默认整合配置做自定义操作,提高程序的可控性,虽然你配的不一定比官 ...

  7. Redis配置参数详解

    Redis配置参数详解 /********************************* GENERAL *********************************/ // 是否作为守护进 ...

  8. MHA配置参数详解 【转】

    mha配置参数详解: 参数名字 是否必须 参数作用域 默认值 示例 hostname Yes Local Only - hostname=mysql_server1, hostname=192.168 ...

  9. Vuejs vm对象详解

    Vuejs vm对象详解 vue数据是怎么驱动视图的?一堆数据放在那里是不会有任何作用的,它必须通过我们的View Model(视图模型)才能操控视图. 图中的model其实就是数据,一般我们写成js ...

随机推荐

  1. 关于ARM的开发环境IAR工程的配置问题

    1设置路径使IAR能够自动关联你的头文件 a.将自己的头文件..c文件..s文件放在不同的文件当中.(此处的.C文件和.S文件以及头文件都是开始一个项目所必须有的文件.例如每一个项目都需要对UArt串 ...

  2. [Codeforces #494] Tutorial

    记录下一开始写错的两道水题 E: 先建出直径,然后在保证直径不变的情况下按照最大度数贪心就好了 注意一下一开始的特判 #include <bits/stdc++.h> using name ...

  3. BZOJ 2697 特技飞行(贪心)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2697 [题目大意] 神犇航空开展了一项载客特技飞行业务. 每次飞行长N个单位时间,每个 ...

  4. 【bugku】【ZSCTF】【迷宫RE】Take The Maze WriteUp

    Take The Maze 首先拿进PEID里查一下有没有壳: 无壳,果断拖进IDA.可是Graph View中找不到主程序的位置,在函数表里寻找主函数: 函数太多阻扰了我们找到主程序,运行一下程序找 ...

  5. MYSQL复习笔记6-字符集

    Date: 20100101 Auth: Jin 参考http://blog.sina.com.cn/s/blog_9707fac301016wxm.html 一.字符集介绍 计算机只处理二进制代码 ...

  6. jQuery:validate添加自定义验证

    jQuery.validator.addMethod添加自定义的验证规则 addMethod:name, method, message 简单实例:单个验证的添加 <!DOCTYPE html ...

  7. Dreamweaver 支持Jquery智能提示

    a.下载扩展插件:jQuery_API.mxp b.选择菜单栏:命令->扩展管理,选择刚下载的文件安装 c.重启DW 可以看到

  8. oracle如何查询哪个表数据量大

  9. NSLog 输出格式集合

    • %@ 对象 • %d, %i  整数 • %u  无符整形 • %f  浮点/双字 • %x, %X 二进制整数 • %o  八进制整数 • %zu size_t • %p  指针 • %e  浮 ...

  10. response letter模板

    Dear Dr. or Prof. XXXX (family name of the Editor or Editor-in-Chief who issued the decision letter) ...