vue的options选项是什么

在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;

  

  DaGaoPeng(大高朋网团购程序)

  大高朋团购系统是一套Groupon模式的开源团购程序，开发的一套网团购程序，系统采用ASP+ACCESS开发的团购程序，安装超简，功能超全面，在保留大高朋团购系统版权的前提下，允许所有用户免费使用。大高朋团购系统内置多种主流在线支付接口，所有网银用户均可无障碍支付；短信发送团购券和实物团购快递发货等。 二、为什么选择大高朋团购程序系统？ 1.功能强大、细节完善 除了拥有主流团购网站功能，更特别支

  下载

• 资源: 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文件

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前端开发】