详解Vue的options

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的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue实例的对象参数options的几个常用选项详解

    一. 新建一个Vue实例可以有下列两种方式: 1.new一个实例 var app= new Vue({ el:'#todo-app', // 挂载元素 data:{ // 在.vue组件中data是一个函数,要写成data () {}这种方式 items:['item 1','item 2','item 3'], todo:'' }, methods:{ // 方法成员 rm:function(i){ this.items.splice(i,1) } } }) // 之后再 export def

  • Vue的Options用法说明

    el:挂载点 与$mount有替换关系 new Vue({ el: "#app" }); new Vue({}).$mount('#app') 注:被你选为挂载点的那个元素,如果在index.html里那个元素里面本来就有内容,在渲染时会消失(网速慢可以看到),被这个vue实例的对应内容所覆盖. data:内部数据 支持对象和函数,优先用函数 new Vue({ //优先使用函数 data() { return { n: 0, } } }).$mount("#app"

  • Vue中的this.$options.data()和this.$data用法说明

    问题 项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下: export default { props: { P: Object }, data () { return { A: { a: this.methodA }, B: this.P }; }, methods: { resetData () { // 更新时调用 Object.assign(this.$data,

  • 解决vue axios跨域 Request Method: OPTIONS问题(预检请求)

    我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢? 这是因为CORS跨域分为 简单跨域请求和复杂跨域请求: 简单跨域不会发送options请求,复杂跨域会发送一个预检请求options. 1.简单跨域满足的条件 1.请求方式是以下三种之一: HEAD GET POST 2.HTTP的头信息不超出以下几种字段 Accept Accept-Lan

  • Vue axios与Go Frame后端框架的Options请求跨域问题详解

    跨域问题可从前后两端分开排查: 前端:Vue + axios axios 请求头使用 'Content-Type': 'application/json', 并且在Header中设置了 Authorization 字段用于传递 Token, 参数未经 Qs 转码, 使用以下代码测试登录接口: // 为方便操作,已将 axios 实例挂载到 this.$axios 上 this.$axios.post('/signin', {account: '', password: ''}) .then(re

  • Vue使用axios出现options请求方法

    Vue使用axios出现options请求方法

    以下代码如果需要在你本地跑起来: Ⅰ.需要apache服务,并把php代码丢进去指定位置 Ⅱ.将下面http://www.test.com/day05/jiekou.php地址,改成自己指定位置的域名或ip 1.从一段简易代码说起 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor

  • 解决在Vue中使用axios POST请求变成OPTIONS的问题

    POST请求变成OPTIONS 及报错信息(跨域) 主要解决方案:使用qs.stringify 1.安装qs npm install qs --save 2.axios配置和使用 在接口请求页面引入安装好的qs,如下图: 引入完成之后使用qs改变传递的参数data,如下: 这样就可以了,post请求的时候就不会再出现OPTIONS了 补充知识:axios发起请求,为什么先发送options请求,再发送get/post请求 引起原因 1,跨域: 2,请求头非默认情况. 默认请求头如下 Accept

  • vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

    vue拖拽克隆clone组件API, vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档) 效果图: -------------------------------------------------------------------------------- 首先需要安装vuedraggable依赖包: npm install vuedraggable --save 因为拖拽组件依赖sortablejs ,如果项目没有安装sortablejs ,可能需要安装一下 np

  • 详解Vue的options

    详解Vue的options

    1. options 是什么 无论是 jQuery.js 还是 Vue.js,都是在 js 的基础上再次封装的库,都需要创建对应的实例来封装对应的操作.如通过 $('div') 获得一个 jQuery 的 div元素 实例,也称为 jQuery 对象,jQuery 对象包含了对选中的 div元素 的各种操作API,因此 jQuery 实例封装的是对选中元素的各种操作. 而 Vue.js 在此基础上更近一步,封装了对视图的所有操作,包括数据的读写.数据变化的监听.DOM元素的更新等等,通过 new

  • 详解Vue 全局引入bass.scss 处理方案

    为解决在Vue组件中全局引入 scss 变量及 mixins ,装载了一个名为 "sass-resources-loader" 解析器. 安装 $ > cnpm i -D sass-resources-loader 配置 配置的话是在 vue 的 loader 解析器中配置,即在 vue-cli 脚手架方式构建出来的文件中是以 build/utils.js,在该文件中定义了 cssLoaders() 方法,该方法定义了诸如 css.less的解析方式,具体如下. // build

  • 详解vue表单——小白速看

    一.基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定. 但 v-model 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data 选项中声明初始值. 一组代码,看完text.textarea.

  • 详解vue或uni-app的跨域问题解决方案

    常见解决方案有两种 服务器端解决方案 服务器告诉浏览器:你允许我跨域 具体如何告诉浏览器,请看: // 告诉浏览器,只允许 http://bb.aaa.com:9000 这个源请求服务器 $response->header('Access-Control-Allow-Origin', 'http://bb.aaa.com:9000'); // 告诉浏览器,请求头里只允许有这些内容 $response->header('Access-Control-Allow-Headers', 'Author

  • 详解Vue串联过滤器的使用场景

    平时开发中,需要用到过滤器的地方有很多,比如单位转换.数字打点.文本格式化等,比如: Vue.filter('toThousandFilter', function (value) { if (!value) return '' value = value.toString() return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,') }) 实现效果: 30000

  • 详解Vue+elementUI build打包部署后字体图标丢失问题

    错误描述: Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 dom渲染展示 解决方法: webpack module配置:(build目录下webpack.base.conf.js) module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.(

  • 详解Vue中的MVVM原理和实现方法

    下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • 详解Vue.js3.0 组件是如何渲染为DOM的

    本文主要是讲述 Vue.js 3.0 中一个组件是如何转变为页面中真实 DOM 节点的.对于任何一个基于 Vue.js 的应用来说,一切的故事都要从应用初始化「根组件(通常会命名为 APP)挂载到 HTML 页面 DOM 节点(根组件容器)上」说起.所以,我们可以从应用的根组件为切入点. 主线思路:聚焦于一个组件是如何转变为 DOM 的. 辅助思路: 涉及到源代码的地方,需要明确标记源码所在文件,同时将 TS 简化为 JS 以便于直观理解 思路每前进一步要能够得出结论 尽量总结归纳出流程图 应用

  • 详解Vue中的watch和computed

    前言 对于使用Vue的前端而言,watch.computed和methods三个属性相信是不陌生的,是日常开发中经常使用的属性.但是对于它们的区别及使用场景,又是否清楚,本文我将跟大家一起通过源码来分析这三者的背后实现原理,更进一步地理解它们所代表的含义. 在继续阅读本文之前,希望你已经具备了一定的Vue使用经验,如果想学习Vue相关知识,请移步至官网. Watch 我们先来找到watch的初始化的代码,/src/core/instance/state.js export function in

随机推荐