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 ...
随机推荐
- CopyOnWriteArrayList的使用和优缺点
CopyOnWriteArrayList允许并发读,读操作无锁,性能较高: 而写操作(含删除),比如向容器中添加/删除一个元素,则首先将当前容器复制一份,然后在新副本上执行写操作,结束之后再将原容器的 ...
- 分布式文件存储MinIO、安装和使用
1.MinIO简介 MinIO是高性能的对象存储,单个对象最大可达5TB.适合存储图片.视频.文档.备份数据.安装包等一系列文件.是一款主要采用Golang语言实现发开的高性能.分布式的对象存储系统. ...
- 笔记：linux必备网络基础概念和以太网技术基础
笔记:linux必备网络基础概念和以太网技术基础 由于后面可能需要对交换机进行一些配置,所以也是临时学习一下iptables的相关配置,以及一些基本的网络知识,下面就是我看到一些资料做的一些总结,希望 ...
- 如何在SpringBoot项目中兼容Jersey和SpringMVC框架?
文章目录 Jersey框架介绍 常用的注解: SpringBoot中SpringMVC兼容Jersey 整合Jersey REST(Representational State Transfer)表象 ...
- Prism Sample 11-UsingDelegateCommands
本例的知识点,全在ViewModel中,看代码: 1 public class MainWindowViewModel : BindableBase 2 { 3 private bool _isEna ...
- jQuery实现swipe事件
// jQuery.event.swipe // 0.5 // Stephen Band // Dependencies // jQuery.event.move 1.2 // One of swip ...
- 2022-06-02：一开始在0位置，每一次都可以向左或者向右跳， 第i次能向左或者向右跳严格的i步。 请问从0到x位置，至少跳几次可以到达。 来自字节。 力扣754. 到达终点数字。
2022-06-02:一开始在0位置,每一次都可以向左或者向右跳, 第i次能向左或者向右跳严格的i步. 请问从0到x位置,至少跳几次可以到达. 来自字节. 力扣754. 到达终点数字. 答案2022- ...
- HCIP- ICT实战进阶ex1-MPLS
HCIP- ICT实战进阶ex1-MPLS 0 前言 由于BGP设备之间是通过TCP协议实现的跨设备互联, 所以在两台BGP设备之间的其他设备是没有配置BGP协议的, 因此中间的其他设备很可能无法学习 ...
- OneForAll下载安装以及环境配置
python-3.9.7-amd64 OneForAll-master python安装以及插件安装 首先下载python解压到电脑c盘在c盘中创建一个工具文件夹,然后下载OneForAll-mast ...
- 在C++中，传值还是传引用？
情况一:需要修改原对象 需要修改原对象的情况,必须要传引用.这种情况没什么要说的. 情况二:不需要修改原对象 对于内置类型(整数.浮点数.字符类型等),传值效率更高.主要有三点原因: 内存开销更小.由 ...