vue的options选项有什么作用

这篇文章主要讲解了“vue的options选项有什么作用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue的options选项有什么作用”吧！

在vue中，options选项是指“构造选项”，是在创建Vue实例时传入的参数，是一个对象，语法“const vm = new Vue(options)”。通过“new Vue(options)”来创建出一个Vue实例，也称为Vue对象，该Vue实例封装了操作元素视图的所有操作，可通过Vue实例来轻松操作对应区域的视图。

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: "<h3>全局组件</h3>"})注册局部组件const deon2 = {  template: "<h3>局部组件 {{n}}</h3>",   //在组建中data必须使用函数  data() {    return {      n: "小明"    }  }}new Vue({  components: {    Deon2: deon2,    Deon3:{      template:"<h3>组件3</h4>"  }  },  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: "<h3>全局组件</h3>"})const deon2 = {  template: "<h3>局部组件 {{n}}</h3>",  //在组建中data必须使用函数  data() {    return {      n: "小明"    }  }}new Vue({  components: {    Deon2: deon2,    Deon3: {      template: "<h3>组件3</h4>"    },    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')

感谢各位的阅读，以上就是“vue的options选项有什么作用”的内容了，经过本文的学习后，相信大家对vue的options选项有什么作用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！