vue的内置指令、vue生命周期、自定义（过滤器、指令、插件）、非单文件组件

内置指令

      v-text

      v-html

      ref    为特定的元素添加引用标识，实例的$refs内部可以获取到

      v-on       绑定事件   简写@

      v-bind     单向数据绑定  ：

      v-for    列表渲染

      v-if     条件渲染

      v-else    

      v-show     条件渲染

      v-model    （MVVM）

v-text

v-html

ref是我们在vue当中获取真实dom元素的唯一方式 

  


     
     
{{msg}}
     

     


     点击获取p

  
  
  

 vue的生命周期

 

生命周期钩子（回调函数）
    给我们机会可以干预vue的工作流程
    生命周期的执行顺序是固定的
    
    创建前  初始化数据前    数据打印看不到
    创建后    初始化数据后    数据打印可以看到

    挂载前    初始页面不显示  初始页面的元素看不到 真实dom没有
    挂载后    初始页面显示       初始页面元素可以看到

    更新前    页面更新前    实例数据是对的页面渲染的数据是错的  实例数据已经更新了，页面数据没更新
    更新后    页面更新后    实例数据是对的页面渲染的数据是对的  两个都更新了

    销毁前    实例清空前    在销毁前内部清除定时器  vm还在只是里面功能没（指令和事件）
    销毁后    实例清空后    一般不用

    使用mounted和beforeDestroy比较频繁，mounted内部我们经常去做异步操作，添加事件 定时器  ajax
    当调用了vm.$destroy(),    beforeDestroy和destroyed才会执行，beforeDestroy做收尾工作：清除定时器等
 

  

    
{{msg}}
    点击更新
    点击销毁
  
  
  

 自定义过滤器

    过滤器
    过滤顾名思义是筛选的意思,但是在vue当中过滤器不是筛选的意思
    它是把数据进行二次加工

    定义过滤器分为全局过滤器和局部过滤器

   展示数据的时候，对数据进行处理（格式化之后再显示，不会影响原数据） 
    使用moment插件
    定义全局过滤器
        Vue.filter('过滤器名字'，回调函数)；
    定义局部过滤器
        在vm当中fliters对象当中配置

  

    
{{timeNow}}
    
{{timeNow | dateFormat}}
    
{{timeNow | dateFormat('YYYY-MM-DD')}}
    
{{timeNow | dateFormat('hh:mm:ss')}}
  

  

    
{{timeNow}}
    
{{timeNow | dateFormat}}
    
{{timeNow | dateFormat('YYYY-MM-DD')}}
    
{{timeNow | dateFormat('hh:mm:ss')}}
  

  
  
  

 自定义指令

定义全局指令
        Vue.directive('过滤器名字'，回调函数)；
    定义局部指令
        在vm当中directives对象当中配置

    注意：指令的名称必须是全小写，不能大写

自定义插件

    插件的作用：
        定义插件函数或者对象，为Vue和Vue的实例添加一些额外功能

    插件必须声明使用  Vue.use（）

    (function( w) {

    })( window );

    声明使用插件，所有的官方插件都要声明使用
    本质：
    如果是函数式插件就是直接调用这个函数
    如果是对象式插件，那么就找到对象的install方法去调用

自定义组件（非单文件组件）

    什么是组件： （js css html xml img 字体图标  svg 等）     代码和资源的集合叫组件
    什么是组件化： 针对项目来说  这个项目由多个组件构成 就称这个项目是组件化的项目
    什么是模块： 一个js文件（一个模块不单单可以是js文件）
    什么是模块化： 这个项目由多个模块构成 就称这个项目是模块化的项目

    vue和react都是去做单页应用的，单页应用一般肯定都是组件化的    

 

简化：

mybutton.js

(function(w){
  w.mybutton = {
    // 配置对象，这个配置对象和vue的配置对象几乎一样，除了没有el以外
    data(){
      return {
        count:0
      }
    },
    // data:{
    //   count:0
    // },
    template:'
我爱你赵丽颖
爱了{{count}}次
'
  }
})(window);

    缺点：
        这样定义组件麻烦、模板没提示
        样式没法单独搞，
        没法使用模块化解析ES6语法

    后期我们都是约定成俗（习惯性）把一个.vue文件称作是一个组件，但是本质上它只是暴露了一个配置对象
    配置对象必须在Vue.component()之后，才能定义并注册成为一个组件，接着才能写标签使用

为什么组件当中data必须是函数，不能写对象 

 如果写对象，由于配置对象是同一个，实例化出来的组件对象里的数据用的是同一个data，

使用函数，每个组件都有自己的数据，每次实例化一个对象，都会调一次函数，调用函数时，会return一个新的对象