0810 vue 创建组件 模板 动态组件 传值

  lesson10
 
1.demo    vue样本
<body>
<div id="myApp">
 
</div>
</body>
<script>
   new Vue({
       el:"#myApp",
       data:{},
       methods:{},
       computed:{},
       filters:{}
   })
</script>
 
2.案例: 模拟百度搜索框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        p{
            border:1px solid green;
        }
        p.active{
            background:gray;
        }
    </style>
    <script src="lib/vue.js"></script>
    <!--1、依赖于你的vue.js
        2、当你引入resource时,它会在你的Vue.prototype.$http=-->
    <script src="lib/vue-resource.js"></script>
</head>
<body>
<div id="myApp">
    <!--<input type="text" @keyup.65="search">-->
    <!--<input type="text" @keyup.a="search">-->
    <!--<input type="text" @keyup.left="search">-->
    <form action="https://www.baidu.com/s" target="_blank">
        <input type="text" autocomplete="off" v-model="pwd"  name="wd" @keyup="search">
    </form>
    <p v-for="(item,i) in g"   :class="{active:index===i}">{{item.q}}</p>
</div>
</body>
<script>
    // Vue.prototype.$zhang = {
    //     run(){
    //         console.log(12);
    //     }
    // }
    new Vue({
        el:"#myApp",
        data:{
            pwd:"",
            g:[],
            index:-1,
            q:""// q 代表的是搜索的值
        },
        methods:{
            search(e){
                // 第一个参数是地址,第二个参数是你传递的内容,第三个是cb
                //  https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=%E6%97%A0%E9%87%8F&cb=fn
                if(e.keyCode === 40){
                    this.index++;
                    if(this.index> this.g.length-1){
                        this.index=-1;
                        this.pwd = this.q;// 搜索的数据
                    }else{
                        this.pwd = this.g[this.index].q;
                    }
                }else{
                     this.$http.jsonp("https://www.baidu.com/sugrec",{
                        from:"pc_web",
                        prod:"pc",
                        wd:this.pwd
                    },{
                        jsonp:"cb"
                    }).then(({data})=>{
                        console.log(data);
                        this.g = data.g;
                        this.q = data.q;
                    })
                }
                //  https://www.baidu.com/sugrec?from=pc_web&pwd=&cb=
                // console.log(e.keyCode)
                // this.$zhang.run();
            }
        },
        computed:{},
        filters:{}
    })
</script>
</html>
 
 
3.模板     template
   
   1、template 有且只能有一个根元素。
   2、将你要挂载的元素进行替换操作。
   3、模板当中可以使用指令,data,methods等等都可以使用
   // 注意:
          当你实现化VUE实例时,他会看是否有模板,如果有会将你挂载的元素替换。如果没有就使用你挂载的元素作为模板。
 
 
template有三种使用方法
   1、直接赋值
       template:`<div>1</div>`
   2、通过script标签来定义
       <script type="x/template" id="tp">
           <div>2</div>
       </script>
       template:"#tp"
   3、使用内置组件template
       <template id="my">
           <div>3</div>
       </template>
       template:"#my"
 
 
4.补充指令
    v-html:输出的是HTML,可以被浏览器所识别编译。
    v-text:输出的是纯文本格式
 
5.组件
实例:  组件1
<body>
<div id="myApp">
   大家好,我在MyApp中
   <one></one>   组件的调用
</div>
</body>
<script>
   new Vue({
       el:"#myApp",
       // 定义组件  注册组件   ----》局部组件
       components:{
           one:{
              // 模板决定你组件的内容。
               template:`<div>one组件当中</div>`
           }
       }
   })
</script>
 
实例: 组件2
<body>
<div id="myApp">
   大家好,我在MyApp中
   <one></one>
</div>                   //挂载的元素
</body>
<script>
   new Vue({
       el:"#myApp",
      template:`<div>啦啦啦<one></one></div>`,        //template模板 会将挂载的元素替换
       components:{
           one:{
               template:`<div>one组件当中</div>`                  //one  就是 vue实例下的一个组件
           }
       }
   })
</script>
 
 
6.组件的命名规则:
       如果组件名字当中包含大写字母需要将其改为小写并以-分割。
 
7.单向数据流
   实例可以向组件进行传递,通过属性(props)   
      但是 通过属性给组件传递的数据,在组件内是不允许直接修改的。
实例:     
        <body>
         <div id="myApp">
             <p>myApp:{{a}}</p>
             <one num="12" age="13"></one>
         </div>
    </body>
    <script>
         new Vue({
             el:"#myApp",
             data:{
                  a:1
             },
             components:{
                  one:{
                       //将你要接收的数据进行设置
                       props:["num","age"]
                       temtemplate:'<div> {{num}}  {{age}}</div>'
                       
                  }
             }
         })
 
8属性传值:
       向下传值通过属性: a.数据的传递是单向的
                         b.如果要修改数据的话,可以通过父级向组件传递一个函数,通过该函数对你的数据进行修改。
 
9. 组件vue实例当中的data与vue实例当中的data定义是有 区别的。
      data是一个函数,该函数必须要有一个返回值,返回值必须要是一个对象。
        为了要保证你子组件当中数据的独立性。
 
10. 组件嵌套
</body>
<script>
    new Vue({
        el:"#myApp",
        components:{
            one:{
                template:`<div>one <two></two></div>`,
                components:{
                    two:{
                        template:`<div>two</div>`
                    }
                }
            }
        }
    })
</script>
 
11.组件与v-for    遍历
<body>
<div id="myApp">
    <goods-list v-for="item in arr" :info="item"></goods-list>
</div>
</body>
<script>
    new Vue({
        el:"#myApp",
        data:{
            arr:[
                {
                    goodsTitle:"栗子",
                    goodsPrice:12
                },
                {
                    goodsTitle:"地板",
                    goodsPrice:34
                }
            ]
        },
        components:{
            goodsList:{
                props:["info"],
                template:`<div>
                    <h3>{{info.goodsTitle}}</h3>
                    <p>{{info.goodsPrice}}</p>
                </div>`
            }
        }
    })
</script>
 
12.动态组件
    <!--动态组件  is属性的值即是所选用的组件名-->
    <components :is="comArr[index]"></components>
 
案例说明:
 
<body>
<div id="myApp">
    <input type="button" @click="changeIndex" value="换肤">
    <!--动态组件  is属性的值即是所选用的组件名-->
    <components :is="comArr[index]"></components>
</div>
</body>
<script>
    const one = {
        template:`<div style="background:red;">one</div>`
    };
    const two = {
        template:`<div style="background:yellow;">two</div>`
    };
    const three = {
        template:`<div style="background:pink;">three</div>`
    };
    const four = {
        template:`<div style="background:deeppink;">four</div>`
    };
    new Vue({
        el:"#myApp",
        data:{
            index:0,
            comArr:["one","two","three","four"]
        },
        methods:{
            changeIndex(){
                this.index++;
                if(this.index>this.comArr.length-1)
                    this.index=0;
            }
        },
        components:{
            one,
            two,
            three,
            four
        }
    })
</script>
 
重点知识点归纳:
1、template有三种使用方法
    1、直接赋值
        template:`<div>1</div>`
    2、通过script标签来定义
        <script type="x/template" id="tp">
            <div>2</div>
        </script>
        template:"#tp"
    3、使用内置组件template
        <template id="my">
            <div>3</div>
        </template>
        template:"#my"
2.定义组件    局部组件   全局组件
 
局部组件:
      new Vue({
      components:{
        one:{
                子组件如何接收:
            //将你要接收的数据进行设置
                       props:["num","age"]
        template:`<div>one组件当中</div>`
                }
        }  
    })
全局组件:
    Vue.component(componentName,config) //第一个参数是你组件的名字,第二个是给件的配置项
 
 
3.动态组件:<!--动态组件  is属性的值即是所选用的组件名-->
    <components :is="组件名[index]"></components>
 
4.es6模块化:
    如何导出: export const 
    如何引入:script 引入  通过import
 
5. 向下如何传      子组件如何接收。
                    通过props设置允许接收的属性名:
                  将你要接收的数据进行设置
                           props:["num","age"]
posted @ 2019-08-25 23:29 仗剑、天涯 阅读(...) 评论(...) 编辑 收藏