day62
一.组件
- 组件都具有模板,template
- new Vue()创建的是根组件
- 组件与实例一一对应,创建一个实例就是创建了一个组件,同理创建一个组件就相当于创建了一个实例
- 根组件的挂载点一般就是根组件的模板,根组件也可以显式书写自己的模板,会替换掉挂载点
- 子组件都具有自身模板,根组件是所有子组件的父级(一级父级....n级父级)
二.局部组件
<div id="app">
<!-- 连接语法 -->
<local-tag></local-tag>
</div>
<script>
// 定义局部组件
var localTag = {
template: "<button @click='btnClick'>{{ num }}</button>",
data () {
return {
num: 0
}
},
methods: {
btnClick () {
this.num++;
}
}
}
// 根组件
new Vue({
el: "#app",
// 子组件要在父组件中使用,需要注册
components: {
// 小驼峰 "localTag": localTag
localTag
}
})
</script>
三.全局组件
<div id="app">
<global-tag></global-tag>
</div>
<script>
// 定义全局组件
Vue.component("global-tag",{
template: "<button @click='btn'>{{ n }}</button>",
data () {
return {
n: 0
}
},
methods: {
btn () {
this.n++
}
}
})
// 根组件
new Vue({
el: "#app",
})
</script>
四.数据传递~父传子
<div id="app">
<local-tag :num="num" :sup_data="sup_data"></local-tag>
</div>
<script type="text/javascript">
var localTag = {
props: ['num', 'sup_data'],
template: "<div @click='divActive'>{{ num }}</div>",
methods: {
divActive () {
console.log(this.num);
console.log(this.sup_data);
}
}
}
new Vue({
el: "#app",
components: {
localTag
},
data: {
num: 10,
sup_data: [1, 2, 3, 4, 5]
}
})
</script>
// 1.数据由父级提供
// 2.在父级模板(挂载点)中出现的子组件名(local-tag)上,为其设置全局属性,属性值就是父级提供的数据变量
// 3.在子组件中,提供$props来拿到自身的全局属性名(用''括起来的数组)
// 4.在模板中直接用属性名来访问数据,在方法中通过this.属性名来访问数据
// 5.名字出现多个单词的时候,使用_连接语法进行处理,以达到命名的统一
五.数据传递~子传父
<div id="app">
<global-tag @send_data="receive_data"></global-tag>
{{ n }}
</div>
<script type="text/javascript">
Vue.component("global-tag", {
template: "<div @click='divAction'>我是div</div>",
data () {
return {
num: 10,
arrList: [1, 2, 3, 4, 5]
}
},
methods: {
divAction () {
this.$emit("send_data", this.num, this.arrList)
}
}
});
new Vue({
el: "#app",
data: {
n: 0
},
methods: {
receive_data (num, arrList) {
console.log("接收到的数据:", num, arrList);
this.n = num;
}
}
})
</script>
// 1.数据由子级提供
// 2.在子级中通过某个事件对外(this.$emit("事件名", ...args))发送一个事件
// 3.在父级的模板中,子组件名上,为发送的事件绑定一个回调方法,该回调方法由父级来完成实现体
// 4.在实现体中就可以拿到回调参数
day62的更多相关文章
- day6-2面向对象
概述: 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 注:Java和C#来 ...
- js关于propotype的一些事-------Day62
近期在忙着搬家,忙忙活活的收拾这收拾那,原以为自己东西了了,谁知道东西是越收拾越多,各种崩溃啊..... 昨日在记录js动态生成表格的经典方式时,用到了createDocumentFragment() ...
- day62 中间件
一.中间件的介绍 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级, 并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用, 用不好 ...
- python 全栈开发,Day62(外键的变种(三种关系),数据的增删改,单表查询,多表查询)
一.外键的变种(三种关系) 本节重点: 如何找出两张表之间的关系 表的三种关系 一.介绍 因为有foreign key的约束,使得两张表形成了三种了关系: 多对一 多对多 一对一 二.重点理解如果找出 ...
- day62 作业
熟练使用无名有名分组 urls.py url(r'^edit/(\d+)/',views.edit_user,name='edit'), views.py def edit_user(request, ...
- day62 django入门(3)
目录 一.无名有名分组的反向解析 1 无名分组的反向解析 2 有名分组的反向解析 二.路由分发 三.名称空间(了解) 四.伪静态(了解) 五.虚拟环境(了解) 六.django版本区别 1 url的区 ...
- day62 Pyhton 框架Django 05
内容回顾 1.变量 render(request,'模板文件名',{ k1:v1 }) {{ k1 }} {{ list.0 }} {{ dict.key }} {{ dict.keys }} {{ ...
- 初识Djiango
老师的博客:点我 内容主要是看老师的博客 下面是自己的写的某些自己当时不太懂的. 关于Django的版本的问题 Django官网下载页面 在官网上显示lts的是表示支持长期版本.所以最好下载1.11版 ...
- python之django基础
看了不是同一期的视频,发现9期老师线性引入的方式,讲得django更加易于理解掌握. 抱歉的是,笔记没有整理就发上来了.希望看到的人不要被我带偏. 1. 新建Django项目 命令行创建: djang ...
随机推荐
- JavaScript字符串和字符数组
字符串 字符串与字符数组: 字符串:var a = 'ddd'; 字符数组:var arr = 'f','o','o' 相同点: 1.都是类数组 2.都有length属性 3.都有indexOf()和 ...
- Node操作MongoDB并与express结合实现图书管理系统
Node操作MongoDB数据库 原文链接:http://www.xingxin.me/ Web应用离不开数据库的操作,我们将陆续了解Node操作MongoDB与MySQL这是两个具有代表性的数据库, ...
- js-ES6学习笔记-Class(4)
1.Object.getPrototypeOf方法可以用来从子类上获取父类.因此,可以使用这个方法判断,一个类是否继承了另一个类. 2.super这个关键字,既可以当作函数使用,也可以当作对象使用.在 ...
- 前端了解即可:postman(接口测试)的使用
postman的使用,前端了解即可.因为都是一些工具的应用,截图比较多,之前在有道云笔记上总结记录过,在这不在写了,展示一张笔记截图. 此文仅做参考一下,有不足之处,欢迎指正:
- Android Monkey的使用
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/71750907 本文出自[赵彦军的博客] 什么是 Monkey Monkey 是一个 ...
- WebSocket实现web即时通信(后端nodejs实现)
WebSocket实现web即时通信 一.首先看一下,HTTP.ajax轮询.long poll和WebSocket的区别: 1.HTTP 协议(短连接):一个 Request 一个 Response ...
- 【Python】读取excel数据
'''python3读取excle数据''' import xlrd workbook = xlrd.open_workbook(r'test.xls', encoding_override='gbk ...
- 【转】qt-vs-addin:Qt4和Qt5之VS插件如何共存与使用
原则上,两者是不可以同时存在的,但是如果都安装了,该如何分别使用他们呢? Qt4 Visual Studio Add-in:官网可以下载安装程序,qt-vs-addin-1.1.11-opensour ...
- 如何扩展 Azure 资源组中虚拟机的 OS 驱动器
概述 在资源组中通过从 Azure 应用商店部署映像来创建新的虚拟机 (VM) 时,默认的 OS 驱动器空间为 127 GB. 尽管可以将数据磁盘添加到 VM(数量取决于所选择的 SKU),并且我们建 ...
- w3school 基础学习
http://www.w3school.com.cn/ http://www.w3school.com.cn/sql/sql_quickref.asp