输入
技术胖视频1-4季
总记不太住的
模板的使用，template
component 的注册、传值、父子组件
methods中的 $event
nextTick 使用是在 哪一步前，哪一步后？
内置组件slot的使用
输出
代码
代码收录在GitHub, 2 34文件夹下面，本文代码
笔记
template 使用三种写法哪三种写法？1.直接在实例里面写的
var app = new Vue({
el: ‘#app’,
data: {
cents: 20000
},
template: ‘<div>{{ cents }}</div>’
})
2.使用id绑定template 完了在data中定义的，最常用
注意，如果有template，只渲染template里面的东西
template里面必须要有 div p 这些html外层标签，渲染的时候，会去掉 template, 如果 <template> 文字</template>，要是html代码段 <template><div>balabala</div></template
<div id=”app”>
<template id=”test”>
<div>
{{ cents }}
</div>
</template>
</div>
<script>
var app = new Vue({
el: ‘#app’,
data: {
cents: 20000
},
template: ‘#test’
})
</script>
3.在script中写的，不常用，不管它
component使用复习注册，全局注册、局部注册
注意：
全局注册，不需要在 vue 实例中components 中声明
局部注册需要, components: {a: a}
//全局注册
Vue.component(‘bus’, {
template: `<div>这是汽车组件</div>`
})
var app = new Vue({
el: ‘#app’,
data: {
cents: 20000
}
})
// 局部注册
var bus = {
template: `<div> 这是局部组件测试</div>`
}
var app = new Vue({
el: ‘#app’,
data: {
cents: 20000
},
components: {
bus: bus
}
})
如何向组件传值, props的使用
var bus = {
template: `<div> 这是组件传值测试 {{ objp.name }} 今年 {{ objp.age }}</div>
`,
props: [‘objp’]
}
var app = new Vue({
el: ‘#app’,
data: {
obj: {
name: ‘迟不子’,
age: 18
}
},
components: {
bus: bus
}
})
父子组件, 首先， 如何在实例中使用单个组件， 使用全局或者局部注册法如何在组件使用组件？template: ‘#id’意思，模板是找 id的template
// 全局注册孩子组件
// 或者使用变量定义， 用 component 引入
Vue.component(‘child’,{
template:`<div> 我还是个宝宝</div>`
})
//或者局部注册
var parent = {
template: `
<div>
<p>
这是组件传值测试 {{ objp.name }} 今年 {{ objp.age }}
</p>
<child></child>
</div>
`,
props: [‘objp’],
components: {
child: {
template: `<div> 我还是个宝宝</div>`
}
}
}
$event 和调用顺序有关系吗？
没有
是鼠标事件属性
target 是实际点击元素， <span>
currentTarget 是绑定click 事件的元素 sapn外面的div
“`
<div id=”app”>
<div @click=”handle(33, $event)”>
<span>点击一</span>
</div>
<div @click=”handle2( $event, 44)”>点击二</div>
</div>
“`
4.nextTick 和 created mounted updated 顺序？ 还没弄清楚，待续
在执行， vm.person = “lisi” 后
只执行了 updated
没有执行 nextTick？
“`
var vm = new Vue({
el: ‘#app’,
data: {
person: ‘zhangsan’
},
created: function(){
console.log(“created”, this.person);
},
mounted: function(){
console.log(“mounted”, this.person);
},
updated: function(){
console.log(“updated”, this.person);
}
})
// vm.age = “29”;
vm.$nextTick(function(){
console.log(‘执行nextTick’, this.person);
})
“`
5.slot 的使用
参考博客：https://www.w3cplus.com/vue/v…
几种情况：
1，如果父组件未向模板中分发内容（插入内容），则显示插槽中默认内容（前提是slot中设置了默认内容）
意思是组件里为空， 比如 <alert></alert>
template （组件）渲染成html， 是渲染template 中默认内容
2,父组件给模板分发了内容，则分发的内容会替换slot标签
意思是, 组件里面中有东西, 会替换 slot 标签中的内容，而模板中，不是slot的部分，不会被替换，还在
<alert>
<div>组件插入内容</div>
</alert>
3, 除此之外，假设模板中未设置插槽，父组件依旧向其分发了内容，但最终任何分发的内容都不会显示。
意思是，模板中没插槽，template 没slot, 父组件中仍然有 东西
组件向模板发的东西不会显示
按照插的不同有几种
1, slot 只有一处，只能往这一处插，不能往别地方插，不用名字
2, 命名插槽，slot 有多处，我们通过slot的name来区分不同的 插槽内容，然后往里面插东西
3, 作用域插槽，不管暂时用不到
这篇文章主要学习和了解了Vue中的插槽<slot>。
是一个空壳子，它显示与否以及怎么显示完全是由父组件来控制。不过，插槽显示的位置由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块
“`
<div id=”app”>
<alert>
<div slot=”header”>自定义头部内容</div>
<div slot=”middle”>自定义中部内容</div>
</alert>
</div>
<template id=”alert”>
<div>
<p>我是测试用的alert模板内容</p>
<slot name=”header”>模板头部内容</slot>
<slot name=”middle”>模板中部内容</slot>
</div>
</template>
<script type=”text/javascript”>
Vue.component(‘alert’, {
template: ‘#alert’,
})
var app = new Vue({
el: ‘#app’,
data: {
},
methods: {
handle: function(num, e) {
console.log(num, e);
console.log(e.target);
console.log(e.currentTarget);
},
handle2: function(e, num) {
console.log(e, num);
}
}
})
</script>
“`
发表回复