shit vue & shit iview

時間 2019-11-20

標籤 shit vue iview 简体版

原文原文鏈接

shit vue & shit iview

`<Switch>` !== `<i-switch>`

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

<!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/VNWzrrhtml

vue-component

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

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

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

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

局部組件實例ui

<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = {
  template: '<h1>自定義組件!</h1>'
}
 
// 建立根實例
new Vue({
  el: '#app',
  components: {
    // <runoob> 將只在父模板可用
    'runoob': Child
  }
})
</script>

全局組件實例this

<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 註冊
Vue.component('runoob', {
  template: '<h1>自定義組件!</h1>'
})
// 建立根實例
new Vue({
  el: '#app'
})
</script>

相關標籤/搜索

每日一句

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

shit vue & shit iview

shit vue & shit iview

<Switch> !== <i-switch>

vue-component

`<Switch>` !== `<i-switch>`