vue.user的笔记（5.19）

兄弟组件之间的案例传值案例

div id="app">
        <componenta></componenta>
        <componentb></componentb>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var bus=new Vue();
        Vue.component('componenta',{
            template:`
                <div>
                    <h1>我是组件A</h1>
                    <ul class="lista">
                        <li v-for="(value,index) in list" @click="send(index)">
                            <img :src="value.url"> 
                            <p>{{value.title}}</p>
                            <p>{{value.price}}</p>
                        </li>        
                    
                    </ul>
                </div>
            `,
            data:function(){
                return{
                    list:[
                        {id:1,url:"img/1.jpg",title:"华为p30",price:"300"},
                        {id:2,url:"img/2.jpg",title:"华为p40",price:"400"},
                        {id:3,url:"img/3.jpg",title:"华为p50",price:"500"}
                    ]
                }
            },
            methods:{
                send(index){
                    bus.$emit('sendEvent',this.list[index]);
                    console.log(this.list[index]);
                }
            }
        })

        Vue.component('componentb',{
            template:`
                <div>
                    <h1>我是组件B</h1>
                    <img :src="obj.url">
                    <p>{{obj.title}}</p>
                    <p>{{obj.price}}</p>
                </div>
            `,
            data:function(){
                return{
                    obj:{}
                }
            },
            mounted(){
                bus.$on('sendEvent',(msg)=>{
                    console.log(msg);
                    this.obj=msg;
                })
            }
        })
        new Vue({
            el:"#app"
        })
    </script>

vue自定义指令案例
案例1

    <div id="app">
        <input type="text" v-focus>
        <br/>
        <br/>
        <br/>
        <input type="text">
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.directive('focus',{
            inserted(el){
                el.focus();
            }
        })
        new Vue({
            el:"#app"
        })

案例二

    <div id='app'>
        <p v-color>喜欢谁那</p>
        <p></p>

        <div v-color>喜欢哪个</div>
    </div> 
    <script src="js/vue.js"></script>
    <script>
        Vue.directive('color',{
            //
            inserted(el){
                el.style.background="red";
            }
        })
        new Vue({
            el:"#app"
        })
    </script>

案例三`

    <p id="app" v-color>她们你选谁</p>
    <script src="js/vue.js"></script>
    <script>
        Vue.directive('color',{
            inserted(el){
                var num=(Math.random()*1000000).toFixed(0);
                console.log(num);
                // 45679
                el.style.background='#'+num;
            }
        })

        new Vue({
            el:"#app"
        })

vue.user的使用

    <!-- 
        Vue.use()主要用于在vue中安装插件
        //插件函数也可以是一个对象，如果是对象，必须提供install()方法
     -->
     <div id="app" v-chg>选第一个嘛</div>
     <script src="js/vue.js"></script>
     <script src="plugin.js"></script>
     <script>
         Vue.use(myPlugin);
         new Vue({
             el:"#app"
         })
     </script>

//功能
var myPlugin={};
myPlugin.install=function(){
    Vue.directive('chg',{
        inserted(el){
            el.style="width:100px;height:100px;background:yellow";
        }
    })
}