当前位置 博文首页 > zhtbs的博客：(Framework7 移动webapp) Springboot 入门培训 8 C
在使用Framework7 开发 webapp中，最常用的是方式是使用Component模板的MVVM的开发方式，这种模式是使用模板技术与ajax与dmo7（类似jquery）综合使用来生成页面html，它对开发者使用js脚本能力要求非常的高。
Component 模板需要在路由中的componentUrl属性来定义模板模板访问地址。
routes = [
{
path: '/路由路径/',
componentUrl: '模板html页面地址url',
];
Component 模板分为三大部分
Component.html构成
<template>
<div class="page" >
HTML内容
</div>
</template>
<style>
.red-link {
color: red;
}
CSS样式
</style>
<script>
// component 模块语法 mvvm模式 html页面元素与数据模型绑定
// 1 props 传入的参数
// 2 操作的fk7内设对象
export default (props, {}) => {
return $render;
}
</script>
template 中是所有Framework7 UI组件元素，也可以是其他的html元素。所有页面元素都要在class="page"元素中。
<template>
<div class="page">
html页面
</div>
</template>
template 中的所有元素都要有 </>表示结束。不能是< br/> < input type="" />< img src />这样的结束。
元素结束示例
<template>
<!-- 这种关闭是正确的 -->
< input type="" ></input>
<br></br>
<div>元素</div>
<!-- 这种关闭是错误的 -->
<br/>
< input type="" />
</template>
定义页面css样式内嵌样式。
<style>
.red-link {
color: red;
}
</style>
脚本部分最主要的就是模板默认的函数，我们需要在使用这个默认函数控制整个模板页面的所有html元素，和自定义事件，连接后台数据，参数转换等功能。
export default (props, {}) => {
return $render;
}
1 定义默认函数体 export default (props, {上下文参数}) => { return $render; }
可以在默认函数中定义参数【属性，数组，object】，可以在 template 层中使用${名称}方法将定义的参数绑定到html元素中来。
<template>
<div class="page" th:inline="text">
<div class="page-content">
<p>${value}</p> <------------------|
</div> |
</div> |
</template> |
<style> |
.red-link { |
color: red; |
} |
</style> |
<script th:inline="javascript"> |
export default (props,{}) => { |
let value = '第一个程序';------------|
})
return $render;
}
</script>
数组定义
定义 let names=[] 数组对象，在template模板中使用模板标记语言进行循环遍历数组内容。
<template>
<div class="page" th:inline="text">
<div class="page-content">
<div class="list simple-list">
<ul>//模板语言循环显示数据内容
${names.map((name) => $h` <----------|
<li >${name.id}${name.name}</li> |
`)} |
</ul> |
</div> |
</div> |
</div> |
</template> |
<script th:inline="javascript"> |
//mvvm模式 html页面元素与数据模型绑定 |
export default (props, |
{$update}) => { |
let names=[ <---------------------|
{name:'1条记录',id:1},
{name:'2条记录',id:2},
{name:'3条记录',id:3}]
return $render;
}
</script>
事件定义与绑定
在默认函数中定义事件方法，然后通过template模板中的 @click 标签来绑定这个事件到对应html元素中。
<template>
<div class="page" th:inline="text">
<div class="page-content">
<div class="list simple-list">
<ul>//模板语言循环显示数据内容
${names.map((name) => $h`
<li @click=${onfind}> <----------|
${name.id}${name.name}</li> |
`)} |
</ul> |
</div> |
</div> |
</div> |
</template> |
<script th:inline="javascript"> |
//mvvm模式 html页面元素与数据模型绑定 |
export default (props, |
{$update}) => { |
//自定义事件 |
const onfind=(e)=>{ <----------------|
console.log(e.target);
alert(e.target);
};
let names=[
{name:'1条记录',id:1},
{name:'2条记录',id:2},
{name:'3条记录',id:3}]
return $render;
}
</script>
@ 等价于事件中on
| 事件 | 引用 |
|---|---|
| onclick() | @click |
| onchange() | @change |
| onsubmit() | @submit |
| onblur() | @blur |
| onfocus() | @focus |
模板中的默认函数自带很多功能强大的参数，开发者通过这些参数的使用来操作模板页面的html 元素与脚本事件。这些参数可以根据业务需求自由组合使用的参数。
export default (props, {参数1，参数2}) => {
return $render;
}
$on 参数为组件事件，通常是处理模板初始化事件功能。
export default (props,{$on}) => {
$on('pageMounted', (e, page) => {
//页面生成时候触发事件
});
$on('pageInit', (e, page)
