详解Vue的options


Posted in Vue.js onMay 15, 2021

1. options 是什么

无论是 jQuery.js 还是 Vue.js,都是在 js 的基础上再次封装的库,都需要创建对应的实例来封装对应的操作。如通过 $('div') 获得一个 jQuery 的 div元素 实例,也称为 jQuery 对象,jQuery 对象包含了对选中的 div元素 的各种操作API,因此 jQuery 实例封装的是对选中元素的各种操作。

而 Vue.js 在此基础上更近一步,封装了对视图的所有操作,包括数据的读写、数据变化的监听、DOM元素的更新等等,通过 new Vue(options) 来创建出一个 Vue实例 ,也称为 Vue对象 ,该 Vue实例 封装了操作元素视图的所有操作,可通过 Vue实例 来轻松操作对应区域的视图。

2. 包含哪些属性

options 对象的具体可选属性有很多,具体可分为五大类,可在 vue.js 官网查看到,如下:

详解Vue的options

3.入门属性

el

el 属性又称挂载点,可认为是 element 的简写,创建一个 vue实例 得知道是在哪一块元素上创建 Vue实例 ,对哪一块视图进行操作。

挂载点的定义有两种方式,mount 就是挂载的意思

1. 设置 el 属性

new Vue({
  el: "#app",
  render: h => h(App)
})

2. 使用 $mount 接口

new Vue({
  render: h => h(App)
}).$mount("#app");

data

data 属性又称内部数据,该属性值可以是对象,也可以是函数,但优先推荐使用函数,对象里的函数又称方法。并且若是组件中的 data 则必须使用函数。

优先推荐使用函数的原因是在使用同一个 options 对象作为参数创建多个 Vue实例 时,若 data 属性值为对象,在使用 new Vue(options) 创建 Vue实例 时会将 options.data 属性值直接赋值给 Vue实例.data的属性 ,由于对象的赋值是复制的地址,因此多个实例的 data 属性值都是指向同一个对象的地址,则多个实例会共用一个 data对象,当一个实例改变 data对象 时,另一个实例的 data对象 也会被改变。

而当 data 属性值为函数时,Vue 创建实例时是会执行该 data() 函数,并将函数执行的结果返回的对象赋值给 Vue实例.data 属性,每次函数执行返回的对象都是不同的对象,因此多个实例的 data 属性值对应的是不同的对象,一个改变不会影响另外一个,各自独立不影响。

1. 使用对象

data:{
    n: 0
}

2. 使用函数

data(){
    return{
      n: 0
    }
}

methods

methods 属性又称方法,属性值是一个对象,对象里面的属性都是函数,这些函数可以是事件处理的回调函数,也可以是普通函数。特点是每次页面渲染 methods 都会执行,如下:

methods:{
    add(){
      this.n +=1
    }
}

components

components 即组件的意思,也是基于模块化的概念设计的便于复用的 Vue实例 ,使用方法有三种,如下:

1. 全局注册

全局定义一个组件,就可以在整个项目中随时使用,定义方法如下

Vue.component('my-component-name', {  

    // ... 选项 ... 该部分和创建vue实例的options是一样的,毕竟组件就是vue实例
    
})
new Vue({ el: '#app' })
<div  id="app">
    <my-component-name></my-component-name>
</div>

2. 局部注册

//通过一个普通的 JavaScript 对象来定义组件
var ComponentA = { options }

//然后在 components 选项中定义你想要使用的组件
new Vue({ 
    el: '#app',
    components: {
        component-a: ComponentA //或直接在里面定义对象
        component-b: {
            //和options一样的内容,但data必须是函数
        }
    } 
})
<div  id="app">
    <component-a></component-a>
</div>

3. 模块系统

通过将组件单独为一个 *.vue 文件,然后通过 import 导入并引用,如下
main.js

import ComponentA from  './ComponentA.vue'
new Vue({ 
    el: '#app',
    components:{
        ComponentA: ComponentA
        //在ES6语法中,当属性和属性值相同时可只写一个
        //ComponentA
    }
})
<div  id="app">
    <ComponentA></ComponentA>
</div>

总结

推荐使用最后的模块系统组件,更加模块化,结构更清晰。
完整版介绍请看vuejs官网-components

props

props 又称外部数据,一般用于组件中接受外来传递的数据,在组件使用时,通过标签全局属性的方式进行传参。以下以引入完整版 vue.js 为例

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

数据的传递

main.js

import HelloWorld from ./HelloWorld.vue
new Vue({
    template:`
        <HelloWorld msg="hello my world"/> //这样只能传递字符串
        <HelloWorld :msg="ms"/> //这样是传递变量,即 this.ms
        //也可用:传递函数名<HelloWorld :msg="fn"/>
    `,
    data:{
        ms: 'hello my world'
    },
    methods:{
        fn(){
            ...
        }
    }
})

生命周期钩子

在 Vue 中,将每个状态转变点称之为钩子,如实例创建后,和实例创建前,则实例创建就是个钩子,对应前后两个阶段,即是 beforeCreate 实例创建前,和 created 实例创建后,以下都是成对出现的,因此只需记一个就行。

该属性是一个函数,在其对应的时期被调用。

  • created 实例出现在内存中
  • mounted(该钩子处可进行数据请求) 实例出现在页面中
  • updated 实例更新了
  • destroyed 实例从页面和内存中消亡了

以上就是详解Vue的options的详细内容,更多关于Vue的options的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue-router定义元信息meta操作
Dec 07 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 #Vue.js
Vue接口封装的完整步骤记录
Vue全家桶入门基础教程
vue实现可拖拽的dialog弹框
vue如何批量引入组件、注册和使用详解
vue组件的路由高亮问题解决方法
Vue通过懒加载提升页面响应速度
You might like
第十二节 类的自动加载 [12]
2006/10/09 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
高考自主招生自荐信
2013/10/20 职场文书
信息技术教学反思
2014/02/12 职场文书
社区服务活动小结
2014/07/08 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
城南旧事观后感
2015/06/11 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python