【vue笔记系列第一篇】iview研习

最新推荐文章于 2023-01-30 16:03:51 发布

伯爵大人

最新推荐文章于 2023-01-30 16:03:51 发布

阅读量205

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/lixianghai2010/article/details/88700126

版权

vue 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

一，弹出

<!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">
    <i-button @click="show">Click me!</i-button>
    <Modal v-model="visible" title="Welcome">Welcome to iView</Modal>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            visible: true
        },
        methods: {
            show: function () {
                this.visible = !this.visible;
            }
        }
    })
  </script>
</body>
</html>

效果图

二，按钮button

1，在没有vue环境的情况下，所有的控件都需要用i-开头

<!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">
    <i-button @click="show">Click me!</i-i-button>
    <Modal v-model="visible" title="Welcome">Welcome to iView</Modal>
	 <i-i-button>Default</i-i-button>
    <i-button type="primary">Primary</i-button>
    <i-button type="dashed">Dashed</i-button>
    <i-button type="text">Text</i-button>
    <br><br>
    <i-button type="info">Info</i-button>
    <i-button type="success">Success</i-button>
    <i-button type="warning">Warning</i-button>
    <i-button type="error">Error</i-button>
</div>
   

<script>
    new Vue({
        el: '#app',
        data: {
            visible: true
        },
        methods: {
            show: function () {
                this.visible = !this.visible;
            }
        }
    })
  </script>
</body>
</html>

效果图

三，布局

iview布局是以24等份珊格为基础划分，并以span为语法设置

1，代码

<template>
    <Row>
        <Col span="12">col-12</Col>
        <Col span="12">col-12</Col>
    </Row>
    <br>
    <Row>
        <Col span="8">col-8</Col>
        <Col span="8">col-8</Col>
        <Col span="8">col-8</Col>
    </Row>
    <br>
    <Row>
        <Col span="6">col-6</Col>
        <Col span="6">col-6</Col>
        <Col span="6">col-6</Col>
        <Col span="6">col-6</Col>
    </Row>
</template>
<script>
    export default {
        
    }
</script>

效果图

伯爵大人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【vue笔记系列第一篇】iview研习

一，弹出<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>iview example</title> <link rel="stylesheet" type="text/css" href="http://unpkg...
复制链接

扫一扫

专栏目录