189 8069 5689

vue的options选项有什么作用

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

成都创新互联公司是专业的监利网站建设公司，监利接单;提供成都网站制作、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行监利网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

在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:`
我是小明
`
})
可以使用$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文件




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')

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


新闻标题：vue的options选项有什么作用
链接URL：http://cdxtjz.cn/article/gpssho.html

其他资讯