Vue之组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// Vue 中的组件分为局部组件和全局组件，局部组件的使用步骤：声明、挂载、使用
// 全局组件用法如下:第一个参数是组件名，第二个参数是options
Vue.component('Btn', {
template: `<button>我是全局组件按钮</button>`
})
// 声明局部组件，组件名应大写
var App = {
template:`<div>我是局部组件App<Btn /></div>`,
data(){ // ES6匿名函数写法
return {} // 组件的data需要返回一个函数
}
};
new Vue({
el: '#app',
// 使用局部组件
template: `
<App />
`,
data:function(){
return {}
},
// 挂载局部组件
components: {
App
}
});
</script>
</body>
</html>
Vue之组件的使用的更多相关文章
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- 如何抽象一个 Vue 公共组件
之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- 为什么VUE注册组件命名时不能用大写的？
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...
- vue的组件化运用（数据在两个组件互传，小问题总结）
一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...
随机推荐
- 02_通过scrollview实现内容滚动
在ScrollView里面放一个Button和TextView程序直接就挂了. ScrollView它只限制了有几个孩子,没限制有几个孙子.给Button和TextView套上一个爹LinearLay ...
- File System Programming --- (一)
About Files and Directories The file system is an important part of any operating system. After all, ...
- 51nod 1051 最大子矩阵和(DP)
题意 略 分析 一道经典的DP题,但是我弱到差点做不出来,真的垃圾 设置\(sum(i,j)代表1-i行第j列的前缀和\),然后枚举行i和行j,再枚举列k,做一遍类似一维的最大子段和即可 #inclu ...
- BestCoder Round #73 (div.2)1002/hdoj5631
题意: 给出一张 nnn 个点 n+1n+1n+1 条边的无向图,你可以选择一些边(至少一条)删除. 分析: 一张n个点图,至少n-1条边才能保证联通 所以可以知道每次可以删去1条边或者两条边 一开始 ...
- python __builtins__ set类 （60）
60.'set', 转换为集合类型 class set(object) | set() -> new empty set object | set(iterable) -> new se ...
- python __builtins__ bytes类 （8）
8.'bytes', 字符串转换成字节流.第一个传入参数是要转换的字符串,第二个参数按什么编码转换为字节. class bytes(object) | bytes(iterable_of_ints) ...
- poj 1182 食物链【带权并查集】
设相等的边权为0,吃的边权为,被吃的边权为2,然后用带权并查集在%3的意义下做加法即可 关系为简单环的基本都可以用模环长的方式是用带权并查集 #include<iostream> #inc ...
- bzoj 1176 [Balkan2007]Mokia 【CDQ分治】
W过大,很难在线维护,考虑离线算法 给每个操作加一个时间属性n,显然,对于n=i的询问,对它有影响的修改只在n<i中,所以可以CDQ(因为是按时间序读进来的,所以不用排序了 对于统计矩形和,可以 ...
- IT兄弟连 JavaWeb教程 HTTP协议
超文本传输协议(HTTP,Hypertext Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的Web文件都必须遵守这个标准.设计HTTP最初的目的是为了提供一种发布和接 ...
- windows虚拟机下 安装docker 踩过的坑
首先,你的是win7.8还是win10 windows对docker兼容也是最近的事,所以win7.8的话,安装docker是要用工具箱的,不过官方给了下载. 国内话的可以通过,阿里镜像,或者清华镜像 ...