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

书接上文

一、 自定义指令

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

1. 注册全局指令—所有人都可以用

      

        
我是一个普通的div元素
      
    
    
  

2. 注册局部指令—当前组件下可用

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

      

        
我是一个普通的div元素
      
    
    
  

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

为什么要使用计算属性
模版是未来描述视图的结构，在模版中放入太多逻辑，导致模版过重难以维护。
在计算一个计算属性时，Vue.js更新它的依赖列表并缓存结果，只有当其中一个依赖发生了变化，缓存的结果才无效。

    

        
        {{ myData }}
    

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

三、组件化开发

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

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

3. 组件的特性：

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

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

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

4. Vue中的组件

vue中的组件
vue中的组件是一个自定义标签（元素），Vue.js的编译器为它添加特殊功能；vue也可以拓展原生的html元素，封装可重用的代码
组件的基本组成

  样式结构   |   行为逻辑   |   数据

**a). **全局注册

**b). **局部注册

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

**d). **在组件中定义组件（父子组件）
注意：组件中的数据是以函数的形式的，并且有返回值

路由

    

        

            主页
            新闻
        
        

            
        
    
    
    

未完待续...