xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

shit vue & shit iview All In One

shit vue & shit iview All In One

<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>

refs

https://codepen.io/xgqfrms/pen/VNWzrr?editors=1010

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2019-04-12 14:34  xgqfrms  阅读(425)  评论(3)  编辑  收藏  举报