分享更有价值
被信任是一种快乐

vue的options选项有什么作用

文章页正文上

这篇文章主要讲解了“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文件

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路由跳转方法是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue router路由跳转方法是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 通过router-link实现路由跳…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册