vue 组件化

创建组件

    <div id="app">
       //使用组件
        <my-cpnc></my-cpnc>
    </div>
    
   
  <script src="../js/vue.min.js"></script>
  <script>
//  1.创建组件构造器对象
        const cpnc = Vue.extend({
            //template 模板
            template: ` 
            <div>
                <h2>我是标题</h2>
                <p>我是文字</p>
                <p>我是老王</p>
            </div>`
        })
        // 2,注册组件
      //  Vue.component('组件标签名',cpnc)
      Vue.component('my-cpnc',cpnc);
      const app = new Vue({
    el:'#app',//挂载
    data:{//定义变量
        age:'ni hao a '
       },
  
})
  </script>
  

父子组件化

    <div id="app">
          //使用组件
     <cpn2></cpn2>
     <cpn1></cpn1>
    </div>
    
   
  <script src="../js/vue.min.js"></script>
  <script>
//  1.创建第一个组件
        const cpnC1 = Vue.extend({
            //template 模板
            template: ` 
            <div>
                <h2>我是标题</h2>
                <p>我是文字</p>
                <p>我是老王</p>
                <cpn2></cpn2>
            </div>`,
        })
       // 2.创建第二个组件
        const cpnC2 = Vue.extend({
            //template 模板
            template: ` 
            <div>
                <h2>我是标题2</h2>
                <p>我是文字</p>
                <p>我是老王</p>
                <cpn1></cpn1>
            </div>`,
            components:{
//注册子组件
//cpn1组件使用标签  cpnC1组件模板
               cpn1:cpnC1
               }
        })
   
      const app = new Vue({
    el:'#app',//挂载
    data:{//定义变量
        age:'ni hao a '
       
    },
// 注册父组件
    components:{
        cpn2:cpnC2
    }
  
})
  </script>
  

子组件传递给父组件

传给父组件$meit发事件,事件要自定义

   <!-- 父组件模板 -->
    <div id="app">
     
     
     <cpn @itemclick="cpnClick"></cpn>
    </div>

    <!-- 子组件模板 -->
    <template id="cpn">

        <div>
           <button v-for="itme in categories" @click="btnClick(itme)">{{itme.name}}</button>
        </div>
    </template>
   
  <script src="../js/vue.min.js"></script>
  <script>
//  1.子组件
    const cpn ={//子组件在父组件中声明
        template:'#cpn',
        data(){
            return{
                categories:[
                    {id:'12',name:'热门推荐'},
                    {id:'13',name:'手机'},
                    {id:'14',name:'电脑'},
                    {id:'15',name:'文具'}
                    
                    ]
            }
        },
        methods:{
            btnClick(itme){
                //传给父组件$meit发事件,事件要自定义
                this.$emit('itemclick',itme)
                console.log(itme)
            }
        }
    }
const app = new Vue({
    el:'#app',//挂载
    data:{//定义变量
        age:'ni hao a '
       
    },
    components:{//父组件声明
        cpn
    },
    methods:{
        cpnClick(itme){
            console.log(itme)
        }
    }
})
  </script>
  

父组件传给子组件

在父传子的过程中用props方法传递,里面是有个封闭的作用域,变量,方法等都可以穿,只要在使用组件的时候绑定自定义属性,自定义属性属性值为父元素的数据,在模块中实现就能实现父传子了

    <div id="app">

        //在v-bind中不支持驼峰写法 需要 c-info 在定义的时候可以驼峰命名
        <cpnc v-bind:c-info="movies" :cmessage="message"></cpnc>
    </div>
    <template id="cpn">
        <div>
            //在有好多标签的时候必须包裹起来
            <p>{{c-info }}</p>
            <h2>{{cmessage}}</h2>
        </div>

    </template>

    <script src="../js/vue.min.js"></script>
    <script>

        //父穿子
       const cpnc = {
            template: "#cpn",
            props: { //要的传数据
                cInfo: {
                    type: object,
                    default() {
                        return {}
                    },
                    data() {//要传的数据
                        return {}
                    },
                    methods: {//要传发方法
                    }
                }
            }
        }
           
 const app = new Vue({
    el:'#app',//挂载
    data:{//定义变量
        movies:[1,2,3,4,5],
        message:{
            aaaa:'cc',
            dd:'ddd'
        }
       
    },
    components:{//父组件声明
        cpn
    },
    methods:{
        cpnClick(itme){
            console.log(it)
        }
    }
})
    </script>

v-model修饰符

1. lazy v-model.lazy//失去焦点或者回车的时候更新
2. number v-model.number//转化为数字类型
3. trim v-model.trim//去除空格