这篇文章主要讲解了“vue的options选项有什么作用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue的options选项有什么作用”吧! 在vue中,options选项是指“构造选项”,是在创建Vue实例时传入的参数,是一个对象,语法“const vm = new Vue(options)”。通过“new Vue(options)”来创建出一个Vue实例,也称为Vue对象,该Vue实例封装了操作元素视图的所有操作,可通过Vue实例来轻松操作对应区域的视图。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(挂在点)
newVue({ el:"#app" template:`我是小明` }) 可以使用$mount代替 newVue({ template:`我是小明` }).$mount("#app")
data(内部数据)支持对象和函数,优先使用函数会被Vue监听会被Vue实例代理每次data的读写都会被Vue监听Vue会在data变化是更新UI
对象 newVue({ template:"{{n}}", data:{ n:0 } }).$mount('#app') 函数 vue非完整版只支持函数 newVue({ template:"{{n}}", data(){ return{ m:5 } } })$mount('#app')
methods(方法)事件处理函数或者普通函数
newVue({ template:"{{n}}{{add()}}", data:{ n:0 }, methods:{ add(){ console.log('我可以是事件处理函数也可以是普通函数') } } }).$mount('#app')
components(vue组件:注意大小写)三种方式
注册全局组件 Vue.component('Deon1',{ template:"全局组件
" }) 注册局部组件 constdeon2={ template:"局部组件{{n}}
", //在组建中data必须使用函数 data(){ return{ n:"小明" } } } newVue({ components:{ Deon2:deon2, Deon3:{ template:"组件3" } }, template:`
页面` }).$mount('#app')
使用vue文件添加组件deon4.vue文件
我是deon.vue文件{{name}}
main.js
importDeon4from'./deon4.vue' Vue.component('Deon1',{ template:"全局组件
" }) constdeon2={ template:"局部组件{{n}}
", //在组建中data必须使用函数 data(){ return{ n:"小明" } } } newVue({ components:{ Deon2:deon2, Deon3:{ template:"组件3" }, Deon4 }, template:`
页面` }).$mount('#app')
常用的四个生命周钩子函数created: 实例出现在内存中mounted:实例出现在页面中触发updated:实例出现了变化触发destroyed:实例被销毁了触发
newVue({ 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函数)
newVue({ components:{ Deon1:{ props:["m"], template:"{{m}}" } }, template:``, data:{ m:666 } }).$mount('#app')
感谢各位的阅读,以上就是“vue的options选项有什么作用”的内容了,经过本文的学习后,相信大家对vue的options选项有什么作用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是云技术,小编将为大家推送更多相关知识点的文章,欢迎关注!
本文小编为大家详细介绍“vue router路由跳转方法是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue router路由跳转方法是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 通过router-link实现路由跳…