详解创建Vue实例传入的options【暂时3个】
暂时讲解3个,el 、 data、 和 methods :
el:
类型:string | HTMLElement
作用:决定之后Vue实例会管理哪一个DOM。
所以不仅他可以是string来获取dom节点,还可以是js的获取方法,示例:
<script src="js/vue.js"></script>
<div class="app">
{{content}}
</div>
<script>
const app = new Vue({
el:document.getElementsByClassName('app')[0], //看这里 不只是string 但string比较方便.
data:{
content:"HelloWorld"
}
})
</script>
data:
类型:Object | Function (组件当中data必须是一个函数)
作用:Vue实例对应的数据对象。
PS:其实就是用来存数据的
methods:
类型:{ [key: string]: Function }
作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。
可以直接定义方法 也可以用类型那种方式:
<div class="app" @click="h1">
1
</div>
<script>
const app = new Vue({
el:document.getElementsByClassName('app')[0], //看这里 不只是string 但string比较方便.
data:{
content:"HelloWorld"
},
methods:{
h1:function (){
alert("h1");
},
//一般用下面这种简介方式
h2(){
alert("h2")
}
}
})
</script>
其实这种还有很多 慢慢学吧...