直接粗暴地上html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
    <Tabs value="name1">
        <Tab-pane label="我是" name="name1">你好</Tab-pane>
        <Tab-pane label="博主" name="name2">我是</Tab-pane>
        <Tab-pane label="秋意正寒" name="name3">秋意正寒</Tab-pane>
    </Tabs>
</div>
<script>
    new Vue({
        el: '#app',
    })
  </script>
</body>
</html>

与最平常的网页没什么不同，重点就是link标签和紧接着的两个script标签了，是对vuejs和iview的引用。

div里的Tabs标签就是iView的组件Tabs！

底下的script标签就是标准的Vuejs写法了~双向绑定。

打开此html文件：

漂亮的Tab分页就出来了。

iView的使用【CDN向】的更多相关文章

  1. IView入门练习~CDN模式全局加载JS

    关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 高质量.功能丰富 友好的 API ,自由灵活地使用空间 细致.漂亮的 UI 事 ...

  2. 解决CDN传统方法引入Iview icon 不显示问题

    因为需要字体文件,可以在github上下载. 将文件下载之后放到fonts文件夹下,fonts文件夹要与Iview.css在同级目录

  3. CDN方式使用iview

    如果没有使用webpack,可以使用我们提供的工具iview-theme来编译 首先需要安装主体生成工具,从npm全局活在项目中局部安装 以全局安装为例: npm install iview-them ...

  4. Iview+Vue CDN NetMvC 简单demo

    1.引用相关js文件 2.菜单采用静态数据加载 3.效果展示 4.代码下载 https://github.com/sulin888/NetVueAdmin.git

  5. 基于 Vue.js 之 iView UI 框架非工程化实践记要

    像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven ...

  6. iView的使用【小白向】

    首先看这篇:构建Vue本地开发环境(现阶段还不知道怎么用CDN的方式做...) 安装iView(WindowsPowershell或cmd下用cnpm) 编辑上一篇博客创建的Vue工程 先到main. ...

  7. Vue + iView + vuex + vee-validate 完整项目总结

    build/*.js config/*.js src/旧代码文件夹 部门最近的一个新项目启动,很幸运由我来主导整个前端部分的技术选型和整体架构,项目工作量很大,但是却没有足够的人手,只有三个连CSS都 ...

  8. iview 非 template/render 标签转换

    在 非 template/render情形下使用 iview,发现除了官方的一些需要注意的点外,还有一些其他需要注意的,这里记录下,防踩坑: 官方说明: 在非 template/render 模式下( ...

  9. iview使用vue-i18n实现国际化

    iview官网中和网上的例子中使用的都是webpack方式,需要import js文件,但是由于项目架构比较简单,没有使用webpack,纯html和js进行交互.所以这里就直接使用js文件引用方式. ...

随机推荐

  1. Dynamics 365创建电子邮箱字段包含值的联系人同时更改负责人的方法。

    摘要: 本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复267或者20171129可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyon ...

  2. css选择器的优先级问题

    当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效,那是为什么呢? 定义的属性有冲突时,浏览器会选择用那一套样式呢,下面来 ...

  3. MFC中小笔记(三)

    10.在添加新Menu之后,代码中 调用 创建的IDR_MENU1,一直出现 Debug Assertion Failed的情况.原因是,没有写入到 项目.RC中,需要更新下rc(资源文件). 然后进 ...

  4. ajax的跨域请求

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...

  5. 老男孩Python视频教程：第一周

    认识和尝试Python 备注:老男孩Python视频教程,视频来自网络,在此分享,侵删 对我来说,第一周视频主要解答了以下疑问: 1. Python的三大特点是什么? 答:解释型.动态类型(运行期间才 ...

  6. javascript面向对象系列第四篇——OOP中的常见概念

    前面的话 面向对象描述了一种代码的组织结构形式——一种在软件中对真实世界中问题领域的建模方法.本文将从理论层面,介绍javascript面向对象程序程序(OOP)中一些常见的概念 对象 所谓对象,本质 ...

  7. PHP设置环境变量

    如果提示php命令不存在.说明未设置.设置方法如下 方法一:直接运行命令 [PHP] 纯文本查看 复制代码 ? 1 export PATH=$PATH:/usr/local/xxxx/php/bin ...

  8. mysql 索引类型

    根据类型分为普通索引2种类型,hash 和b-tree   最常用    hash是按一对一索引的.速度 最快但不支持范围 比如where name = 'dd' 最快.但是使用 date >3 ...

  9. YII2连表分页

    控制器(controller)页面 use \yii\data\Pagination; //引入这个类 public function actionList(){ $data = Clock::fin ...

  10. 数据结构与算法（C/C++版）【串】

    第四章<串.数组> (一)串   数据结构中提到的串,即字符串,由 n 个字符组成的一个整体( n >= 0 ).这 n 个字符可以由字母.数字或者其他字符组成.例如,S = &qu ...