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;

• 资源: 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前端开发】

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