Vue快速入门-2-Vue框架高级操作

发布时间：2020-07-08 10:57:36 作者：小生博客
来源：网络阅读：852

小生博客：http://xsboke.blog.51cto.com

        -------谢谢您的参考，如有疑问，欢迎交流

1. 自定义组件
2. 全局注册的自定义组件
3. 局部注册自定义组件
4. 组件的嵌套
5. 组件的动态切换
6. Vue的ajax

自定义组件

    就相当于自定义标签,其实底层还是html标签,只不过是套了个名字

    自定义组件分为全局注册和局部注册
    共同点:
        为什么data必须以函数方式返回数据？
            因为在函数中,变量属于内部变量,这样当自定义组件被多次引用时变量不会互相影响.
        只能在Vue对象中使用自定义组件

    不同点:
        全局注册的自定义组件：创建组件之后,只要是Vue对象就可以使用
        局部注册的自定义组件：在Vue实例中使用components选项来定义你的局部组件

全局注册的自定义组件

2.1 组件的结构

    Vue.component('component-name',{ /*  ......  */})

    -- 'component-name'             组件名称
    -- { /*  ......  */}            组件的内容(执行的函数)

2.2 简单组件的实现

    <div id="app">
         <button-counter></button-counter>
    </div>

    <div id="app1">
         <button-counter></button-counter>
    </div>

    <script type="text/javascript">
        // 自定义组件也是一个Vue对象,因此之前的data,methods,钩子函数都是可用的
        Vue.component('button-counter',{
            data:function(){                                                        -- 因为返回的是函数,所以两个应用了组件的标签中的count值是互不影响的
                return {                                                            -- 如果需要所有应用的当前组件的count值都一样,可以定义一个全局变量再引入这里
                    count:0
                }
            },
            // 自定义组件最后返回的结果
            template:'<button v-on:click="count++"><b>{{count}}</b></button>'       -- 当点击按钮时,count的值就+1,template定义的是真正生成的html
        })

        new Vue({el:'#app'})                                                        -- 可以看到只要是Vue对象就可以应用全局自定义组件
        new Vue({el:'#app1'})
    </script>

2.3 当你需要多个组件之间的data返回值相同时可以这样解决.

     <div id="app">
         <button-counter></button-counter>
         <button-counter></button-counter>
     </div>

    <script type="text/javascript">

        var mydata= {count:0}                                                   -- 在外部定义变量

        // 自定义组件也是一个Vue对象,因此之前的data,methods,钩子函数都是可用的
        Vue.component('button-counter',{
            data:function(){
                return mydata;                                                  -- 在组件中应用
            },
            // 自定义组件最后返回的结果
            template:'<button v-on:click="count++"><b>{{count}}</b></button>'
        })

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

    </script>

2.4 解决你template里面的内容比较庞大时的操作

```
<head>
    <script type="text/template" id="temp">                 -- 首先在head中定义一个类型(type)为"text/template"的script标签,然后增加一个唯一的属性如下id="temp"
        <div>
            {{message}}
            <ul>
                <li>第一部分：Vue基本语法</li>
                <li>第二部分：自定义组件</li>
            </ul>
        </div>
    </script>
</head>

<body>
    <div id="app">
        <my-header></my-header>
    </div>

    <div id="app2">
        <my-header></my-header>
    </div>

    <script type="text/javascript">
        Vue.component('my-header',{
            template:'#temp'                            -- 然后在template中指定这个id名即可
        });

        new Vue({el:'#app'});
        new Vue({el:'#app2'});
    </script>
</body>
```

局部注册自定义组件

    局部注册自定义标签就是在Vue实例里面通过components选项创建自定义标签

    <head>
        <script type="text/template" id="temp">
            <div>
                {{message}}
                <ul>
                    <li>第一部分：Vue基本语法</li>
                    <li>第二部分：自定义组件</li>
                </ul>
            </div>
        </script>
    </head>

    <body>
        <div id="app">
            <my-header></my-header>
        </div>

        <script type="text/javascript">
            // 局部组件就是Vue对象内部定义的组件,仅仅自身可以使用
            var vue = new Vue({
                el:'#app',
                components:{
                    'my-header':{                                   --  创建一个名为'my-header'的自定义标签
                        template:'#temp',                           --  关联模板
                        data:function(){
                            return{
                                message:'hello vue'
                            }
                        }
                    }
                }
            })
        </script>
    </body>

组件的嵌套

    知识点:使用slot的name属性,用来关联标签或者组件,实现定义嵌套标签或者组件的位置

        <div id="app">
            <my-header>
                <my-title>组件与组件之间嵌套</my-title>
            </my-header>
        </div>

        <div id="app2">
            <my-header>
                <button slot="vleft">左</button>                         -- 这里的slot值必须和Vue实例中components选项的name值一样
                <button slot="vright">右</button>
            </my-header>
        </div>

        <script>
            var vue = new Vue({
                el:'#app',
                // 组件局部注册
                components:{
                    'my-header':{
                        // 系统给定的slot来实现标签的嵌套操作
                        template:'<div>我是头部内容<slot /></div>'            -- 当只需要嵌套一个标签或组件时,直接使用slot,不需要定义name
                    },
                    'my-title':{
                        template:'<h4>我是标题!!</h4>'
                    }
                }
            });

            var vue = new Vue({
                el:'#app2',
                // 组件局部注册
                components:{
                    'my-header':{
                        // 系统给定的slot来实现标签的嵌套操作
                        template:'<div><slot name="vleft" />我是头部内容<slot name="vright" /></div>'
                    }
                }
            })
        </script>

组件的动态切换

    类似JQuery的tab
        <!-- 
           1: component标签的is属性来完成组件动态绑定
           2: 按钮的@click来修改data属性从而切换组件
           3:  keep-alive 标签来保留组件的状态值
        -->
        <div id="app">
            <button @click="changeComp(1)">第一项</button>
            <button @click="changeComp(2)">第二项</button>             -- 点击按钮时执行changeComp函数,并且传入实参"2".
            <button @click="changeComp(3)">第三项</button>
            <keep-alive>                                                -- 使用keep-alive标签可以保留当前组件的状态值,防止组件之间切换时,值丢失
                <component v-bind:is="nowHeader"></component>
            </keep-alive>
        </div>
        <script>
            var vue = new Vue({
                el:'#app',
                data:{
                    nowHeader:'header-1'
                },
                components:{
                    'header-1':{template:'<div>组件1:<input /></div>'},
                    'header-2':{template:'<div>组件2:<input /></div>'},
                    'header-3':{template:'<div>组件3:<input /></div>'},
                },
                methods:{
                    changeComp:function(index){
                        this.nowHeader = 'header-' + index              -- 当changeComp函数被触发时,Vue实例data中的变量"nowHeader",将根据实参的值而发生变化
                    }
                }
            })
        </script>

Vue的ajax

详情查看axios中文手册

    中文手册:https://www.kancloud.cn/yunye/axios/234845
    自2.0之后Vue使用axios实现ajax功能
        -- 注意使用axios需要引入axios的js文件
        <table id="app" border="1" width="300px">
            <!-- item就是循环的每个对象 -->
            <tr v-for="item in result">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>

        <script>
            var vue = new Vue({
                el:'#app',
                data:{
                        result:[]
                     },
                created:function(){                                     -- 在创建VUE实例后执行这个函数
                     // 通过axios访问远程数据
                    axios.get("data.json").then(function(result){       -- then是操作成功后执行的函数
                        this.result = eval(result.data);                -- axios获取的数据默认是string(这将导致您不能循环列表,字典等),可以使用eval将string的格式转换成对象
                    }.bind(this));                                      -- bind(this)的意思是将Vue实例中的this和axios中的this绑定到一块,
                }                                                       -- 因为axios和Vue实例的数据是不互通的
            })
        </script>

        then        --      操作成功后执行的动作
        catch       --      操作异常时执行的动作

Vue快速入门-2-Vue框架高级操作

相关阅读