关于 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. 原生js：click和onclick本质的区别（转https://www.cnblogs.com/web1/p/6555662.html）

    原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的 ...

  2. MD5算法+盐Salt

    1.MD算法的基的概念    MD5算法是典型的消息摘要算法,其前身有MD2.MD3和MD4算法,它由MD4.MD3和MD2算法改进而来.不论是哪一种MD算法,它们都需 要获得一个随机长度的信息并产生 ...

  3. python之self的理解

    一.self的位置是出现在哪里? 首先,self是在类的方法中的,在调用此方法时,不用给self赋值,Python会自动给他赋值,而且这个值就是类的实例--对象本身.也可以将self换成别的叫法例如s ...

  4. 097、如何实现Service伸缩？（Swarm04）

    参考https://www.cnblogs.com/CloudMan6/p/7885667.html   上一节部署了只有一个副本的Service,不过对于web服务,我们通常会运行多个实例,这样可以 ...

  5. UIWebView与JS的交互

    IOS-的UIWebView UIWebVew是ios开发中较为常用的一个控件.其可以打开网页,加载html,打开文档等.当我们在开发中需要用到一些显示页面时,UIWebView是一个很好的选择. 创 ...

  6. init_module - 初始化一条可加载模块的记录.

    总览 #include <linux/module.h> int init_module(const char *name, struct module *image); 描述 init_ ...

  7. linux系统批量修改root密码

    #!/bin/bash ip_list=(192.168.36.12 192.168.36.13) remote_cmd="echo new-passwd | passwd --stdin ...

  8. docker常用技巧

    1:运行中容器如何保存为一个镜像? docker commit 容器名字 镜像名字 2:怎么给容器增加名字 docker rename 容器id(或名字)name(新名字) 3:docker中的Doc ...

  9. 魔术矩阵Java代码

    //该魔术矩阵默认从右上角45度递增 //@漫流——595128841在qq点com //import java.util.Arrays; //用于打印API函数 public class 魔方矩阵 ...

  10. Vue基础第三章 - 计算属性

    1.计算属性介绍 在第二章中我们介绍了在Vue的{{}}中可以使用一些简单的表达式进行计算,但是当表达式过长或者逻辑过于复杂就会变得不易理解和维护,比如第二章的示例{{ text.split(',') ...