在vue中，options选项是指“构造选项”，是在创建Vue实例时传入的参数，是一个对象，语法“const vm = new Vue(options)”。通过“new Vue(options)”来创建出一个Vue实例，也称为Vue对象，该Vue实例封装了操作元素视图的所有操作，可通过Vue实例来轻松操作对应区域的视图。
本教程操作环境：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:`我是小明`})可以使用$mount代替new Vue({ template:`我是小明`}).$mount("#app")
登录后复制data（内部数据）支持对象和函数，优先使用函数会被Vue监听会被Vue实例代理每次data的读写都会被Vue监听Vue会在data变化是更新UI
对象new Vue({ template:"{{n}}", data:{ n:0 }}).$mount('#app')函数vue非完整版只支持函数new Vue({ template:"{{n}}", data(){ return { m:5 } }})$mount('#app')
登录后复制methods（方法）事件处理函数或者普通函数
new Vue({ template:"{{n}}{{ add()}} ", data:{ n:0 }, methods:{ add(){ console.log('我可以是事件处理函数也可以是普通函数')} }}).$mount('#app')
登录后复制components（vue组件：注意大小写）三种方式
注册全局组件Vue.component('Deon1', { template: "全局组件
"})注册局部组件const deon2 = { template: "局部组件 {{n}}
", //在组建中data必须使用函数 data() { return { n: "小明" } }}new Vue({ components: { Deon2: deon2, Deon3:{ template:"组件3" } }, template: ` 页面 `}).$mount('#app')
登录后复制
使用vue文件添加组件
deon4.vue文件
我是deon.vue文件{{ name }}export default { data() { name: "组件4"; },};div { border: 1px solid red;}
登录后复制
main.js
import Deon4 from './deon4.vue'Vue.component('Deon1', { template: "全局组件
"})const deon2 = { template: "局部组件 {{n}}
", //在组建中data必须使用函数 data() { return { n: "小明" } }}new Vue({ components: { Deon2: deon2, Deon3: { template: "组件3" }, Deon4 }, template: ` 页面 `}).$mount('#app')
登录后复制常用的四个生命周钩子函数created: 实例出现在内存中mounted:实例出现在页面中触发updated:实例出现了变化触发destroyed:实例被销毁了触发
new Vue({ template:"{{n}}", 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: "{{m}}" } }, template: ``, data: { m: 666 }}).$mount('#app')
登录后复制
【相关推荐：vuejs视频教程、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（挂在点）
以上就是vue的options选项是什么的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2923573.html
