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 ...
随机推荐
- TensorFlow - 框架实现中的三种 Graph
文章目录 TensorFlow - 框架实现中的三种 Graph 1. Graph 2. GraphDef 3. MetaGraph 4. Checkpoint 5. 总结 TensorFlow - ...
- 2022-12-31：以下go语言代码输出什么？A：1 1；B：-1 1；C：-1 -1；D：编译错误。 package main import “fmt“ func main() { a
2022-12-31:以下go语言代码输出什么?A:1 1:B:-1 1:C:-1 -1:D:编译错误. package main import "fmt" func main() ...
- 2020-08-31：描述HTTP的版本之间的区别，主要是1.0/1.1/2.0三个版本的区别。
福哥答案2020-08-31: HTTP1.0与HTTP1.1的主要区别 1.长连接HTTP1.0:需要使用keep-alive参数来告知服务器端要建立一个长连接.HTTP1.1:默认支持长连接.2. ...
- 2022-10-22：以下go语言代码输出什么？A：moonfdd1；B：编译错误；C：运行时 panic。 package main import “fmt“ func main() {
2022-10-22:以下go语言代码输出什么?A:moonfdd1:B:编译错误:C:运行时 panic. package main import "fmt" func main ...
- Django-2：创建项目Project
命令:django-admin startproject mysite PS C:\Users\liujun> cd e:\pyapp\cmdbPS E:\pyapp\cmdb> djan ...
- 用批处理干掉汇编masm link六回车
干掉麻烦的六回车 踏破铁鞋无觅处,得来全不费功夫 前言 最近在上汇编语言的课,在手动编译链接的时候你可能做过以下操作: 输入 masm 1.asm 回车 回车 回车 输入 link 1.obj 回车 ...
- 【python基础】基本数据类型-字符串类型
1.初识字符串 字符串就是一系列字符.在python中,用引号括起来文本内容的都是字符串. 其语法格式为:'文本内容'或者"文本内容" 我们发现其中的引号可以是单引号,也可以是双引 ...
- RocketMQ 顺序消费机制
顺序消息是指对于一个指定的 Topic ,消息严格按照先进先出(FIFO)的原则进行消息发布和消费,即先发布的消息先消费,后发布的消息后消费. 顺序消息分为分区顺序消息和全局顺序消息. 1.分区顺序消 ...
- html+css简单易懂的轮播图实现
实现轮播图感觉好复杂啊,这个比较简单的实现了 但是还是没有怎么理解代码,只能先发出来慢慢学习学习了 话不多说,直接上代码 <!DOCTYPE html> <html lang=&qu ...
- 驱动开发：PE导出函数与RVA转换
在笔者上篇文章<驱动开发:内核扫描SSDT挂钩状态>中简单介绍了如何扫描被挂钩的SSDT函数,并简单介绍了如何解析导出表,本章将继续延申PE导出表的解析,实现一系列灵活的解析如通过传入函数 ...