Class11 - Vue 组件元素(重点)
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:Vue2.x从入门到实战。Vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动.(来自官方介绍)
Vue.component元素示例
全局定义组件,使用Vue.component
定义
- template
template
元素,只能有一个根元素,即最外层只能有一个dom元素包裹,如下:1
2
3
4
5
6
7template:`
<div>
<div style="color:red">Mrlin comes from {{here}}</div>
<div>{{test}}</div>
<button @click="testMethods">你好</button>
</div>
`
data
data
元素,在全局组件里面数据以方法体return
,如下:1
2
3
4
5data:function(){
return{
test:"HAHAHAHA"
}
},methods
直接在methods:{}
进行定义function
1
2
3
4
5methods:{
testMethods(){
alert("我是测试方法");
}
}mounted(生命周期函数)
生命周期函数,定义如下:1
2
3
4
5
6mounted(){
//执行你的代码
},
created(){
//执行你的代码
}
或者1
2
3
4
5
6mounted:function(){
//执行你的代码
},
created:function(){
//执行你的代码
}
源码
1 |
|