2021-7-12 VUE的组件认识
VUE组件简单实例
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<div>
<bt></bt>
<bt></bt>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
Vue.component('bt',{
data:function(){
return{
count:0
}
},
template:'<button @click="count++">{{count}}</button>'
});
new Vue({
el:'#app',
data:{}
});
</script>
</body>
</html>
模板使用的注意事项
data必须是一个函数
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<div>
<bt></bt>
<bt></bt>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
Vue.component('bt',{
data:function(){
return{
count:0
}
},
//template:'<div><button @click="count++">{{count}}</button><button>你好呀</button></div>'//在使用多个标签时要添加一个根节点
//使用模板字符串可以让模板可读性更好一些
template:`<div>
<button @click="count++">{{count}}</button>
<button>你好呀</button>
</div>`
});
new Vue({
el:'#app',
data:{}
});
</script>
</body>
</html>
组件命名
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<div>
<bt></bt>
<bt></bt>
<h-w></h-w>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
Vue.component('HW',{//驼峰式命名，只能在模板中使用,不能在标签页中使用，如果要用的话要用小写加-,如上
data:function(){
return {
y:0
}
},
template:`
<button>hehe</button>
`
});
Vue.component('bt',{
data:function(){
return{
count:0
}
},
//template:'<div><button @click="count++">{{count}}</button><button>你好呀</button></div>'//在使用多个标签时要添加一个根节点
//使用模板字符串可以让模板可读性更好一些
template:`<div>
<button @click="count++">{{count}}</button>
<button>你好呀</button>
<HW></HW>
</div>`
});
new Vue({
el:'#app',
data:{}
});
</script>
</body>
</html>
局部组件的定义，要在components中用-命名注册
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<div>
<h-w></h-w>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
var HW={
data:function(){
return{
ss:'ss'
}
},
template:`
<span>{{ss}}</span>
`
}
new Vue({
el:'#app',
data:{},
components:{
'h-w':HW
}
});
</script>
</body>
</html>
2021-7-12 VUE的组件认识的更多相关文章
- 12.vue属性.监听.组件
1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.h ...
- [转] Vue + Webpack 组件式开发(练习环境)
前言 研究了下别人的 vue 多页面框架, 都是直接复制 package.json 文件,然后在本地 npm install 一下即可, 或者使用官网 vue-cli 工具生成一个项目, 觉得这样虽然 ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- 强烈推荐优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
- Vue UI组件库
1. iView UI组件库 iView官网:https://www.iviewui.com/ 2.Vux UI组件库 Vux官网:https://vux.li/ 3.Element UI组件库 ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- 【转】优秀的Vue UI组件库
原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...
- Vue专题-组件
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技 ...
- vue统计组件库和ui框架
UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...
随机推荐
- 数据结构(DataStructure)-01
数据结构-01 **数据结构与算法** **算法概述** **时间复杂度概述** **时间复杂度 - 计算规则** **数据结构概述** **抽象数据类型** **线性表 - 顺序表** **线性表 ...
- [OpenCV-Python] 24 模板匹配
文章目录 OpenCV-Python:IV OpenCV中的图像处理 24 模板匹配 24.1 OpenCV 中的模板匹配 24.2 多对象的模板匹配 OpenCV-Python:IV OpenCV中 ...
- Centos7.x 更换Jenkins构建目录
原由:最近因为原来的Jenkins构建目录,已经要满了,想着更换下构建目录,此篇文件简单介绍下更换过程. 注:此文章可能仅适用于我个人,仅供参考.如有其他办法,欢迎评论指教. 查了几种方法,最终选为使 ...
- Prism Sample 14-UsingEventAggregator
这次是事件聚合器的应用. 事件聚合器应用第一步:定义一个事件聚合器,应该是一个可访问的公共区域,例14为它做了一个core的项目.代码很简单: using Prism.Events; namespac ...
- Prism Sample 1
这个样例版本上已经过时了,但与8.1版本仍然兼容. 在本版本中,指定启动项: App.xaml.cs: protected override void OnStartup(StartupEventAr ...
- vue项目使用rem布局刷新页面瞬间元素尺寸由小变大，页面闪现错乱样式
vue项目使用px2remLoader插件,在index.html自定义设置font-size的大小,尤其是在首屏加载的时候,会出现页面各个元素尺寸由小变大的一个过程,很难看 刚开始一直在想是不是因为 ...
- 文心一言 VS chatgpt （15）-- 算法导论3.2 4~5题
四.函数 $\lceil \lg n \rceil !$ 多项式有界吗?函数 $\lceil \lg \lg n \rceil !$ 多项式有界吗? 文心一言: chatgpt: 对于第一个问题,函数 ...
- ET介绍——CSharp协程
什么是协程 说到协程,我们先了解什么是异步,异步简单说来就是,我要发起一个调用,但是这个被调用方(可能是其它线程,也可能是IO)出结果需要一段时间,我不想让这个调用阻塞住调用方的整个线程,因此传给被调 ...
- 第十三届蓝桥杯c++b组国赛题解（还在持续更新中...）
试题A:2022 解题思路: 有2022个物品,它们的编号分别是1到2022,它们的价值分别等于它们的编号.也就是说,有2022种物品,物品价值等于物品编号. 从2022个物品种选取10个物品,满足1 ...
- linux 引导过程和服务控制
目录 一.引导分区 二.服务控制 三.运行级别 四.systemd初始化 五.模拟错误 一.引导分区 原理:引导分区是指在开机启动到进入系统这之间的过程 引导分区的过程:1.开机自检 自检顺序:BIO ...