关于 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. 搜索专题:Balloons

    搜索专题:Balloons 这道题一看与时间有关,第一想到的就是BFS,定义一个状态,包含每一个状态的剩余气球数,已经进行的时间和每一个志愿者上一次吹气球的时间: 每一次状态转换时,检查是否有没有使用 ...

  2. Mac 基于Anaconda的TensorFlow安装笔记

    最近在中国大学MOOC平台学习北大的曹健老师上的“人工智能实践——Tensorflow”课程,开始我的人工智能之旅.第一天,讲解如何搭建实验室环境,我是mac系统,所以只写mac系统上的实验室环境安装 ...

  3. sql server 获取随机数函数RAND()和RAND(x)

    --RAND(x)返回一个随机浮点值v,范围在0~1之间(即0<=v<=1.0) --若指定一个整数参数x,则它被用作种子值,使用相同的种子数将产生重复序列.如果同一种子值多次调用RAND ...

  4. 自用|DDoS防御产品集合

    这是笔者对国内外的DDoS云防御产品做的一个集合,之前存在自己的文档里很久了,现在修改后发出来大家可以一起看看,有需要的也方便比较按需选择.有免费版的我会放在前面,遇到微量攻击时可以应急,并且也可以感 ...

  5. 从零开始学MySQL(三)

    经过上两节的洗礼,我们能够连接上服务器,并成功地进入与mysql交互的会话中了.那么现在就可以发起SQL语句,让服务器来执行它了!这听起来很酷吧?接下来,我们开始学习MySQL的相关知识. 本文概览: ...

  6. MathType 7.4.2.480

    目录 1. 相关推荐 2. 按 3. 软件介绍 4. 安装步骤 5. 使用说明 6. 下载地址 1. 相关推荐 推荐使用:AxMath(AxMath可以与LaTeX进行交互):https://blog ...

  7. init, telinit - 进程处理初始化

    总览 /sbin/init [ -a ] [ -s ] [ -b ] [ -z xxx ] [ 0123456Ss ] /sbin/telinit [ -t 秒 ] [ 0123456sSQqabcU ...

  8. 018-zabbix_api

    Zabbix API 简介 Zabbix API 开始扮演着越来越重要的角色,尤其是在集成第三方软件和自动化日常任务时. 很难想象管理数千台服务器而没有自动化是多么的困难. Zabbix API 为批 ...

  9. 最简单的Android项目（添加jar文件）

    如果项目需要引用第三方jar文件,需要对编译命令做一些改动. 首先在项目根目录创建libs目录,将需要的jar文件拷贝到里面. 编译过程中有两步需要改动. 编译java源文件时,需要添加class p ...

  10. php set_magic_quotes_runtime() 函数过时解决方法

    PHP5.3中 bool set_magic_quotes_runtime ( bool $new_setting )函数过时.把函数: set_magic_quotes_runtime($newse ...