本教程操作环境:windows7系统、vue3版,DELL G3电脑。Vue中options的作用options是什么options 顾名思义就是“选项”的意思, 或称为构造选项. 是在创建Vue实例时传入的参数, 是一个对象.const
本教程操作环境:windows7系统、vue3版,DELL G3电脑。
options是什么
options
顾名思义就是“选项”的意思, 或称为构造选项. 是在创建Vue实例时传入的参数, 是一个对象.const vm = new Vue(options)
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;
入门属性
new Vue({
el:"#app"
template:`<div>我是小明</div>`
})
可以使用$mount代替
new Vue({
template:`<div>我是小明</div>`
}).$mount("#app")
对象
new Vue({
template:"<div>{{n}}</div>",
data:{
n:0
}
}).$mount('#app')
函数
vue非完整版只支持函数
new Vue({
template:"<div>{{n}}</div>",
data(){
return {
m:5
}
}
})$mount('#app')
new Vue({
template:"<div>{{n}}{{ add()}} <button @click="add">按钮</button></div>",
data:{
n:0
},
methods:{
add(){
console.log('我可以是事件处理函数也可以是普通函数')
}
}
}).$mount('#app')
注册全局组件
Vue.component('Deon1', {
template: "<h2>全局组件</h2>"
})
注册局部组件
const deon2 = {
template: "<h2>局部组件 {{n}}</h2>",
//在组建中data必须使用函数
data() {
return {
n: "小明"
}
}
}
new Vue({
components: {
Deon2: deon2,
Deon3:{
template:"<h2>组件3</h3>"
}
},
template: `
<div>页面
<Deon1></Deon1>
<Deon2></Deon2>
<Deon3></Deon3>
</div>
`
}).$mount('#app')
使用vue文件添加组件
deon4.vue文件
<template>
<div>我是deon.vue文件{{ name }}</div>
</template>
<script>
export default {
data() {
name: "组件4";
},
};
</script>
<style scoped>
div {
border: 1px solid red;
}
</style>
main.js
import Deon4 from './deon4.vue'
Vue.component('Deon1', {
template: "<h2>全局组件</h2>"
})
const deon2 = {
template: "<h2>局部组件 {{n}}</h2>",
//在组建中data必须使用函数
data() {
return {
n: "小明"
}
}
}
new Vue({
components: {
Deon2: deon2,
Deon3: {
template: "<h2>组件3</h3>"
},
Deon4
},
template: `
<div>页面
<Deon1></Deon1>
<Deon2></Deon2>
<Deon3></Deon3>
<Deon4><Deon4>
</div>
`
}).$mount('#app')
new Vue({
template:"<div>{{n}}</div>",
data:{
n:0
},
created() {
console.log("实例出现在内存中了触发");
},
mounted() {
console.log("实例出现在页面中触发");
},
updated() {
console.log("实例出现了变化触发");
},
destroyed() {
console.log("实例被销毁了触发");
}
}).$mount('#app')
new Vue({
components: {
Deon1: {
props: ["m"],
template: "<div>{{m}}</div>"
}
},
template: `<div><Deon1 :m="m"></Deon1></div>`,
data: {
m: 666
}
}).$mount('#app')
以上就是vue的options选项是什么的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: vue的options选项是什么
本文链接: https://lsjlt.com/news/206116.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0