关于 iView

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

特性

  • 高质量、功能丰富
  • 友好的 API ，自由灵活地使用空间
  • 细致、漂亮的 UI
  • 事无巨细的文档
  • 可自定义主题

以上内容乃是摘抄官网介绍，懒的写，以下代码以记录最近学习的一些问题解决，IViewUI入门练习~CDN模式全局加载JS，值得注意的地方是，由于CDN模式与NPM 安装模式，在HTML中写入还是有一定的区别的，例如写一个日期控件：

//CDN模式加载

<Row style="margin-left:300px">

　　<i-col span="12">

　　</i-col>

　　<i-col span="12">

　　　　<date-picker style="left:0px" type="daterange" placement="bottom-start" placeholder="选择日期"></date-picker>

　　</i-col>

</Row>

//NPM模式安装

<Row style="margin-left:300px">

　　<Col span="12">

　　</Col>

　　<Col span="12">

　　　　<DatePicker style="left:0px" type="daterange" placement="bottom-start" placeholder="选择日期"></DatePicker>

　　</Col>

</Row>

可以看出，明显的区别：DatePicker在CDN的模式下要用横杠 一 分开的，在HTML中是不能识别字符的大小写特性。官网也有介绍，但是由于我们平时都是直接找对应的组件，而且在组件中也没有专门写CDN模式的注意地方，挺头疼的，以下是部分的区别：

在非 template/render 模式下（例如使用 CDN 引用时），组件名要分隔，例如 DatePicker 必须要写成 date-picker。

以下组件，在非 template/render 模式下，需要加前缀 i-：

  • Button: i-button
  • Col: i-col
  • Table: i-table
  • Input: i-input
  • Form: i-form
  • Menu: i-menu
  • Select: i-select
  • Option: i-option
  • Progress: i-progress

以下组件，在所有模式下，必须加前缀 i-：

  • Switch: i-switch
  • Circle: i-circle

官网传送带https://www.iviewui.com/docs/guide/start

以下内容做为记录学习，给初学者的一个捷径。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>iview example</title>

    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">

    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>

    <style type="text/css">

     .ivu-select-dropdown{

     left:0px

      }

    </style>

</head>

<body>

<div id="app">

    <Tabs value="name1">

        <Tab-pane label="我是" name="name1">你好<br />

             <i-button @click="show">Click me!</i-button>

             <Modal v-model="visible" title="Welcome">欢迎使用 iView</Modal>

        </Tab-pane>

        <Tab-pane label="博主" name="name2" style="height:300px">

                <Row :gutter="16">

                    <i-Col span="6">

                        <div style="background-color:red">col-6</div>

                    </i-Col>

                    <i-Col span="6">

                        <div style="background-color:black">col-6</div>

                    </i-Col>

                    <i-Col span="6">

                        <div style="background-color:blue">col-6</div>

                    </i-Col>

                    <i-Col span="6">

                        <div style="background-color:green">col-6</div>

                    </i-Col>

                </Row>

                <Auto-Complete

                    v-model="value2"

                    @on-search="handleSearch2"

                    placeholder="input here"

                    style="width:200px">

                    <Option v-for="item in data2" :value="item" :key="item">{{ item }}</Option>

                </Auto-Complete>

        </Tab-pane>

        <Tab-pane label="秋意正寒" name="name3">秋意正寒

             <Slider v-model="value3" range></Slider>

            <Row style="margin-left:300px">

                <i-col span="12">

                </i-col>

                <i-col span="12">

                    <date-picker style="left:0px" type="daterange" placement="bottom-start" placeholder="选择日期"></date-picker>

                </i-col>

            </Row>

        </Tab-pane>

    </Tabs>

</div>

<script >

    new Vue({

        el: '#app',

        data: {

           visible: false,

           value3: [20, 50],

           value2: '',

           data2: []

        },

        methods: {

            show: function () {

                this.visible = true;

            },

             handleSearch2 (value) {

                this.data2 = !value || value.indexOf('@') >= 0 ? [] : [

                    value + '@qq.com',

                    value + '@sina.com',

                    value + '@163.com'

                ];

            }

        }

    })

  </script>

</body>

</html>

推荐一个网友的总结使用，对于组件的理解比较全面一些，传送门http://blog.csdn.net/u012123026/article/details/72460470

结束~

IView入门练习~CDN模式全局加载JS的更多相关文章

  1. 使用第三方CDN加速服务加载js/css

    ASP.NET MVC 3.0 http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js http://ajax.aspnet ...

  2. esri-leaflet入门教程（4）-加载各类图层

    esri-leaflet入门教程(4)-加载各类图层 by 李远祥 在leaflet中图层一般分为底图(Basemap)和叠加图层(Overlay).前面章节已经介绍过底图其实也是实现了TileLay ...

  3. Debug模式下加载文件，运行程序异常的慢

    今天在进行单元测试的时候,debug模式下加载速度很慢,但是run模式下速度很快. 原因:在debug模式下,断点位置不当,解决办法 移除编译器中的所有断点.

  4. php命令行模式下加载的php.ini文件可能和web模式下加载的php.ini不一致

    php命令行模式下加载的php.ini文件可能和web模式下加载的php.ini不一致 命令行下查看加载的php.ini的路径: php -i|grep php.ini web模式下查看: <? ...

  5. [译]我是如何将GTA在线模式的加载时间缩短70％的

    [译]我是如何将GTA在线模式的加载时间缩短70%的 译注: 最近在网上发现了一篇有意思的文章, 一个国外大神受不了GTA5在线模式的加载时间, 一怒之下反汇编了GTA5的源码, 并最终发现了问题的原 ...

  6. 关于document.write()加载JS等静态资源 和 异步async加载JS

    现流行浏览器对于静态资源的预加载 传统的浏览器,对于静态资源加载,会阻塞 HTML 解析器的线程进行,无论内联还是外链. 例如: <script src="test1.js" ...

  7. 无阻塞加载js，防止因js加载不了影响页面显示

    浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢 ...

  8. 使用jQuery动态加载js脚本

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...

  9. 动态加载JS代码

    到处查资料研究js动态脚本的加载,找到以下7种方法,总有一种适合你! 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne ...

随机推荐

  1. mysql数据库常见错误代码列表

    mysql出错代码列表1005:创建表失败 1006:创建数据库失败 1007:数据库已存在,创建数据库失败 1008:数据库不存在,删除数据库失败 1009:不能删除数据库文件导致删除数据库失败 1 ...

  2. npm学习（五）之使用package.json

    使用package.json 管理本地安装的npm包的最佳方法是创建一个package.json文件. 一个packagejson文件: 列出项目所依赖的包. 允许使用语义版本控制规则指定项目可以使用 ...

  3. 25、Python之禅

    要求: 爬取网页你好,蜘蛛侠!中的Python之禅中英文版本,并且打印.   目的: 练习使用selenium爬取动态网页的信息. 练习selenium与BeautifulSoup的搭配使用.     ...

  4. 查询GC日志、动态年龄计算

    https://www.cnblogs.com/onmyway20xx/p/6590603.html 从实际案例聊聊Java应用的GC优化 动态年龄计算 关于上文中提到晋升年龄阈值为2,很多同学有疑问 ...

  5. ipcs - 提供基于 ipc (Inter-process communication)结构的信息

    总览 ipcrm [ shm | msg | sem ] id 描述 ipcrm 将删除指定的资源--指定 id.

  6. 牛客假日团队赛5 K 金币馅饼 （DP 基础题）

    链接:https://ac.nowcoder.com/acm/contest/984/K 来源:牛客网 金币馅饼 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言 ...

  7. STM32Cube IDE 汉字字体变小解决办法

    用STM32Cube IDE自动生成的工程,如果用汉字注释的话,字体会变小,如下图: 解决方法:选中变小的汉字->右击选择Preferences,如下图: 在弹出的对话框中可以看出默认的字体是C ...

  8. 【UOJ#394】[NOI2018] 冒泡排序

    题目链接 题意 求有多少个字典序严格大于给定排列 \(q_i\) 的排列满足其逆序对数(冒泡排序需要交换的次数)达到下限 \(\frac{1}{2}\sum_{i=1}^n |i-p_i|\) Sol ...

  9. 容器"共享"宿主机的hosts文件（终极方案）

    0.背景 有时候制作docker镜像生成容器时需要宿主机的hosts文件共享到容器中.首先想的是通过挂载的方式共享hosts文件,但是实践时发现根本行不通,hosts文件在/etc/目录下,如进行挂载 ...

  10. vue和electron做的聊天应用表情包处理

    表情包库: https://apps.timwhitlock.info/emoji/tables/unicode <template> <div @click.stop> &l ...