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

书接上文

一、 自定义指令

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

1. 注册全局指令—所有人都可以用
<body>
      <div class="app">
        <div v-color="colorStatus">我是一个普通的div元素</div>
      </div>
    <script src="./node_modules/vue/dist/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded',function () {
          Vue.directive('color',function (el,binding) {//指令名称注意不要加**v-**
              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>
2. 注册局部指令—当前组件下可用

选项对象的directives属性(注意此处有个s)

<body>
      <div class="app">
        <div v-color="colorStatus">我是一个普通的div元素</div>
      </div>
    <script src="./node_modules/vue/dist/vue.js" charset="utf-8"></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函数。

三、组件化开发

1. 什么是组件
WEB中的组件其实就是页面组成的一部分,好比是电脑中的每一个原件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或页面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用。
2. 使用组件的好处

提高效率    |   方便重复使用   |   简化调试步骤
提升整个项目的课维护性   |   便于协同开发

3. 组件的特性:

1、高内聚性,组件功能必须是完整的,如我要实现下拉菜单功能,那在下拉菜单这个组件中,就把下拉菜单所需要的所有功能全部实现;

2、低耦合性,通俗点说,代码独立不会和项目中的其他代码发生冲突!在实际工程中,我们经常会涉及到团队协作,传统按照业务线去编写代码的方式,就很容易相互冲突,所以运用组件化方式就可大大避免这种冲突的存在。

3、每一个组件都有自己清晰的职责,完整的功能,较低的耦合便于单元测试和重复利用;
4. Vue中的组件

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',{//html中是横杠的,在js中就是驼峰
        template: `<h2>我是全局组件</h2>`
    })
    var vm = new Vue({
        el: '.app'
    });
</script>
</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标签名的方式 -->
    <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></child>
            <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>
    <script>
        //组件
        var Home = {
            template: `<h2>我是主页</h2>`
        };
        var News  = {
            template: `#news`
        };
        var Detail = {
            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>
</body>

未完待续...

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 3,211评论 0 29
  • ps:补充一个关于console知识点。 console.dir()可以显示一个对象所有的属性和方法。例如:con...
    datura_lj阅读 30,217评论 9 25
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 7,981评论 5 126
  • Vue是一款高度封装的、开箱即用的、一栈式的前端框架,既可以结合webpack进行编译式前端开发,也适用基于gul...
    uinika阅读 1,935评论 2 7
  • 人情未了花空瘦, 泪痕思情露,悲伤又彷徨,重游故园,小径独伤忧。 寒风刺骨人难留,无力解忧愁。情思不得解,梦里寻你...
    陌上柳阅读 2,793评论 11 2