本教程操作环境：windows7系统、vue3版，dell g3电脑。
vue中options的作用options是什么
options
顾名思义就是“选项”的意思, 或称为构造选项. 是在创建vue实例时传入的参数, 是一个对象.
const vm = new vue(options)
无论是jquery.js 还是 vue.js, 都是在 js 的基础上再次封装对应的操作。如: 通过$(‘div’)获得一个jquery的div元素实例, 也称为jquery对象, jquery对象包含了对选项中的div元素的各种操作api,因此jquery实例封装的是对选项中元素的各种操作;而vue.js 在此基础上更进一步, 封装了对视图的所有操作, 包括数据的读写、数据变化的监听、dom元素的更新等等, 通过 new vue(options) 来创建出一个 vue实例, 也称为vue对象, 该vue实例封装了操作元素视图的所有操作, 可通过 vue实例 来轻松操作对应区域的视图;options的五类属性
数据: data, props, propsdata, computed, watch;
dom: el, template, render, rendererror;
声明周期钩子: beforecreate、created、beforemount、mounted、beforeupdate、updated、activated、deactivated、beforedestroy、destroyed、errorcaptured;
资源: directives、filters、components;
组合: parent、mixins、extends、provide、inject；
入门属性
el（挂在点）new vue({ el："#app" template:`<div>我是小明</div>`})可以使用$mount代替new vue({ template:`<div>我是小明</div>`}).$mount("#app")
data（内部数据）支持对象和函数，优先使用函数会被vue监听会被vue实例代理每次data的读写都会被vue监听vue会在data变化是更新ui对象new vue({ template:"<div>{{n}}</div>", data:{ n:0 }}).$mount('#app')函数vue非完整版只支持函数new vue({ template:"<div>{{n}}</div>", data(){ return { m:5 } }})$mount('#app')
methods（方法）事件处理函数或者普通函数new vue({ template:"<div>{{n}}{{ add()}} <button @click="add">按钮</button></div>", data:{ n:0 }, methods:{ add(){ console.log('我可以是事件处理函数也可以是普通函数')} }}).$mount('#app')
components（vue组件：注意大小写）三种方式注册全局组件vue.component('deon1', { template: "<h2>全局组件</h2>"})注册局部组件const deon2 = { template: "<h2>局部组件 {{n}}</h2>", //在组建中data必须使用函数 data() { return { n: "小明" } }}new vue({ components: { deon2: deon2, deon3:{ template:"<h2>组件3</h3>" } }, template: ` <div>页面 <deon1></deon1> <deon2></deon2> <deon3></deon3> </div> `}).$mount('#app')
使用vue文件添加组件
deon4.vue文件
<template> <div>我是deon.vue文件{{ name }}</div></template><script>export default { data() { name: "组件4"; },};</script><style scoped>div { border: 1px solid red;}</style>
main.js
import deon4 from './deon4.vue'vue.component('deon1', { template: "<h2>全局组件</h2>"})const deon2 = { template: "<h2>局部组件 {{n}}</h2>", //在组建中data必须使用函数 data() { return { n: "小明" } }}new vue({ components: { deon2: deon2, deon3: { template: "<h2>组件3</h3>" }, deon4 }, template: ` <div>页面 <deon1></deon1> <deon2></deon2> <deon3></deon3> <deon4><deon4> </div> `}).$mount('#app')
常用的四个生命周钩子函数created: 实例出现在内存中mounted:实例出现在页面中触发updated:实例出现了变化触发destroyed:实例被销毁了触发new vue({ template:"<div>{{n}}</div>", data:{ n:0 }， created() { console.log("实例出现在内存中了触发"); }, mounted() { console.log("实例出现在页面中触发"); }, updated() { console.log("实例出现了变化触发"); }, destroyed() { console.log("实例被销毁了触发"); }}).$mount('#app')
props（外部数据）父组件想子组传值name="n"（传入字符串）:name="n"（传入this.n数据）:fn="add":（传入this.add函数）new vue({ components: { deon1: { props: ["m"], template: "<div>{{m}}</div>" } }, template: `<div><deon1 :m="m"></deon1></div>`, data: { m: 666 }}).$mount('#app')
【相关推荐：vuejs视频教程、web前端开发】
以上就是vue的options选项是什么的详细内容。