目录
一、前言
android系统定制开发本文的主要目的是学习如何在htmlandroid系统定制开发文件中定义并使用组件。
android系统定制开发学习本文前需要掌握,vue组件等。
二、实例
前提:
引入vue.js文件
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
什么是组件化开发
组件化开发 指的是:根据 封装 的思想, 把页面上可重用的 UI 结构封装为组件 ,从而方便项目的开发和维护。
vue 中的组件化开发
vue 是一个 支持组件化开发 的前端框架。
vue 中规定: 组件的后缀名 是 .vue 。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
vue 组件的三个组成部分
每个 .vue 组件都由 3 部分构成,分别是:
template -> 组件的 模板结构
script -> 组件的 JavaScript 行为
style -> 组件的 样式
其中, 每个组件中必须包含 template 模板结构 ,而 script 行为 和 style 样式 是 可选的 组成部分。
template
vue 规定:每个组件对应的 模板结构 ,需要定义到 <template> 节点 中。
- <template id="con">
- <main>
- <h1>这是 con 组件</h1>
- </main>
- </template>
注意:
template 是 vue 提供的 容器标签 ,只起到 包裹性质的作用 ,它不会被渲染为真正的 DOM 元素
template 中只能包含唯一的根节点
script
vue 规定:我们可以在 <script> 节点中 封装组件的 JavaScript 功能 逻辑 。
- <script>
- new Vue({
- el:'#app'
-
- }
- })
- </script>
.vue 组件中的 data 必须是函数
vue 规定: .vue 组件中的 data 必须是一个函数 , 不能 直接 指向一个数据对象 。
因此在组件中定义 data 数据节点时,需要加上 return
如果直接 指向一个数据对象, 会导致 多个组件实例 共用 同一份数据 的问题,
style
vue 规定:组件内的 <style> 节点是 可选的 ,开发者可以在 <style> 节点中 编写样式美化当前组件的 UI 结构 。
style 中支持 less 语法
在 <style> 标签上添加 lang="less" 属性,即可使用 less 语法编写组件的样式
- <style lang="less">
- h1{
- color: red;
- }
- </style>
结合以上的知识,来实现以下的组件的导入和使用
组件的导入并使用
-
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>组件的简单使用</title>
- </head>
- <!-- h5提供了一些语义化标签 用法和div一样只是语义不一样main(主要内容) section(大区域) footer header aside article -->
- <body>
- <div id="app">
- <!-- 第一步 书写占位符,占位符的名字自定义。占位符的名字不能和标签名一样 -->
- <v-header></v-header>
- <v-con></v-con>
- </div>
- <script src="js/vue.js"></script>
- <script>
- // 第二步 书写组件
- // 模板和组件通过id名字绑定
- var header={
- // template模板 书写页面结构。类似于之前的html 模板只能有一个根组件(标签)
- template:"<main><h1>这是头部 header 组件</h1><p>这是头部的内容</p></main>"
- }
- var con={
- template:"<main><h1>这是 con 组件</h1> <button @click='change()'>按钮</button> <p>{{msg}}</p></main>",
- //组件中的数据,需要写成函数的形式
- data() {
- return {
- //插值表达式
- msg : 'con组件',
- //点击事件
- change(){
- alert("触发了change事件");
- }
- }
- },
- }
-
- new Vue({
- el:'#app',
- // 第三步 挂载组件
- components:{
- // 占位符:组件
- // k:v 如果k和v的值一样,可以简写
- 'v-header':header,
- 'v-con':con
- }
- })
- </script>
- </body>
- </html>