### 单文件组件
* * * * *
Rap 为大家提供单文件组件,每一个组件都是一个. html 文件(不是Vue 官方的. vue)
~~~
<style>
#这里放样式
.test{
backgroud:red;
}
</style>
<template>
<!--这里放模板文件 -->
<div class='test'>
</div>
</template>
<script>
//这里定义组件
Rap.define("",[],{
data: function(){
return {
}
},
created:function () {
},
init:function () {
},methods:{
}
})
</script>
~~~
注意下Rap 的单页面组件和 Vue 的不同
> 1. style不支持 Sass编译
> 2. script不支持 es5,es6只支持原生的 javascript
> 3. 我们都支持最原始的,降低前端学习成本
> 4. 组件不需要经过编译可直接用于生产环境,线上调试方便
注意script标签中的代码是闭包的,不会影响到全局,所以可以在这里定义变量和方法
如:
~~~
<script>
//变量和方法的作用域只在这个组件内,同一组件显示在不同地方这里的变量不变
var temp='temp';
function test(){
consoloe.log('test');
}
Rap.define("../parent",['comp2','comp3'],{
data: function(){
return {
}
},
created:function () {
},
init:function () {
},methods:{
}
})
</script>
~~~