关于 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. Codeforces 1220C. Substring Game in the Lesson

    传送门 首先显然的,如果 $l$ 能移动,那么 $r$ 一定可以随便移动,如果 $l$ 不动,那么 $r$ 一定不能动 那么我们现在只要考虑 $l$ 的移动即可 考虑找到位置 $k$ 之前的最左边的最 ...

  2. [转载]Oracle之单引号与双引号

    一.单引号 1.引用一个字符串常量,也就是界定一个字符串的开始和结束 select * from t_sys_user where id='15'; --查询id为15的字符 select * fro ...

  3. kill - 终止进程

    SYNOPSIS(总览) kill[-ssignal|-p][-a]pid... kill -l [ signal ] DESCRIPTION (描述) kill 给指定进程发送指定信号. 如果没有指 ...

  4. js 一些小技巧

    Javascript 中的 绑定事件 on $(document).on("事件","元素","方法"): Js 定时方法 1.setTim ...

  5. zabbix 数据库问题

    Too many connections ::052844.247 Cannot connect to the database. Exiting... :: started [trapper #] ...

  6. 利用logrotate切割nginx的access.log日志

    一.新建一个nginx的logrotate配置文件 /var/log/nginx/access.log { daily rotate compress delaycompress missingok ...

  7. hive模拟数据

    人员表 id,姓名,爱好,住址 1,小明1,lol-book-movie,beijing:mashibing-shanghai:pudong 2,小明2,lol-book-movie,beijing: ...

  8. SpringBootMVC04——Mybatis

    简介 MyBatis是一个优秀的持久层框架,它对jdbc的操作数据库的过程进行封装,使开发者只需要关注SQL本身,而不需要花费精力去处理例如注册驱动.创建connection.创建statement. ...

  9. LeNet-5模型的keras实现

    import keras from keras.models import Sequential from keras.layers import Input,Dense,Activation,Con ...

  10. 字典树——动态&&静态

    静态---时间快 /************************************************************************* > File Name: ...