vue随笔录

vue随笔录

1. 理解组件的概念：指的是html css js img等的一个聚合体，可以直接应用于项目

2. vue组件的创建 a1：全局注册

     Vue.component('组件名',{template:`html标签`})
   

   ​ 使用时直接在vue实例中使用标签

   ​ a2 :全局注册使用template标签

   Vue.component('组件名',{template:'#id'})
      在HTML中
      <main>
         <组件名></组件名>
      </main>
      <template>
          html代码块
      </template>
   

   注意：template标签只有在最外层才能被解析出来

3. 组件命名注意事项 如果是如 Hello 标签 HelloWorld 标签 wht-yi 标签

4. 组件的data选项 是一个函数

    Vue.component('组件名',{template:'#app',data(){return {name:'lisi'}})
   

   注意组件第数据是一个函数是为了让数据具有独立的作用域 返回的对象是为了数据劫持和监听 get set

5. is属性 作用就是将一个绑定的容器解析为一个组件的模版

   <tr :is = 'map'></tr>   /* map指的是定义的组件*/
   

6. 父子组件的通信 组件的嵌套指的是标签的插入

   <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的值