vue 之组件
组件
'''
1.根组件:new Vue()创建的组件,一般不明确自身的模板,模板就采用挂载点
2.局部组件: local_component = {}
2.全局组件: Vue.component({})
'''
'''
1.一个组件就是一个vue实例
2.组件具有自身的template
3.组件的模板只能有一个根标签
4.子组件的data具有作用域,以达到组件的复用,每个组件的数据独有
'''
变量什么的关键字
'''
没有关键字:全局作用域
var:没有块级,有局部作用域
let:有块级,有局部作用域
const:有块级,有局部作用域,是常量
'''
局部组件
第三步
<div id="app">
<!--html代码不区分大小写,该名字使用子组件是不合法的命名-->
<!--<localTag></localTag>-->
<!--<local></local>-->
<!--组件的复用-->
<local-tag></local-tag>
<local-tag></local-tag>
</div>
<script>
第一步
var localTag = {
template: '<div class="local" style="color: orange" @click="btnAction">{{ name }}组件</div>',
// 子组件的数据与方法由子组件自身提供
data: function () {
return {
name: '局部'
}
},
methods: {
btnAction: function () {
alert('你丫点我了')
}
}
};
第二步
new Vue({
el: "#app",
components: {
// local: localTag
// 'local-tag':localTag
// localTag: localTag,
// 1.js的驼峰命名(localTag)对应的是html的连接命名(local-tag)
// 2.key与value的变量名一致,可以简写
localTag
}
});
</script>
全局组件
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
</div>
<script>
Vue.component('global-tag', {
template: '<div @click="btnClick">{{ name }}组件被点了{{ n }}下</div>',
// 组件被复用一次,就会产生一个新的局部作用域,使用一套数据
data: function(){
return {
n: 0,
name: "全局"
}
},
methods: {
btnClick: function () {
this.n += 1
}
}
});
new Vue({
el: "#app"
})
</script>
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 ...
随机推荐
- manacher 和 扩展KMP
manacher 和 扩展KMP 事实上,这两个东西是一样的. 考虑 manacher 的过程 我们实时维护最远扩展的位置 \(mx\) 以及这个回文串的回文中心 \(l\) ,那么显然当然位置如果没 ...
- [CSP-S模拟测试]:Revive(点分治)
题目背景 $Sparkling\ ashes\ drift\ along\ your\ flames \\ And\ softly\ merge\ into\ the\ sky$ 题目传送门(内部题1 ...
- 全国5A级旅游景区已达250家
至目前,全国5A级旅游景区已达250家,快来数数你去过多少? 全国5A级旅游景区 西藏(+) 拉萨市大昭寺.拉萨布达拉宫景区.日喀则扎什伦布寺景区.林芝巴松措景区 新增1:日喀则扎什伦布寺景区 扎什伦 ...
- 七. jenkins部署springboot项目(4)-linux环境--远程调试
前提:linux环境,jenkins服务器和springboot服务器不在一台机器. linux环境,jenkins这里就不说了,主要说下和windows环境的不同. 1. jenkins服务器连接s ...
- 在阿里云 Ubuntu上通过nginx+uwsgi服务器部署Django出现的502错误
https://blog.csdn.net/luojie140/article/details/76919471 https://blog.csdn.net/sinat_21302587/articl ...
- 非常全的Linux基础知识点
Linux是每个后端程序员必须要掌握的系统,今天小编就给你分享一篇Linux基础知识点大全,看看你知道多少? 一. 从认识操作系统开始 1.1 操作系统简介 我通过以下四点介绍什么操作系统: 操作系统 ...
- VUE mixins(混入)
mixins是在引入组件之后 将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并 相当于在引入后 父组件的各种属性方法都被扩充了. 单纯组件引用: 父组件 ...
- php Connection timed out after 30000 milliseconds
function HttpRequest($url, $params, $method = 'GET', $header = array(), $bEncode = true){ $opts = ar ...
- 配置访问公网主机上的jupyter notebook
文章结构: 一.安装python 二.安装并配置jupyter并配置jupyter 三.第一个python程序 一.安装python 1.1下载python安装包 # wget https://www ...
- mybatis默认的数据源连接池(PooledDataSource和UnPooledDataSource)
一般情况下我们操作数据库都是通过connection,但是频繁创建和删除connection会严重影响效率,因此在这种情况下我们一般会用到连接池,因为项目中用到的是mybatis,所以了解一下myba ...