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 ...
随机推荐
- springboot自动装配大概原理
自动装配: pom.xml spring-boot-dependence:核心都依赖在父类工程中! 我们在写入或者引入springboot依赖的时候,不需要指定版,因为有这些仓库的版本 启动器:--- ...
- .Net开发的音频分离桌面应用，可用于提取背景音乐
背景音乐对于视频来说是非常重要的,制作视频的人来说,听到一些符合自己视频的背景音乐,又找不到背景音乐的源音乐,这时候就需要有软件帮助提取背景音乐了. 项目简介 这是基于C#开发的UI界面,支持中文等多 ...
- Finalshell
使用VMware可以得到Linux虚拟机,但是在VMware中操作Linux的命令行页面不太方便 1.内容的复制.粘贴跨越VMware不方便 2.文件的上传.下载跨越VMware不方便 3.也就是和L ...
- 自建CA和公共CA有什么不同？
据统计,全球有数百个公共CA,通常它们是按国家地区进行划分的.这类CA受大众的广泛认可和使用,也被称为公共信任的证书颁发机构.但是由于一些大型企业拥有许多站点,为了更轻松高效的管理以及考虑到维护成本, ...
- 【GiraKoo】CMake提示could not find any instance of Visual Studio
CMake提示could not find any instance of Visual Studio. 原因 此种情况是由于默认的CMake工具不是Visual Studio提供的版本导致的. 解决 ...
- 创建nodejs项目并接入mysql，完成用户相关的增删改查的详细操作
本文为博主原创,转载请注明出处: 1.使用npm进行初始化 在本地创建项目的文件夹名称,如 node_test,并在该文件夹下进行黑窗口执行初始化命令 2. 安装 expres包和myslq依赖包 n ...
- Qt+QtWebApp开发笔记（四）：http服务器使用Session和Cookie实现用户密码登录和注销功能
前言 前面实现了基础的跳转,那么动态交互中登录是常用功能. 本篇实现一个动态交互的简单登录和注销功能,在Qt中使用Session和Cookie技术. Demo 下载地址 链接:ht ...
- cookie和session以及token
cookie和seesion以及token 技术都基于状态保持, cookie: 有服务器生成, 以 k:v 形式保持在浏览器端,下次请求服务器,附带cookie信息:存在恶意修改可能:可以对co ...
- 使用git 将本地代码上传码市私用仓库操作
1 现在在登录码市建立项目 2 本地建立一个文件夹,然后使用git bash 3 初始化本地库 git init 4,进入刚刚在码云新建的项目里,复制框框里的路径 5,然后在回到本地新建的 ...
- 【Python&目标识别】调用百度智能云API实现植被识别
百度智能云于2015年正式对外开放运营,以"云智一体"为核心赋能千行百业,致力于为企业和开发者提供全球领先的人工智能.大数据和云计算服务及易用的开发工具.凭借先进的 ...