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 ...
随机推荐
- 如何建设一个用于编译 iOS App 的 macOS 云服务器集群？
作者:京东零售 叶萌 现代软件开发一般会借助 CI/CD 来提升代码质量.加快发版速度.自动化重复的事情,iOS App 只能在 mac 机器上编译,CI/CD 工具因此需要有一个 macOS 云服务 ...
- vue—一个组件调用另一个组件的methods
这种方法不常用,项目中有个地方共享数据了,起初没用vuex做,后来有个地方不好解决,这两个组件没有什么关系 1.首先同一个vue实例来调用两个方法.所以可以建立一个中转站. 建立 util.js 中转 ...
- 【机器学习与深度学习理论要点】26.请列举AlexNet的特点
请列举AlexNet的特点 使用ReLU作为激活函数,并验证其效果在较深的网络超过了Sigmoid,成功解决了sigmoid在网络较深时梯度消失问题 使用dropout(丢弃学习)随机忽略一部分神经元 ...
- dataX源码学习
文章目录 前言 开始准备 运行配置 开始运行 JobContainer 1.进入init prepare schedule post阶段 this.invokeHooks(); 总结 前言 在用dat ...
- 关于java中的equal
正常情况下的equal方法是比较两者之间的id.如果需要它实现其他的问题,可以通过重写这个方法.idea自带了重写equal的快捷方式.右键生成中的equals() 和 hashCode()就可以帮助 ...
- P1008 [NOIP1998 普及组] 三连击，置顶题解的问题
题目链接: https://www.luogu.com.cn/problem/P1008 置顶题解 暴力,加简化的判断,数学原理,2个集合内所有数相加相乘结果一样,2个集合的内容一样(没错我自己编得, ...
- SRIO接口卡航电总线解决方案
TES600是天津拓航科技的一款基于FPGA与DSP协同处理架构的通用高性能实时信号处理平台,该平台采用1片TI的KeyStone系列多核浮点/定点DSP TMS320C6678作为主处理单元,采用1 ...
- Java设计模式简介（总结）
Java设计模式简介(总结) 什么是设计模式 Java设计模式是一组经过验证的解决特定问题的编程技术,这些技术可以帮助开发人员快速.有效地开发高质量的软件.使用设计模式是为了可重用代码.让代码更容易被 ...
- 2022-06-15：薯队长最近在参加了一个活动，主办方提供了N个礼物以供挑选， 每个礼物有一个价值，范围在0 ~ 10^9之间， 薯队长可以从中挑选k个礼物。 返回：其中价值最接近的两件礼物之间相差
2022-06-15:薯队长最近在参加了一个活动,主办方提供了N个礼物以供挑选, 每个礼物有一个价值,范围在0 ~ 10^9之间, 薯队长可以从中挑选k个礼物. 返回:其中价值最接近的两件礼物之间相差 ...
- 2021-11-02：生命游戏。根据 百度百科 ，生命游戏，简称为生命，是英国数学家约翰·何顿·康威在 1970 年发明的细胞自动机。给定一个包含 m × n 个格子的面板，每一个格子都可以看成是一个
2021-11-02:生命游戏.根据 百度百科 ,生命游戏,简称为生命,是英国数学家约翰·何顿·康威在 1970 年发明的细胞自动机.给定一个包含 m × n 个格子的面板,每一个格子都可以看成是一个 ...