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>
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！