vue进阶(1) ---自定义组件

vue自定义组件

1、局部组件,局部组件必须要手动挂载,不然无法生效
2、全局组件,全局组件不需要手动挂载,但是不常用,尽量不要在全局上挂载变量或者组件(可能会影响浏览器性能)
3、配合模板使用实现组件间的嵌套

example:局部组件和全局组件的使用方法


<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.jstitle>
        <script src="https://unpkg.com/vue/dist/vue.js">script>
    head>
    <body>
        <div id="example">
            <hello>hello>
            <world>world>
        div>
        <script type="text/javascript">
            //自定义组件(组件注册一定要在实例化vue之前),组件内部也支持钩子方法
            //1、局部组件   必须要手动挂载  不然不生效
            var Hello = {
                template:"

{{ msg }}

"
, //自定义组件(局部组件和全局组件都是)和vue实例不一样的是,vue实例的data是一个json,而自定义组件的data是一个函数,并且格式固定!必须以json形式return data: function(){ return { msg:"点我" } }, methods:{ clickFn: function(){ alert("Don't touch me!") this.msg = "Don't touch me!"; } }, //钩子方法,在模板渲染之前 //vue 没有控制器的概念,因此我们通过钩子来代替控制器 beforeCreate : function(){ console.log('I am ready') }, //钩子方法,在模板渲染完成之后 mounted : function(){ console.log('I have finished') } } //2、全局组件 无需手动挂载 不常用(尽量不要在全局上挂载变量或者组件) //注册组件 Vue.component('world',{ template:"

{{ msg }}

"
, data: function(){ return { msg:'点我' } }, methods:{ clickFn: function(){ alert('You can touch me~') this.msg = "You can touch me~"; } } }) //实例化vue对象并且手动挂载自定义组件 var vm = new Vue({ el:'#example', components:{//在这个方法里面挂载自定义组件,前面是标签名称,后面是首字母大写的变量名 'hello':Hello } });
script> body> html>

example:配合模板自定义局部组件


<html>
    <head>
        <meta charset="utf-8">
        <title>Vue测试2title>
        <script src="https://unpkg.com/vue/dist/vue.js">script>
        <style type="text/css">
            *{
                list-style: none;
            }
        style>
    head>
    <body>
        <div id="example">
            
            <hello>hello>
            
        div>
        
        <template id="example01">
            
            <div>
                <ul>
                    
                    <li>{{title}}li>
                    <li>03li>
                    <li>04li>
                    <li>05li>
                ul>
            div>
        template>
        <script type="text/javascript">
            //Vue自定义组件(配合模板使用方法)   自定义的组件**默认**是不能和vue实例共享数据的
            //自定义局部组件
            var Hello = {
                //使用模板
                template : '#example01',//选择器
                data : function(){
                    return {
                        title : 'I am son'
                    }
                }
            }
            //挂载组件
            var vm = new Vue({
                el:'#example',
                data : {
                    msg : " I am father"
                },
                components: {
                    'hello':Hello
                }
            });
        script>
    body>
html>

example:配合模板自定义局部组件并实现组件间的嵌套


<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.jstitle>
        <script src="https://unpkg.com/vue/dist/vue.js">script>
    head>
    <body>
        
        <div id="example">
            
            <parent>parent>
        div>
        
        
        <template id="example01">
            <div>
                <h1>我是父组件h1>
                
                <child>child>
            div>
        template>

        <script>
            //注意顺序,子组件注册必须在父组件之前,不然无法调用!(JS域解析原理)
            var Child = {
                template : '

我是子组件

'
} var Parent = { template : '#example01', components : { 'child':Child } } var vm = new Vue({ el:'#example', components : { 'parent': Parent } });
script> body> html>

你可能感兴趣的:(前端框架)