appcan vue.js 实现组件化开发

原创 2018年04月17日 20:45:21

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就完成,如第一章图,还要强调一点,组件开发的模板是可以互相嵌套的,我也是因为成功运行了很开心,第一时间分享出来

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

Vue.js的组件化开发

web中的组件其实就是页面组成的一部分, 好比是电脑中的每一个元件(如硬盘、键盘、鼠标), 它是一个具有独立的逻辑和功能或界面, 同时又能根据规定的接口规则进行相互融化, 变成一个完整的应用。...
  • web_wusheng
  • web_wusheng
  • 2017-04-21 22:05:05
  • 2518

VueJs的组件化

组件化: 目的:让页面的元素的使用性和复用性更高。 使用: 1.通过Vue.extend()声明组件 2.将组件注册到Vue容器里面 3.声明Vue管理边界 定义: 组件就是将一些html+css+j...
  • u012967849
  • u012967849
  • 2016-11-10 23:06:07
  • 3447

在AppCan中使用Vue.js开发

在appcan升级到4.0过后新增了一个MVVM的开发模式,对于这种模式底层提供的api实在是有限,而其中最好用的也就属于双向绑定和基于组件开发。同样现在比较流行的AngularJs和Vue.js都具...
  • u010730897
  • u010730897
  • 2017-04-11 15:40:03
  • 1565

vue组件化项目实践

Vue.js 是用于构建交互式的 Web  界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层...
  • sinat_30691131
  • sinat_30691131
  • 2016-10-07 19:48:27
  • 2270

Appcan+vue+vux+webpack开发app(原创)

Appcan+vue+vux+webpack开发app(原创)
  • kong2100206
  • kong2100206
  • 2017-07-03 20:23:02
  • 1674

饿了么外卖移动端单页

  • 2017年03月28日 20:24
  • 211KB
  • 下载

vue.js原生组件化开发(一)——组件开发基础

前言 vue作为一个轻量级前端框架,其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件。我们在引用组件之时只需将组件页...
  • yuanyuanispeak
  • yuanyuanispeak
  • 2017-06-21 11:54:25
  • 911

js组件化开发发展

从第一代程序员写下第一行代码开始到上个世纪的80年代的软件危机,程序员一直在考虑一个问题,怎么写代码更容易。所形成的一套思路就是大团队的协同合作(如同cpu发展史一样,从飙主频到飙核数) 几乎所有的程...
  • qq_26744901
  • qq_26744901
  • 2016-03-30 15:49:50
  • 1686

iOS组件化方案的几种实现

最近研究了一下项目的组件化,把casa、bang、limboy的有关组件化的博客看了一遍,学到了不少东西,对目前业界的组件化方案有了一定的了解。这些高质量的博客大致讨论了组件化的三种方案:url-bl...
  • KelvinFlying
  • KelvinFlying
  • 2017-07-21 09:36:48
  • 955

vue.js原生组件化开发——父子组件

前言 在了解父子组件之前应先掌握组件开发基础。在实际开发过程中,组件之间可以嵌套,也因此生成父子组件。 父子组件创建流程 1.构建父子组件 1.1 全局注册...
  • xidongdong1
  • xidongdong1
  • 2017-10-28 16:46:36
  • 153
收藏助手
不良信息举报
您举报文章:appcan vue.js 实现组件化开发
举报原因:
原因补充:

(最多只允许输入30个字)