vue
vue字符串模板和HTML模板
HTML模板
1 | // 定义 |
1 | // 使用 |
html模板概念
通过template:定义的组件。
写法:
要求不能使用驼峰命名,必须使用中划线命名;
原因:
HTML不区分大小写,使用HTML模板的组件会在浏览器初始加载的时候就被渲染,所以需要遵守HTML规则,否则将渲染失败,而Vue需要等到初次渲染完毕后才能拿到DOM,进行DOM的模板插入。
vue中data为函数的原因
因为正常情况下data需要的是一个对象,但是对象是引用类型的,如果有超过一个组件实例,那么改变一个的数据就会引发连锁效应,所以这里vue很聪明的把data定义为一个函数,利用这个函数返回新的对象,每个对象就是独立的。
vue、react方法写法
由于es6的箭头函数在定义的时候就已经决定了this指向,在组件内定义方法的时候this是指向window的,所以需要使用es5进行方法定义,这样就可以在使用的时候动态指向this。react中的话可以可以在constructor中绑定this。
vue中组件中所有方法中的this都被绑定到他自身的实例了。。
vue中两种组件注册方式
全局注册
为什么vue中注册全局组件要放在实例化之前
简单来理解:vue你可以理解为一个对象模板,使用vue就需要new进行实例化,当你已经实例化了,再去改变模板有何意义?自然出不来
深层原理:vue本质上就是使用Vue构造函数实例化一个对象,对象内部会去处理所有的模板以及数据,在实例化完毕之后再去改变构造函数,还想让之前实例化的对象中拥有新添加的东西那肯定是不行的。1
2
3
4
5
6
7
8
9
10ex:
function Person(name) {
this.name=name
}
Person.prototype.isMan='no'
person = new Person('Jack')
// Person {name: "Jack"}
// 实例化之后再去修改原型就对之前的person实例无效了。。
Person.prototype.getName = function () {console.log(this.name)}
vue中is
就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签,这时候就要用is代替一下,让html语法符合规则验证。is属于指定要在内部使用的标签。
vue中v-model原理,input事件
vue自定义事件
铺垫—组件通信
父子组件自定义事件:父组件通过v-on绑定事件a,子组件中通过this.$emit(name[,args])
触发。
非父子组件通过定义一个中央事件总线eventBus,在组件A中通过eventBus.$on(name,callback)
绑定,在组件B中通过eventBus.$emit(name[,args])
触发
1 | var bus = new Vue() |
一、不传参
直接通过this.$emit
或者eventBus.$emit
触发
二、传参
监听自定义事件的时候已经传入参数
1 | // 父组件 监听自定义事件的时候已经传入了id这个字段 |
1 | // 子组件 |
这里父组件要能接收到子组件传入的其他参数有这么几种办法:
- 第一种方式只适合触发事件时候传入一个参数的情况:
@showInfo="showInfo(item.id,$event)">
,父组件中添加$event参数,这样父组件事件触发时候第二个参数就能接收到子组件触发传来的数据。
$event
在dom原生事件中传入$event时候会被赋值为原生事件对象。
在自定义事件中传入$event时候会被赋予触发时传入的第一个参数值
通过arguments来获取其他数据,在父组件中
@showInfo="showInfo(item.id,arguments)">
不在监听的时候传入数据,统一数据传入都写在方法中
1
2
3
4
5
6
7//父组件
<rowView @showInfo="showInfo"></rowView>
showInfo(arg) {
// 将id的处理写在方法内部
this.id = this.item.id
this.aaa = arg
}
1 | // 子组件 |
Todo:根据arguments看一下vue的监听触发源码