iview 入門之helloword（1）

時間 2019-11-19

標籤 iview 入門 helloword 欄目 Microsoft Office 简体版

原文原文鏈接

對於iview組件進行系統學習，因爲前端基礎太差，不會webpcak，又新看了webpack。我的理解就是一個對模塊進行打包的工具javascript

不過處於對iview組件的迫切使用，直接在html本地中測試了組件，嗯，比我寫的好看一萬倍了。此處有坑就是不在node環境下template中寫直接在HTML中寫iview的話部分組件應該使用i-小寫的，如此處闌珊佈局，Col應寫成i-col纔好使,此處放上全部iview不在template中應修改的標籤（不應的話直接放html裏就會不對哦，來自於iview官網）：css

如下組件，在非 template/render 模式下，須要加前綴 i-：html

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

另外，在iview官網下有個坑就是Form表單的源代碼，首先應把Form改成i-form，而後再官網下FormItem是使用的駝峯標識，在Vue.js的官網中也提到了，所以應該把FormItem改成Form-item,此處表示找錯找了半小時纔想到。。。。。。被坑得不要不要的了~vue

本地測試代碼java

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
    <title>iview example</title>
    <link rel="stylesheet" href="iview/dist/styles/iview.css" />
    <script type="text/javascript" src="js/vue.min.js" ></script>
    <script type="text/javascript" src="iview/dist/iview.min.js" ></script>

    <link rel="stylesheet" href="css/syle.css" />
</head>
<body>
<div id="app">
    <Row>
        <i-col span="12">
            <Steps :current="2">
                <Step title="已完成" content="這裏是該步驟的描述信息"></Step>
                <Step title="進行中" content="這裏是該步驟的描述信息"></Step>
                <Step title="待進行" content="這裏是該步驟的描述信息"></Step>
                <Step title="待進行" content="這裏是該步驟的描述信息"></Step>
            </Steps>
        </i-col>
        <i-col span="12">
            <Tabs value="name1">
        <Tab-pane label="我是" name="name1">你好</Tab-pane>
        <Tab-pane label="你好" name="name2">我是</Tab-pane>
    </Tabs>
             <i-button @click="show">Click me!</i-button>
        </i-col>
    </Row>
    
    
    <Modal v-model="visible" title="Welcome">歡迎使用 iView</Modal>
    <Slider v-model="value1"></Slider>
    <Slider v-model="value2" range></Slider>
    <Slider v-model="value3" range disabled></Slider>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            visible: false,
             theme1: 'light',
             value1: 25,
                value2: [20, 50],
                value3: [20, 50]
        },
        methods: {
            show: function () {
                this.visible = true;
            }
        }
    })
  </script>
</body>
</html>

結果圖：node

1. springboot入門之HelloWord
2. Ios 入門 ----Helloword
3. CODESYS入門-HelloWord!
4. Spark入門helloword
5. hibernate基礎簡單入門1---helloword
6. C#入門（一）HelloWord
7. Spring Boot入門程序---HelloWord
8. springboot系列（1）--springboot之helloword
9. iview的使用入門
10. ExtJS <1> HelloWord
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。