appcan vue.js 实现组件化开发

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_28966469/article/details/79980529

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>

一个简单的demo就完成,如第一章图,还要强调一点,组件开发的模板是可以互相嵌套的,我也是因为成功运行了很开心,第一时间分享出来

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页