shit vue & shit iview
2024-04-01 13:42:24
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>
最新文章
- 设计模式 之 装饰者（Decorator）模式
- sublime 支持php语法错误提示的插件
- 删除svn文件的批处理文件
- windows环境下 生成git公钥和私钥
- webview中java与js交互
- Linux内核学习笔记2——Linux内核源码结构
- 自写图片遮罩层放大功能jquery插件源代码，photobox.js 1.0版，不兼容IE6
- js中退出语句break,continue和return 比较（转）
- 中学之Vim实践课程
- 【Centos7】Delete virtual bridge
- springboot中配置tomcat的access log
- event.target 和 event.currentTarget 的区别
- Mysql 存储过程批量建表
- JavaScript 基础排序的实现(一)
- P1101 单词方阵 （单词方阵）
- ubuntu18.04中python虚拟环境的安装
- python 数据科学
- len()
- Python3.5 源码安装 Ubuntu16.04环境
- BZOJ3791:作业(DP)