“Vue2.0”跟俺一起全面入坑 03

一. 自定义指令

除了Vue内置的指令，可以自己设置指令。

注册全局指令-所有人都可以使用

<body>
 <div class="app">
     <div v-color="colorStatus">我是一个普通的Div元素</div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 <script type="text/javascript">
     document.addEventListener('DOMContentLoaded',function(){
         Vue.directive('color',function(el,binding)){
             console.log(el);//当前绑定自定义指令的元素，可以用来直接操作dom
             console.log(binding);//一些参数，常用的=>binding.value（指令的值）
             el.style.backgroundColor='lawngreen';
         }
     })
     var vm=new Vue({
         el:'.app',
         data:{
             colorStatus:true
         }
     });
 },false);
 </script>
 </body>

注册局部指令-当前组件下可用

选项对象的directives属性（注意此处有个s）

<body>
    <<div class="app">
     <div v-color="colorStatus">我是一个普通的Div元素</div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 <script type="text/javascript">
 document.addEventListener('DOMContentLoaded',function () {
     var vm = new Vue({
         el: '.app',
         data: {
             colorStatus: true
             },
             directives:{
                 'color':function (el,binding) {
                 el.style.backgroundColor = 'lawngreen';
                 }
             }
             });
             },false);
         </script>
 </body>

二、计算数据（计算属性）—— 在选项对象中定义

为什么要使用计算机属性

模版是未来描述视图的结构，在模版中放入太多逻辑，导致模版过重难以维护

在计算一个计算属性时，vue.js更新她的以来列表并缓存结果，只有当其中一个依赖发送了变化，缓存结果才无效

<body>
    <div class="app">
        <input type="button" value="改变" @click="change"/>
        {{myData}}
        </div>
        <script>src="vue.js"</script>
        <script>
            var vm=new Vue({
                el:'.app',
                data:{
                    num:1
                },
                computed:{
                    myData:{
                        get:function(){
                            alert('get');
                            return this.num+2;

                        },
                        set:function(val){
                            alert('set');
                            return this.num=val;
                        }
                    }
                },
                methods:{
                    change(){
                        //vm.myData=10;
                        this.myData=10;;//此处虽然设置了myData的值，但是结果是12，因为myData是依赖num的
                    }
                }
            })
        </script>
    </body>

解析计算属性和数据使用的方式一样。页面加载的时候出发get函数，当点击事件后会触发set函数。

三. 组件化开发

什么是组件开发

web中的组件其实就是页面组成的一部分，好比是电脑中的每一个原件（如硬盘、键盘、鼠标），他是一个具有逻辑和功能的页面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用

组件的好处
(1)提高效率
(2)方便重复使用
(3)简化调试步骤
(4)提升整个项目的可维护性
(5)便与协同开发
组件的特性
(1)高内聚性，组件功能必须是完整的，如果我要实现下拉菜单功能，那在下来菜单这个组建中，就把下拉菜单所需要的功能全部实现
(2)低耦合性，通俗点说，代码独立不会和项目中其他代码发生冲突！在实际工程中，我们经常设计到团队协作，传统按照业务线去编写代码的方式，就很容易相互冲突，所以运用组件化方式就可大大避免这种冲突的存在。
(3)每一个组件都有自己清晰的职责，完整的功能，较低的耦合便于单元测试和重复利用；
Vue中的组件
Vue中的组件是一个自定义标签（元素），Vue.js的编译器为它添加特殊功能；
Vue也可以拓展原生html元素，封装可重用代码
组件基本构成
|样式结构 | 行为逻辑 | 数据|

a) 全局注册

<body>
    <div class="app">
        <my-component></my-component>
        </div>
        <script src="vue.js"></script>
<script>
    //全局注册
    Vue.component('myComponent',{
        template:`<h2>我是全局组件</h2>`
    })
     var vm = new Vue({
        el: '.app'
    });
</script>
</body>

    </body>

b) 局部注册

<body>
    <div class="app">
        <my-component></my-component>
        <common></common>
    </div>
<script src="vue.js"></script>
<script>
    var Child = {
        template:`<h3>我是局部组件</h3>`
    };
    var common = {
        template: `<p>第二个局部组件</p>`
    }
    var vm = new Vue({
        el: '.app',
        components: {
            // <my-component> 将只在父模板可用
            myComponent: Child,
            common //如果组件定义的名字和在html显示的标签名一致就可以省略
        }
    });
</script>
</body>

c). 组件模版编写方式

当我们的组件模版内容较多的时候，不要用字符串的方式了，比较繁琐。可使用在外部定义一个模版然后在组件注册的时候引用一下.

<body>
    <div class="app">
        <my-component></my-component>
        <common></common>
    </div>
    <!--type="x-template"是为了不让这个script进行解析-->
    <script id="component1" type="x-template">
        <h3>第一个局部组件-定义方式1</h3>
    </script>
    <!--用template标签名的方式 推荐-->
    <template id="component2">
        <p>第二个局部组件-定义方式2</p>
    </template>
    <script src="vue.js"></script>
    <script>
        var Child={
            template:`#component1`
            };
        var common={
            template:`#component2`
            }
        var vm=new Vue({
            el:'.app',
            components:{
                //<my-component>将只在负模版可用
                myComponent:Child,
                common//如果组件定义的名字和在html显示的标签名一致就可以省略
                }
            });
    <script>
    </body>

d). 在组件中定义组件（父子组件）

注意：组件中的数据是以函数的形式的，并且有返回值

<body>
    <div class="app">
        <my-component></my-component>
    </div>
    <!-- 用 template标签名的方式  推荐-->
    <template id="myMsg">
        <div>
            <p>父组件=>{{msg}}</p>
            <child></chlid>
            <child2></child2>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        var myComponent={
            template:`#myMsg`,
            data(){//注意组建中的数据是一个函数形式并且有返回值的
                return{
                    msg:'我是父组件的数据'
                    }
                },
            components:{
                child:{
                    template:`<p>我是一个子组件</p>`
                },
                child2:{
                    template:`<p>我是第二个子组件</p>`
                }
            }
        }
    var vm=new Vue({
        el:'.app',
        components:{
            myComponent
        }
    });
</script>

路由

<body>
    <div class="app">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>
        <div><router-view></router-view></div>
    </div>
    <template id="news">
        <div>
            <h2>我是新闻页面</h2>
            <ul>
                <li>
                    <router-link to="/news/detail/001?a=1">详细新闻</router-link>
                    <router-link to="/news/detail/002">详细新闻2</router-link>
                    <router-link to="/news/detail/003">详细新闻3</router-link>
                </li>
                <div><router-view></router-view></div>
            </ul>
        </div>
    </template>
</body>
<script>
    //组件
    var Home={
        template:`<h2>我是主页</h2>`

    };
    var News={
        template:`#news`

    };
    var Detal={
        template:`<p>{{$route.params}}=>{{$route.query}}=>{{$route.path}}</p>`
    }
    //路由配置
    const routes=[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News,
            children:[
                {
                    path:'detail/:id',
                    component:Detail
                }
            ]
        },
        {
            path:'*',
            redirect:'/home'
        }
    ]
    //生成路由实例
    const router=new VueRouter({
        routes
    });
    //挂在到vue实例上
    const vm=new Vue({
        el:'.app',
        router
    });
</script>

“Vue2.0”跟俺一起全面入坑 03

一. 自定义指令

二、计算数据（计算属性）—— 在选项对象中定义

三. 组件化开发

评论已关闭

最新文章

最近回复

分类

“Vue2.0”跟俺一起全面入坑 03

一. 自定义指令

二、 计算数据（计算属性）—— 在选项对象中定义

三. 组件化开发

评论已关闭

最新文章

最近回复

分类

二、计算数据（计算属性）—— 在选项对象中定义