5、vueJs基础知识05
vue2.0相比于1.0的变化
1、在每个组件模板中,不再支持片段代码,需要一个根元素包裹
组件中模板:
之前:
<template>
<h3>我是组件</h3><strong>我是加粗标签</strong>
</template>
现在: 必须有根元素,包裹住所有的模板代码
<template id="aaa">
<div>
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</div>
</template>
2、关于组件定义
a、Vue.extend 这种方式,在2.0里面有,但是有一些改动,这种写法,即使能用,咱也不用——废弃
b、Vue.component(组件名称,{ 在2.0继续能用
data(){}
methods:{}
template:
});
c、2.0推出一个组件,简洁定义方式(json形式):
var Home={
template:' ' -> 类似于之前的 Vue.extend()
};
3、生命周期
vue1.0:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
vue2.0:
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成,属性已经绑定
beforeMount 模板编译之前(挂载)
mounted 模板编译之后,插值完成,代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销毁后
4. 循环
2.0里面默认就可以添加重复数据,不用track by了
arr.forEach(function(item,index){
});
去掉了隐式一些变量,1.0可以不写index,但是2.0必须写上index,并且数据顺便换了
$index $key
之前:
v-for="(index,val) in array"
现在:需要显示的写上
v-for="(val,index) in array" 贴近原生的循环的参数顺序
v-for="(val,key) in object"
track-by="id"
变成
<li v-for="(val,index) in list" :key="index">
:key="index"只是为了提高循环性能
5、自定义键盘指令
之前:Vue.directive('on').keyCodes.f1=17;
现在: Vue.config.keyCodes.ctrl=17
6、过滤器
之前:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}(2.0中直接转成json展示了)
....
limitBy
filterBy
.....
一些简单功能,自己通过js实现
到了2.0, 内置过滤器,全部删除了
官方推荐:lodash 工具库(类似于underscore.js,处理数组和对象等的js库) _.debounce(fn,200)
网址https://www.lodashjs.com/
自定义过滤器——还有
但是,自定义过滤器传参改变了
之前: {{msg | toDou '12' '5'}} (空格隔开)
现在: {{msg | toDou('12','5')}} (类似于函数调用了)
7、组件通信
vm.$emit()
vm.$on();
父组件和子组件:
子组件想要拿到父组件数据:
通过 props配置项
之前1.0,子组件可以更改父组件信息,可以是同步 sync
子组件的属性后面加个.sync同步更改父组件的数据
<child-com :msg.sync="a"></child-com>
现在2.0,不允许直接给父级的数据,做赋值操作
问题,就想更改:
a). 父组件每次传一个对象给子组件, 对象之间引用(同一份数据) √
b). 只是不报错, mounted中转,定义子组件自己的变量,在mounted里面把父元素的数据赋值给子组件的变量 (只改子组件数据)
单一事件管理组件通信: vuex的前身
var Event=new Vue();(通过中转站来进行数据交换)
Event.$emit(事件名称, 数据)
Event.$on(事件名称,function(data){
//data
}.bind(this));
//准备一个空的实例对象
var Event=new Vue(); var A={
template:`
<div>
<span>我是A组件</span> -> {{a}}
<input type="button" value="把A数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('a-msg',this.a);
}
},
data(){
return {
a:'我是a数据'
}
}
};
var B={
template:`
<div>
<span>我是B组件</span> -> {{a}}
<input type="button" value="把B数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('b-msg',this.a);
}
},
data(){
return {
a:'我是b数据'
}
}
};
var C={
template:`
<div>
<h3>我是C组件</h3>
<span>接收过来的A的数据为: {{a}}</span>
<br>
<span>接收过来的B的数据为: {{b}}</span>
</div>
`,
data(){
return {
a:'',
b:''
}
},
mounted(){
//var _this=this;
//接收A组件的数据
Event.$on('a-msg',function(a){
this.a=a;
}.bind(this)); //接收B组件的数据
Event.$on('b-msg',function(a){
this.b=a;
}.bind(this));
}
};
5、vueJs基础知识05的更多相关文章
- vue面试题整理vuejs基础知识整理
初级参考 1.v-show 与 v-if 区别 v-show 是css隐藏,v-if是直接销毁和创建,所以频繁切换的适合用v-show 2.计算属性和 watch 的区别 计算属性是自动监听依赖值的变 ...
- 6、vueJs基础知识06
vue动画 transition 之前1.0版本是以 属性的形式展示的 <p transition="fade"></p> .fade-transition ...
- 1、vueJs基础知识01
vue是框架,vue.js是vue框架的核心js库 库:是一个封装好的特定的方法的集合,提供给开发者使用,库没有控制权,控制权在使用者手中.代表:jQuery.underscore.util 框架:框 ...
- 基础知识(05) -- Java中的类
Java中的类 1.类的概念 2.类中的封装 3.对象的三大特征 4.对象状态 5.类与类之间的关系 ------------------------------------------------- ...
- Android基础知识05—活动的生命周期
------ 活动的生命周期 ------ Android是使用任务Task来管理活动的,一个任务就是一组存放在栈里的活动的集合.每当启动一个活动 ,他就会在返回栈中入栈,并处于栈顶位置.而每当我们按 ...
- 7、vueJs基础知识07
UI组件库 element-ui和mint-ui 其实都是借鉴了bootstrap bootstrap: 由twitter 开源 简洁.大方 官网文档https://www.bootcss.com/ ...
- 4、vueJs基础知识04
简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件(组件),官方推荐命名法(首字母大写) |-components 组件存放的文件夹 | ...
- 3、vueJs基础知识03
vue过渡(动画) 本质走的css3: transtion ,animation <div id="div1" v-show="bSign" transi ...
- 2、vueJs基础知识02
vue生命周期: 钩子函数: created -> 实例已经创建 √ beforeCompile -> 编译之前 compiled -> 编译之后 ready -> 插入到文档 ...
随机推荐
- console.log()、console.info()、console.debug()的区别
onsole.log().console.info().console.debug()的作用都是在浏览器控制台打印信息的. 使用最多的是console.log().console.info()和con ...
- python day5 lambda,内置函数,文件操作,冒泡排序以及装饰器
目录 python day 5 1. 匿名函数lambda 2. python的内置函数 3. python文件操作 4. 递归函数 5. 冒泡排序 6. 装饰器 python day 5 2019/ ...
- 02- web-mini框架添加路由、MySQL(二)
本篇在上篇的基础上为其增设路由功能,同时将上篇中的数据库中数据备份添加进去. 一.装饰器 在之前有介绍过为一个函数不改变源代码不改变原函数的调用方式下为其增设附加功能,需要用到装饰器,而在该上篇的we ...
- TFTP启动内核、设备树,NFS启动FS
一.软硬件平台 1.开发板:创龙AM3359核心板,网口采用RMII形式. 2.UBOOT版本:U-Boot-2016.05,采用FDT和DM. 3.交换芯片MARVELL的88E6321. 二.问题 ...
- python之编码与解码、is 与==的区别
一.编码与解码 编码的过程其实就是采用一定的编码格式将unicode字符转换成str字符的过程 非ASCII码字符按字节为单位被编码成十六进制转义字符 解码采用的编码格式跟设置和环境有关 ascii ...
- kubernetes 基本概念和资源对象汇总
kubernetes 基本概念和知识点脑图 基本概念 kubernetes 中的绝大部分概念都抽象成kubernets管理的资源对象,主要有以下类别: Master : Master节点是kubern ...
- Linux/Windows下安装SonarCube
1. 下载合适的版本,尽量不要下载最新的版本,最新的版本要求Java 11+,如果没有安装最新版的Java的话,尽量用 SonarQube 7.0 以下的版本,SonarQube 7.0是可以用jdk ...
- Linux 永久改变系统时间
Centos系统,必须同时修改系统时间和硬件时间,才可以保证修改有效,单纯的使用date命令修改系统时间,是立即生效,重启后系统还原.具体操作如下: 1.date {查看目前本地的时间}2.hwclo ...
- CTSC2010 珠宝商
珠宝商 题目描述 Louis.PS 是一名精明的珠宝商,他出售的项链构造独特,很大程度上是因为他的制作方法与众不同.每次 Louis.PS 到达某个国家后,他会选择一条路径去遍历该国的城市.在到达一个 ...
- 评估预测函数(3)---Model selection(选择多项式的次数) and Train/validation/test sets
假设我们现在想要知道what degree of polynomial to fit to a data set 或者 应该选择什么features 或者 如何选择regularization par ...