详解Vue的options

  • Z时代
  • 2024-01-10
  • 分类：IT

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 官网查看到，如下：

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的options 的全部内容， 来源链接： utcz.com/p/220463.html

回到顶部