appcan vue.js 实现组件化开发_在vue中如何使用appcan方法-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28966469/article/details/79980529

本文介绍了如何使用appcan和vue.js结合，配合mui进行组件化开发。通过一个简单的demo演示了创建组件和父页面的步骤，强调组件模板可以互相嵌套，适合appcan开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

appcan+vue.js+mui 实现组件化开发

用一个简单的demo实现来说明，并不难简单的很。希望能够和在用appcan的同学们一起进步，也希望appcan能够发展更好 (#^.^#)！
实现效果：
组件化后

- 第一步：创建组件

  文件名称：demo.html 内容如下代码
  重点：1、 data-component 容器
       2、 id="demo" 容器 (此处名称随意，但是后面会用到)
       3、 正常写vue.js的模板输出，我是以v-for 循环遍历的列表为例
       ps：如果vue不熟悉请移步：https://cn.vuejs.org/v2/api/

<div id="" data-component="hello">
    <div id="demo">
       <ul class="mui-table-view">
            <li class="mui-table-view-cell" v-for="v in list">
                <a class="mui-navigate-right">{{v.name}}</a>
            </li>
        </ul>
    </div>
</div>

- 第二步：创建父页面

  文件名称：index.html 内容如下代码
  重点：1、 在此页面引入mui.min.css
       2、 在此页面引入vue.js
       3、 创建vue示例，并将数据写入到data中（这里属于vue的语法标准）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
       <link rel="stylesheet" href="css/mui.min.css">
    </head>
    <body>
        <component data-import="demo.html"></component>
    </body>
     <script src="js/appcan.js"></script>
     <script src="js/template.import.js"></script>
    <script src="js/vue.min.js"></script>
    <script>
        var app = new Vue({
            el:'#demo',
            data:{
                list:[
                    {name:'第一行'},
                    {name:'第二行'},
                    {name:'第三行'},
                ]
            }
        })
    </script>
</html>