vue组件常用声明方式
一.前言
这是自己重新写的一个，感觉以前的太写了很多不必要的方式 实际当中基本不会用的 所以自己写了一个常用的组件什么方式 更加的通俗易懂
二.代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件练习</title>
<!-- 引入vue.js -->
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<!-- {{msg}} -->
<!-- 全局组件 -->
<my-div></my-div>
<!-- 局部组件 -->
<my-div2></my-div2>
<!-- //templata 注册全局组件 -->
<clj></clj>
<!-- //templata 注册局部组件 -->
<clj2></clj2>
</div>
<!-- //templata 注册全局组件 -->
<template id="my-template">
<div>
我是template全局组件
</div>
</template>
<!-- //templata 注册全局组件 -->
<template id="my-template2">
<div>
我是template局部组件
</div>
</template>
<script>
// 全局组件
Vue.component('clj',{template:"#my-template"})
Vue.component("my-div",{template:`<div>我是全局组件</div>`})
new Vue({
el:'#app',
data(){
return{
msg:'我不爱大海和森林'
}
},
//局部组件
components:{
'my-div2':{template:`<div>我是局部组件</div>`},
'clj2':{template:"#my-template2"}
}
})
</script>
</body>
</html>
vue组件常用声明方式的更多相关文章
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- vue 组件间传值方式
/* 父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 <v-header :title="title"></v-header> 2.在子组件里 ...
- vue组件常用传值
一.使用Props传递数据 在父组件中使用儿子组件 <template> <div> 父组件:{{mny}} <Son1 :mny="mny"&g ...
- vue组件的调用方式
vue中一般都会把公共内容作为一个组件去布局,但是如何引用自定义的组件呢?下面就是vue调用自定义组件的方式,主要代码如下: <template> <div> <span ...
- Vue组件的定义方式
1.使用template标签定义组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- vue组件的拆分
vue组件的拆分 <div class="div"> <!-- 拆分出来的组件 自定义名字moban --> <moban></moban ...
- vue-class-component 以class的模式写vue组件
vue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件.vue-class-component(以下简称Component)带来了很多便利: 1.me ...
- vue组件的配置属性
vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...
- Vue组件的介绍与使用
组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...
随机推荐
- Linux基本架构
Linux linux设计思想 1.程序应该小而专一,程序应该尽量的小,且只专注于一件事上,不要开发那些看起来有用但是90%的情况都用不到的特性: 2.程序不只要考虑性能, 程序的可移植性更重要,sh ...
- shell介绍、命令历史、命令补全和别名、通配符、输入输出重定向
第5周第5次课(4月20日) 课程内容: 8.1 shell介绍8.2 命令历史8.3 命令补全和别名8.4 通配符8.5 输入输出重定向 8.1 shell介绍 使用yum+管道方式查看zsh和ks ...
- 从入门到入土：Lambda完整学习指南，包教包会！
什么是Lambda表达式 Lambda表达式是Java SE 8中一个重要的新特性.lambda表达式允许你通过表达式来代替功能接口.lambda表达式就和方法一样,它提供了一个正常的参数列表和一个使 ...
- ajax加载引起瀑布流布局堆叠
jQuery 瀑布流使用ajax加载数据库图片url ,ajax每次请求到的数据不变时,瀑布流效果没问题. 但当请求到的数据变化时,瀑布流图片格式会重叠 或者相隔很远等等的格式问题,这是由于图片加载是 ...
- 深入比特币原理（四）——锁定脚本(locking script)与解锁脚本(unlocking script)
通常比特币都是以虚拟货币的概念出现在大众眼前,实际上比特币是第一个真正的区块链"平台",利用它去中心化.不可篡改.可追溯等特点不光可以实现多种交易模式(如点对点交易.多重签名交易等 ...
- NetCore 3.0 中使用Swagger生成Api说明文档及升级报错原因
认识Swagger Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参 ...
- jQuery中的基本的选择器学习(补充版)
先看整体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- 移动开发在路上-- IOS移动开发系列 多线程一
类似于什么是进程什么是线程在这里我就不多浪费时间了(Google一下什么都有)! 废话不多说先上图,我相信大家都是喜欢看图的人,俗话说得好,求图求真相吗?虽然这里只有屌丝一个但是真相还是会有的... ...
- [TimLinux] JavaScript AJAX如何重定向页面
1. AJAX 异步JavaScript + XML,用于不通过页面from表单,来发送数据到后端服务器中 2. 如何重定向 服务器后端无法直接将页面重定向,因为服务器后端传回的任何数据,都将被XML ...
- Python获取 bing 地图发布自己的 TMS 服务（二）解决海量瓦片存取问题
金字塔结构的瓦片数量有多大 以目前互联网常用的WebMecator为例 第一层:4幅256*256影像瓦片(JPG或PNG等) 第二层:42 第三层:43 依次类推比如计算第1层至第18层的瓦片总数目 ...