vue随笔录
-
理解组件的概念:指的是html css js img等的一个聚合体,可以直接应用于项目
-
vue组件的创建 a1:全局注册
Vue.component('组件名',{template:`html标签`})
使用时直接在vue实例中使用标签
a2 :全局注册使用template标签
Vue.component('组件名',{template:'#id'}) 在HTML中 <main> <组件名></组件名> </main> <template> html代码块 </template>
注意:template标签只有在最外层才能被解析出来
-
组件命名注意事项 如果是如 Hello 标签 HelloWorld 标签 wht-yi 标签
-
组件的data选项 是一个函数
Vue.component('组件名',{template:'#app',data(){return {name:'lisi'}})
注意组件第数据是一个函数是为了让数据具有独立的作用域 返回的对象是为了数据劫持和监听 get set
-
is属性 作用就是将一个绑定的容器解析为一个组件的模版
<tr :is = 'map'></tr> /* map指的是定义的组件*/
-
父子组件的通信 组件的嵌套指的是标签的插入
<template id="father"> <div> father <Son></Son> </div> </template>
用 props进行父向子数据的传输
Vue.component('Father',{ template: '#father', data () { return { money: 2000 } } }) Vue.component('Son',{ template: '#son', props: ['money'] }) new Vue({ el: '#app' })
注意在props中还可以做更深次的定义规则
Vue.component('Father',{ template: '#father', data () { return { money: 2000 } } }) Vue.component('Son',{ data () { return { remain: 10 } }, template: '#son', props: { // 属性: 属性类型 // 'money': Number, //属性验证 'money': { validator ( val ) { // validator作用就是可以详细书写验证规则 return val > 3000 } } } }) new Vue({ el: '#app' })
validator 用来书写验证规则的函数 里面val值代表money的值