今日讯！vue的options选项是什么

本教程操作环境：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文件

<script>export default {  data() {    name: "组件4";  },};</script>
登录后复制

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视频教程、web前端开发】

以上就是vue的options选项是什么的详细内容，更多请关注php中文网其它相关文章！

关键词：事件处理必须使用相关文章