shit vue & shit iview

<Switch> !== <i-switch>

https://www.iviewui.com/components/switch



<!DOCTYPE html>

<html lang="zh-Hans">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="xgqfrms">

    <meta name="generator" content="VS code">

    <title>vue & iview</title>

    <!-- https://vue.xgqfrms.xyz/index.html -->

    <!-- import stylesheet -->

    <link rel="stylesheet" href="./ivew-3.3.3/iview.css">

    <!-- libs -->

    <!-- import Vue.js -->

    <script src="./ivew-3.3.3/vue-2.6.10/vue.min.js"></script>

    <!-- import iView -->

    <script src="./ivew-3.3.3/iview.min.js"></script>

</head>

<body>

    <section>

        <div id="app">

            <i-button @click="show">Click me!</i-button>

            <Modal v-model="visible" title="Welcome">Welcome to iView</Modal>

            <i-switch size="large">

                <span slot="open">开启</span>

                <span slot="close">关闭</span>

            </i-switch>

            <!-- <template>

                <Switch size="large">

                    <span slot="open">开启</span>

                    <span slot="close">关闭</span>

                </Switch>

            </template> -->

        </div>

    </section>

    <!-- js -->

    <script>

        // import {Button, Switch } from "iview";

        console.log(`iview`, iview);

        new Vue({

            el: "#app",

            components: {

                "Switch": iview.Switch,

            },

            data: {

                visible: false

            },

            methods: {

                show: function () {

                    this.visible = true;

                }

            },

        })

      </script>

</body>

</html>

https://codepen.io/xgqfrms/pen/VNWzrr

vue-component

https://www.runoob.com/vue2/vue-component.html

https://www.w3cplus.com/vue/component-registered.html

https://vuejs.org/v2/guide/components.html

https://cn.vuejs.org/v2/guide/components-registration.html

局部组件实例



<div id="app">

    <runoob></runoob>

</div>

<script>

var Child = {

  template: '<h1>自定义组件!</h1>'

}

// 创建根实例

new Vue({

  el: '#app',

  components: {

    // <runoob> 将只在父模板可用

    'runoob': Child

  }

})

</script>

全局组件实例



<div id="app">

    <runoob></runoob>

</div>

<script>

// 注册

Vue.component('runoob', {

  template: '<h1>自定义组件!</h1>'

})

// 创建根实例

new Vue({

  el: '#app'

})

</script>

shit vue & shit iview的更多相关文章

  1. vue安装iview和配置

    在命令行工具上输入:npm install iview --save 等待安装完成. 在项目的src/main.js中添加三行代码引入iview import iView from 'iview' i ...

  2. vue配合iview/element等ui实现界面效果起步

    iview与element都是与vue配合使用的ui框架,用法与配置基本一致,在此,我以iview为例,教你如何起步.*首先,你需要有一定的vue基础,如果你还是个小白,可以去我之前介绍如何搭建一个v ...

  3. 基于Vue+Vuex+iView的电子商城网站

    MALL-VUE 这是一个基于VUE + VUEX + iView做的一个电商网站前端项目, 附带前后端分离实现版本(在forMallServer分支),欢迎fork或star 项目地址: https ...

  4. 【Vue】IView之table组件化学习（二）

    最基本的绑定table是这样的,需要columns和data两个属性. <template> <Card> <h4>表格栗子</h4> <Tabl ...

  5. vue和iview中native点击事件修饰

    在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加'. native'事件是无法触 在vue中使用iview的dropdownMenu 上单纯的@click也不生效,要写成 ...

  6. vue - router + iView 的使用（简单例子）

    所使用的工具:谷歌浏览器.Nodejs(自带npm).HBuilder 0.要先安装Nodejs,下载安装即可 0-1.安装vue-cli,打开cmd 输入 npm install -g @vue/c ...

  7. vue使用iview Timeline 时间轴不显示问题

    vue Timeline 时间轴不显示渲染的效果 官网代码 <Timeline pending> <TimelineItem>发布1.0版本</TimelineItem& ...

  8. vue基于iview树状表格，封装完善

    先安装iview后在使用 完善按钮不显示问题 ,当children过多时,点击不动问题等 封装 <template> <div :style="{width:tableWi ...

  9. vue、iview动态菜单（可折叠）

    vue项目与iview3实现可折叠动态菜单. 菜单实现一下效果: 动态获取项目路由生成动态三级菜单导航 可折叠展开 根据路由name默认打开子目录,选中当前项 自动过滤需要隐藏的路由(例:登陆) 在手 ...

随机推荐

  1. Python这么强大, 怎样才能快速入坑?

    作为一种年轻的编程语言,Python为何能在短短几年的时间内就以迅雷不及掩耳之势驰骋编程界?答案很简单,在人工智能时代,AlphaGo 都在使用的 Python语言,是最接近 AI 的编程语言. 随着 ...

  2. [Micropython]TPYBoard v202 利用单片机快速实现家庭智能控制平台

    一提到智能家庭,大家可能首先想到的是各种大佬级公司搞的牛逼产品,或者说是创新产品.想想就觉得很复杂,有的用工控机,有的用树莓派,还有的用arduino,不管用什么,都绕不过服务器进行控制,比如yeel ...

  3. bernoulli数

    LL B[N][],C[N][N],f[N][]; int n,m; LL gcd(LL a,LL b){return b?gcd(b,a%b):a;} LL lcm(LL a,LL b){retur ...

  4. C# Oracle 时间字符串转时间类型

    C# 字符串转时间类型 yyyy-MM-dd HH:mm:ss  yyyy-MM-dd hh:mm:ss d 月中的某一天.一位数的日期没有前导零. dd 月中的某一天.一位数的日期有一个前导零. d ...

  5. 启动mysql服务，报错1067，进程意外终止

    之前一直使用的是oracle,这次换成mysql,在配置my.ini的时候,添加default-character-set=utf8,来修改字符集. 修改完成之后,启动mysql的服务,但是报错,10 ...

  6. 【thinkPHP框架】Failed opening required 'header.php' include_path='.;c:\php5\pear 终级解决方案

    ThinkPHP框架中的某一个php页面,想要去引入其他php页面,结果反复报错,无解. 各种百度,有说是文件权限不够的,也有说配置不对的,反正一个都没有解决这个问题,依然无解. 最终,找到了办法,似 ...

  7. Java多线程核心技术(六)线程组与线程异常

    本文应注重掌握如下知识点: 线程组的使用 如何切换线程状态 SimpleDataFormat 类与多线程的解决办法 如何处理线程的异常 1.线程的状态 线程对象在不同运行时期有不同的状态,状态信息就处 ...

  8. JVM加载类冲突，导致Mybatis查数据库返回NULL的一个小问题

    今天碰到个bug,虽然小,但是有点意思 背景是SpringMVC + Mybatis的一个项目,mapper文件里写了一条sql 大概相当于 select a from tableA where b ...

  9. Django+nginx+uwsgi部署教程

    00-所需工具 xshell:https://www.netsarang.com/zh/downloading/?token=ZlZnVUNsWDJuM0VaZnVPUjZST1dwd0AzYlNte ...

  10. mysql面试题目1

    有这样一个成绩表,学生A,B,C,三个人,考试科目分别为C(chinese),M(math),E(english) 求三门课成绩都大于80分的那个学生姓名: 即查询的方法可分为俩种:select na ...