13.vue组件

vue组件(一)

组件嵌套:

1.全局嵌套:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("aaa",{
    template:`<div>组件A <bbb></bbb></div>`
});//子组件放在父组件的模板里

Vue.component("bbb",{
    template:`<div>组件B</div>`
});
window.onload = function(){
    let vm = new Vue({
        el:"#app"
    });
};
</script>

</head>

<body>
<div id="app">
    <aaa></aaa>

</div>
</body>
</html>

res:

2.局部嵌套:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
    let vm = new Vue({
        el:"#app",
        components:{
            "aaa":{
                template:`<div>组件A<bbb></bbb></div>`,
    //子组件必须放在父组件的属性里
                components:{
                    "bbb":{
                        template:`<div>组件B</div>`
                    }
                }
            },
            /*"bbb":{
                template:`<div>组件B</div>`
            }   */ //错误
        }
    });
};
</script>

</head>

<body>
<div id="app">
    <aaa></aaa>
</div>
</body>
</html>

res:

组件通信(重要)

==1、props/$emit==

1.数据的双向绑定:

v-model后的变量名相同

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"abc"
        }
    });
};
</script>
</head>

<body>
<div id="app">
    <input v-model="msg" type="text" value=""/><br />
    <input v-model="msg" type="text" value=""/><br />
    {{msg}}<br />

</div>
</body>
</html>

res:

2.父传子,子传父props/$emit, 用ev.target.value或事件监听

(1)ev.target.value

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("mycomponent",{
    props:["msg"],
    template:`<div><input @input="show" type="text" :value="msg"/>{{msg}}</div>`,
    methods:{
        show(ev){
            console.log(22222);
            this.$emit("abc",ev.target.value);
            //传子组件value值
        }
    }
});
window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"abc"
        },
        methods:{
            fn(data){
                console.log(11111,data);
                this.msg = data;
            }
        }
    });
};
</script>
</head>

<body>
<div id="app">
    <input v-model="msg" type="text" value=""/>{{msg}}<br />
    <hr />
    <mycomponent :msg="msg" @abc="fn"></mycomponent>
</div>
</body>
</html>

res:

(2)事件监听

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("mycomponent",{
    props:["msg"],
    template:`<div><input v-model="msg2" type="text" value=""/>{{msg}}</div>`,
    data(){
        return {msg2:this.msg}
    },
    watch:{
        msg(){
            this.msg2 = this.msg;
        },
        msg2(){
            this.$emit("abc",this.msg2);
        }
    }
});
window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"abc"
        },
        methods:{
            fn(data){
                console.log(11111,data);
                this.msg = data;
            }
        }
    });
};
</script>

</head>

<body>
<div id="app">
    <input v-model="msg" type="text" value=""/>{{msg}}<br />
    <hr />
    <mycomponent :msg="msg" @abc="fn"></mycomponent>
</div>
</body>
</html>

res:

2.对象—— 引用

==子与父操控同一个对象==

1.父传子,子传父props,value
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("mycomponent",{
    props:["msg"],
    template:`<div><input v-model="msg.value" type="text" value=""/>{{msg.value}}</div>`
});
window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
            //msg:"abc"
            msg:{value:"abc"}
            //对象--msg.value引用
        }
    });
};
</script>

</head>

<body>
<div id="app">
    <input v-model="msg.value" type="text" value=""/>{{msg.value}}<br />
    <hr />
    <mycomponent :msg="msg"></mycomponent>

</div>
</body>
</html>

res:

3.$children / $parent / $root

1. $children
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("aaa",{
    template:`<div>组件A----{{a}}</div>`  ,
    data(){
        return {a:"a"}
    }
});
Vue.component("bbb",{
    template:`<div>组件B</div>`
});

window.onload = function(){
    let vm = new Vue({
        el:"#app",
        methods:{
            show(){
                //$children
                console.log(this.$children);
                this.$children[0].$el.style.background = "red"
                this.$children[0].a = "abc"
            }
        }
    });
};
</script>

</head>

<body>
<div id="app">
    <input @click="show" type="button" value=" 按钮" />
    <aaa></aaa>
    <bbb></bbb>
</div>
</body>
</html>

res:

2.$parent
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("aaa",{
    template:`<div @click="show">组件A----{{a}}</div>`,
    data(){
        return {a:"a"}
    },
    methods:{
        show(){
            //parent/root
            console.log(this.$parent == this.$root);
            //this.$parent.msg = "哈哈哈";
            this.$root.msg = "哈哈哈";
        }
    }
});
Vue.component("bbb",{
    template:`<div>组件B</div>`
});

window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"Vue"
        },
        methods:{
            show(){

            }
        }
    });
};
</script>

</head>

<body>
<div id="app">
    <input @click="show" type="button" value=" 按钮" />{{msg}}
    <hr />
    <aaa></aaa>
    <bbb></bbb>
</div>
</body>
</html>

res:

3.$root
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("aaa",{
    template:`<div @click="show">组件A----{{a}} <bbb></bbb></div>`,
    data(){
        return {a:"a"}
    },
    methods:{
        show(){
            //parent/root
            console.log(this.$parent == this.$root);
            //this.$parent.msg = "哈哈哈";
            this.$root.msg = "哈哈哈";
        }
    }
});
Vue.component("bbb",{
    template:`<div @click.stop="show">组件B</div>`,
        methods:{
        show(){
            //parent/root
            console.log(this.$parent == this.$root);
            this.$parent.a = "aa";
            this.$root.msg = "嘻嘻嘻";
        }
    }
});

window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"Vue"
        },
        methods:{
            show(){

            }
        }
    });
};
</script>

</head>

<body>
<div id="app">
    <input @click="show" type="button" value=" 按钮" />{{msg}}
    <hr />
    <aaa></aaa>
</div>
</body>
</html>

res:

4、ref/$refs

this.$refs以数组的形式获取全部的ref

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//ref
Vue.component("aaa",{
    template:`<div>组件A----{{a}} </div>`,
    data(){
        return {a:"a"}
    }
});
Vue.component("bbb",{
    template:`<div>组件B</div>`,
});

window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"Vue"
        },
        methods:{
            show(){
                console.log(this.$refs);
    //this.$refs以数组的形式获取全部的ref
                this.$refs.aaa.$el.style.background = "pink";
                this.$refs.aaa.a = "pink";
            }
        }
    });
};
</script>

</head>

<body>
<div id="app">
    <input @click="show" type="button" value=" 按钮" />{{msg}}
    <hr />
    <aaa ref="aaa"></aaa>
    <bbb ref="bbb"></bbb>
</div>
</body>
</html>

res:

5、eventBus事件总线

let eventBus = new Vue();

eventBus.$emit(sEv,data);

eventBus.$on(sEv,data=>{})

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//事件总线——eventBus emit/on
Vue.component("aaa",{
    template:`<div @click="show">组件A----{{a}} </div>`,
    data(){
        return {a:"a"}
    },
    created(){
        eventBus.$on("chagnea",data=>{
            this.a = data;
        });
    },
    methods:{
        show(){
            eventBus.$emit("chagneb","我想你了");
        }
    }
});
Vue.component("bbb",{
    template:`<div @click="show">组件B----{{b}}</div>`,
    data(){
        return {b:"b"}
    },
    created(){
        eventBus.$on("chagneb",data=>{
            this.b = data;
        });
    },
    methods:{
        show(){
            eventBus.$emit("chagnea","我也想你了");
        }
    }
});

let eventBus = new Vue();

window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"Vue"
        },
        methods:{
            show(){
            }
        }
    });
};
</script>

</head>

<body>
<div id="app">
    <aaa></aaa>
    <bbb></bbb>
</div>
</body>
</html>

res:

6、sync

sync --> this.$emit("updata:xxx",data);

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//sync
Vue.component("mycomponent",{
    props:["msg"],
    template:`<div><input @input="show" v-model="msg2" type="text" value=""/>{{msg}}</div>`,
    data(){
        return {msg2:this.msg}
    },
    methods:{
        show(){
            this.$emit("update:msg",this.msg2);
        }
    }
});
window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"abc"
        },
        methods:{
            fn(data){
                this.msg = data;
            }
        }
    });
};
</script>

</head>

<body>
<div id="app">
    <input v-model="msg" type="text" value=""/>{{msg}}<br />
    <hr />
//@update:msg="fn",事件
    <mycomponent :msg="msg" @update:msg="fn" ></mycomponent>
// :msg.sync="msg",固定写法
    <mycomponent :msg.sync="msg" ></mycomponent>
</div>
</body>
</html>

res:

7、v-model

v-model --> this.$emit("input",data);

exp:自增

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//sync
Vue.component("mycomponent",{
    template:`<div><input @click="show" type="button" value="plus"/></div>`,
    data(){
        return {count:0}
    },
    methods:{
        show(){
        //"input"固定写法   this.$emit("input",++this.count);
        }
    }
});
window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
            count:0
        },
        methods:{
            show(data){
                console.log(1,data);
                this.count = data;
            }
        }
    });
};
</script>

</head>

<body>
<div id="app">
    {{count}}
    <hr />
    <mycomponent v-model="count" ></mycomponent>

</div>
</body>
</html>

res:

vue组件(二)

1.创建组件

1、全局 Vue.component

2、局部 new Vue({components:{}});

3、Vue.extend

let VueComponent = Vue.extend(options);

Vue.component("名字",VueComponent);

返回值：Vue.extend、Vue.component 返回的都是VueComponent

new VueComponent().$mount("#app");

Vue.extend可以没有参数

let VueComponent = Vue.extend();

new VueComponent(options).$mount("#app");

获取模板元素：

let tmp = new VueComponent([options]).$mount().$el;

document.body.appendChild(tmp);

exp:

==++Vue.extend++==

全局组件:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//Vue.extend
//VueComponent
let mycomponent = Vue.extend({
    template:`<div>Vue.extend组件</div>`
});

Vue.component("mycomponent",mycomponent);//("组件名",VueComponent)

window.onload = function(){
    let vm = new Vue({
        el:"#app",
    });
};
</script>

</head>

<body>
<div id="app">
    <mycomponent></mycomponent>
</div>
</body>
</html>
局部组件:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//Vue.extend
let mycomponent = Vue.extend({
    template:`<div>Vue.extend组件</div>`
});
//new Vue({components:{}});
window.onload = function(){
    let vm = new Vue({
        el:"#app",
        components:{mycomponent}
    });
};
</script>

</head>

<body>
<div id="app">
    <mycomponent></mycomponent>
</div>
</body>
</html>

//最大组件 Vue

let VueComponent = Vue.extend(options);//new时不带参数

let VueComponent = Vue.extend();//new时带参数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
let Comp1 = Vue.extend({
    template:`<div>Vue.extend组件</div>`
});

let Comp2 = Vue.extend();

console.log(1,Comp1);
console.log(2,Comp2);

window.onload = function(){
    //let oDiv = new Comp1().$mount().$el;
    //获取模板元素：
    let oDiv = new Comp2({
        template:`<div>new Comp2组件</div>`
    }).$mount().$el;

    console.log(3,oDiv);

    document.body.appendChild(oDiv);

};
</script>

</head>

<body>
<div id="app">

</div>
</body>
</html>

静态组件 动态组件

==必须有is==

静态--> is="组件的名称"

动态--> :is="变量或者值 ‘组件的名称‘"

<div is="组件的名称"></div>
<div :is="变量或者值 ‘组件的名称‘"></div>

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>

Vue.component("aaa",{
    template:`<div>组件A</div>`
});
Vue.component("bbb",{
    template:`<div>组件B</div>`
});

window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
            comp:"aaa"
        },
        methods:{
            toggle(){
                this.comp = this.comp=="aaa"?"bbb":"aaa";
            }
        }
    });

};
</script>

</head>

<body>
<div id="app">
    <input @click="comp=‘aaa‘" type="button" value="组件A"/>
    <input @click="comp=‘bbb‘" type="button" value="组件B"/>
    <input @click="toggle" type="button" value="toggle"/>
    <!-- 动态-->
    <div :is="comp"></div>

</div>
</body>
</html>

3.异步组件

Vue.component(组件名称,(resolve,reject)=>{

    axios.get(url).then(res=>{

        resolve({
            template:res.data
        });

    });
});

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>

Vue.component("mycomp",(resolve,reject)=>{
    axios.get("abc2.html").then(res=>{
        setTimeout(()=>{
            console.log(res.data);
            let oDiv = document.createElement("div");
            oDiv.innerHTML = res.data;
            //读取成功放到template
            resolve({
                //template:res.data
                //template:oDiv.children[0].innerHTML
                template:oDiv.children[0]
            });
        },2000);
    });
});
window.onload=function(){
    let vm = new Vue({
        el:"#app",

    })
}
</script>

</head>

<body>
<div id="app">
    <mycomp></mycomp>
</div>
</body>
</html>

4.组件的生命周期

activated //激活
deactivated //休眠

必须跟 keep-alive标签

<keep-alive>
    <div :is="‘组件名称‘"></div>
</keep-alive>

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>

Vue.component("aaa",{
    template:`<div>组件A</div>`,
    activated(){
        console.log("A-----activated");//激活
    },
    deactivated(){
        console.log("A-----deactivated");//休眠
    },
    beforeDestroy(){
        console.log("A-----beforeDestroy");
    },
    destroyed(){
        console.log("A-----destroyed");
    },
});

Vue.component("bbb",{
    template:`<div>组件B</div>`,
    activated(){
        console.log("B-----activated");//激活
    },
    deactivated(){
        console.log("B-----deactivated");//休眠
    },
    beforeDestroy(){
        console.log("B-----beforeDestroy");
    },
    destroyed(){
        console.log("B-----destroyed");
    },
});

window.onload = function(){
       vm = new Vue({
        el:"#app",
        data:{
            a:"aaa"
        },
        methods:{
            toggle(){
                this.a = this.a == "aaa"?"bbb":"aaa";
            }
        }
    });
};
</script>

</head>

<body>
<div id="app">
    <input @click="toggle" type="button" value="toggle"/>
    <keep-alive>
        <div :is="a"></div>
    </keep-alive>
</div>
</body>
</html>

res:

错误的生命周期

errorCaptured

执行条件:

只能捕获子组件的异常，无法捕获自己发生的错误！

异常会冒泡！

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//异常会冒泡
Vue.component("aaa",{
    template:`<div>组件A <bbb></bbb></div>`,

    errorCaptured(){//捕获异常
        console.log("A-----errorCaptured");
    },
});

Vue.component("bbb",{
    template:`<div>组件B</div>`,
    data(){
        return {
            a
            //a is not defined
        }
    },
    errorCaptured(){
        console.log("B-----errorCaptured");
    }
});

window.onload = function(){
       vm = new Vue({
        el:"#app",
        data:{
            //a
        },
        errorCaptured(){
            console.log("Vue-----errorCaptured");
        }
    });
};
</script>

</head>

<body>
<div id="app">
    <aaa></aaa>

</div>
</body>
</html>

冒泡:bbb-->aaa-->app

res:

5.组件渲染:

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。

render(createElement){
    return createElement(
      "h1",   // tag name 标签名称
      "标题" //内容: {属性:{属性值}}}
    )
}

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
     let vm = new Vue({
        el:"#app",
         render(createElement){
            return createElement(
              "ul",   // tag name 标签名称
              {
                 attrs: {
                   id: ‘ul1‘
                },
                ‘class‘: {
                    foo: true,
                    bar: false
                 },
                 style: {
                    color: ‘red‘,
                    fontSize: ‘14px‘
                 },

              },
              [
                createElement("li","111"),
                createElement("li","222"),
                createElement("li","333"),
              ]
            )
         }
    });
};
</script>

</head>

<body>
<div id="app">
   <!--
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
   -->

</div>
</body>
</html>

res:

6.混入

合并.

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>

let json1 = {
    data:{
        msg:"abc",
        a:"a",
        b:"b",
    },
    methods:{
        fn(){
            console.log("fn");
        }
    }
};
let json2 = {
    data:{
        c:"c",
    },
    computed:{
        computedXXX(){
            console.log("computedXXX");
        }
    } ,
    watch:{
        c(){
            console.log("watch c");
        }
    }
}
window.onload = function(){
     let vm = new Vue({
        //mixins: [json],
        el:"#app",
        data:{
            msg:"Vue",
        },
        methods:{
            show(){
                console.log("show");
            }
        },
        mixins: [json1,json2],
    }); 

    console.log(vm);
};
</script>

</head>

<body>
<div id="app">
</div>
</body>
</html>

res:

对与父组件已存在的实例,不会被改变

7.自定义指令

v-xxx

Vue.directive("xxx", function (el, binding) {
    console.log(el,binding);
    el.style.color = "xxx";
})

v-red 字体变红

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.directive("red", function (el, binding) {
    console.log(el,binding);
    el.style.color = "red";
})

window.onload = function(){
     let vm = new Vue({
        el:"#app",
    }); 

    console.log(vm);
};
</script>

</head>

<body>
<div id="app">
    <div v-red>自定义指令</div>
</div>
</body>
</html>

res:

v-color="‘red‘" 字体变红

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.directive("color", function (el, binding) {
    console.log(el,binding);
    el.style.color = binding.value;
})

window.onload = function(){
     let vm = new Vue({
        el:"#app",
    }); 

};
</script>

</head>

<body>
<div id="app"> 

    <div v-color="‘red‘">自定义指令</div>
</div>
</body>
</html>

res:

自定义样式style

v-style="{width:‘200px‘,height:‘200px‘,background:‘green‘}"

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
/*
Vue.directive("style", function (el, binding) {
    console.log(el,binding);
    for(let name in binding.value){
        el.style[name] = binding.value[name];
    }
})

*/
window.onload = function(){
     let vm = new Vue({
        el:"#app",
        directives:{
            style(el, binding){
                console.log(el,binding);
                for(let name in binding.value){
                    el.style[name] = binding.value[name];
                }
            }
        }
    }); 

};
</script>

</head>

<body>
<div id="app"> 

    <div v-style="{width:‘200px‘,height:‘200px‘,background:‘green‘}">自定义指令</div>
</div>
</body>
</html>

res:

自定义拖拽:v-drag

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>

Vue.directive("drag",{
    bind(el, binding){
        console.log("bind");
        el.style.position = "absolute";
        el.style.left = 0;
        el.style.top = 0;
        el.style.width = "100px";
        el.style.height = "100px";
        el.style.background = "red";
    },
    inserted(el, binding){
        el.onmousedown = function(ev){

            let disX = ev.clientX - el.offsetLeft;
            let disY = ev.clientY - el.offsetTop;
            document.onmousemove = function(ev){
                el.style.left = ev.clientX - disX + "px";
                el.style.top = ev.clientY - disY + "px";
            };
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        };
    },
    update(el, binding){
        console.log("update");
    },
    componentUpdated(el, binding){
        console.log("componentUpdated");
    },
    unbind(el, binding){
        console.log("unbind");
    },

})

window.onload = function(){
     let vm = new Vue({
        el:"#app",
        data:{
            msg:"Vue",
            a:true,
        },
        methods:{
            show(){
                this.a = false;
                this.msg = Math.random();
            }
        }

    }); 

};
</script>

</head>

<body>
<div id="app"> 

    <div v-if="a" @click="show" v-drag>自定义指令 {{msg}}</div>
</div>
</body>
</html>

res:

v-if: 与unbind

8.过滤器

过滤器:

https://cn.vuejs.org/v2/api/?#Vue-filter

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//首字母大写
Vue.filter("capitalize", function (str) {
    return str.charAt(0).toUpperCase() + str.substring(1);
});
//字符串反转
/*Vue.filter("reverse", function (str) {
    return str.split("").reverse().join("");
});*/

window.onload = function(){
     let vm = new Vue({
        el:"#app",
        data:{
            msg:"vue",
        },
        //字符串反转
        filters:{
            reverse(str){
                return str.split("").reverse().join("");
            }
        }
    }); 

};
</script>

</head>

<body>
<div id="app">
    <input v-model="msg" type="text" value=""/><br />
    {{msg}}<br />
    {{msg|capitalize}}<br />
    {{msg|reverse}}<br />
    {{msg|reverse|capitalize}}<br />
    {{msg|capitalize|reverse}}<br />
</div>
</body>
</html>

res:

9.nextTick

nextTick https://cn.vuejs.org/v2/api/#Vue-nextTick

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
     let vm = new Vue({
        el:"#app",
        data:{
            msg:"vue",
        },
        methods:{
            show(){
                this.msg = Math.random();
                this.$nextTick(function(){
                    let oSpan = document.getElementById("s1");
                    console.log(oSpan.innerHTML);
                });
            }
        }
    }); 

};
</script>

</head>

<body>
<div id="app">
    <input @click="show" type="button" value="按钮"/><br />
    <span id="s1">{{msg}}</span>

</div>
</body>
</html>

res:

++不加nextTick,console.log(oSpan.innerHTML)中的结果是上一次的内容.++

原文地址：https://www.cnblogs.com/zhongchao666/p/9463005.html

时间： 2024-08-29 22:02:27

13.vue组件的相关文章

关于vue组件的一个小结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复

vue组件大集合 component

vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template:''  组件要显示的内容 component('',);  注册组件,接收两个参数,第一个参数用来使用的标签,第二个参数标识要显示内容的构建器 详情请看vue的API: http://v1-cn.vuejs.org/guide/components.html 一.简单的组件 1 <!DOCTYPE

vue组件讲解（is属性的用法）

什么是组件? 在说之前我们先搞清楚什么是组件?这样对我们下边的学习是很有帮助的. 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可以重复使用的代码.在较高层次上,组件就是自定义元素,Vue.js的编辑器为它添加特殊功能.在有些情况下,组件也可以是原生元素的形式,以is特性进行扩展. 怎么使用组件? 说道这里,组件是什么,我们都有了清楚的了解,但是怎么使用呢? 首先,我们要进行注册,才能进行使用 注册 之前我们也说过,可以通过new来创建一个VUE实例 n

通俗易懂了解Vue组件之间的通信方式

1.前言 Vue框架倡导组件化开发,力求将一个大的项目拆分成若干个小的组件,就如同我们小时玩堆积木一样,一个大房子是由若干个小积木组成.组件化开发最大问题就是组件之间数据能够流通,即组件之间能够通信.而组件间通信无非就分为三种情况:外层的大组件向内部的小组件通信,内部的小组件向外部的大组件通信,平级之间组件通信.说的官方一点就是: 父组件与子组件通信 子组件与父组件通信 非父子组件通信 针对这三种情况,下面将一一展开介绍. 2.父组件 - -> 子组件 父组件向子组件传递数据通过props.通俗

vue组件之间的传值方式

一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta

Vue基础语法(样式绑定,事件处理,表单,Vue组件)

样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>vue的样式绑定</title> <style> .a{ /*

004 vue组件

一:创建组件 1.第一种创建方式 主要有Vue.extend,Vue.component. 注释掉的代码是一步一步的推断,后面的代码是简化的代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

vue组件

require.js 加载 vue组件 r.js 合并压缩 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法r.js 合并压缩 参考司徒正美 r.js合并实践 准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data method

Vue组件开发分享

在开始本文之前,你可能需要先了解以下相关内容: Vue.js  一款高性能轻量化的MVVM框架 Webpack  前端模块化代码构建工具 Vue组件介绍 基于vue.js高效的双向数据绑定特性,让我们在开发高可用组件时可以更加专注于数据逻辑开发: 忘记DOM操作,忘记事件绑定,让开发的专注力集中于数据上: 1.定义需要使用的数据及类型 2.在合适的时机更新数据 3.在模板上绑定数据与视图的映射关系 4.开放对外调用接口 代码 https://github.com/xiaoyunchen/vue-