关于 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. http://www.pythontutor.com/visualize.html#mode=edit python在线检测代码

    http://www.pythontutor.com/visualize.html#mode=edit

  2. tf-图像预处理

    tensorflow 中自带了很多图像处理的方法,基本都在 tf.image 模块中,虽然不如 opencv 强大,但也比较常用,这里做个记录. 图像编解码 1. 用 tf 的方法读取图片后,都需要进 ...

  3. 用Kindle阅读PDF最简单的3个方法！

    老实说,Kindle 对于PDF文件是很不友好的,经常会出现各种排版问题,所以,对电子阅读器方面比较了解的同学都知道,如果需要经常用阅读器查看PDF文件的话,最好还是买一款更大屏幕的设备,而Kindl ...

  4. [.net core]9.中间件的具体实现

    查看Startup.cs的configure方法 public void Configure(IApplicationBuilder app, IHostingEnvironment env) { i ...

  5. Redis安装遇到的坑 stdlib.h: No such file or directory

    我使用的是ubuntu,本来这几天失业,心情不是很好,准备复习一下新的知识,可是自己在安装redis的过程中遇到了很多的问题. 或许自己很菜. 废话不多说,说一下我遇到的一个大坑. root@ufiv ...

  6. 【原创】Themida 2260 虚拟机 FISH 初探(一)

    标 题: [原创]Themida 2260 虚拟机 FISH 初探(一)作 者: xiaohang时 间: 2016-03-03,00:39:37链 接: http://bbs.pediy.com/s ...

  7. scrapy框架设置代理ip，headers头和cookies

    [设置代理ip] 根据最新的scrapy官方文档,scrapy爬虫框架的代理配置有以下两种方法: 一.使用中间件DownloaderMiddleware进行配置使用Scrapy默认方法scrapy s ...

  8. chrome插件2

    转自:http://www.codeceo.com/article/15-chrome-extension.html 1. Web Developer 支持Chrome的Web Developer扩展 ...

  9. JS 的 Element元素对象

    在 HTML DOM 中, 元素对象代表着一个 HTML 元素. 元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点. NodeList 对象 代表了节点列表,类似于 HTML元素的子节 ...

  10. 原型链—— javascript

    目录 js面向对象编程 js原型链 共享方法 原型继承 class继承 js面向对象编程 js面向对象编程不同于 java 的类和对象 JavaScript 不区分类和实例的概念,而是通过原型(pro ...