Vue（四）

自定义指令

• directives

  • 全局指令

    <script>
    Vue.directive('foucs',{
        //当绑定元素插入到DOM中。
        inserted:function(el){
            //聚焦元素
            el.focus()
        }
    })
    </script>
    

  • 局部指令

    //实现的效果通全局指令
    <script>
    let vm = new Vue({
        el:"#app",
        directive:{
            focus:{
                inserted:function(el){
    			el.focus()
                }
            }
        }
    })
    </script>
    

  • 定义新指令后就可以直接使用v-focus属性了

    <div>
        <input type="text" v-focus/>
    </div>
    

生命周期函数（钩子函数）

• beforeCreate(){}

  • 不能使用vm中的功能

  • 可以做网络请求，但是请求的数据不能操作数据源data

  • 可以做预加载

    beforeCreate() {
    	console.log("vm对象实例化之前调用---",this.msg)
    }
    

• create(){}

  • vm对象创建完毕 所以可以使用vm对象中的功能

  • 但是不能操作dom

  • 如果希望网络请求加载的数据一下给用户呈现，就在这里请求页面的数据

    created(){
        console.log("vm对象实例化完毕调用---",this.msg)
    }
    

• mounted(){}

  • 已经挂载了这时候既能操作页面 关键是 这个函数调用时 页面已经显示了

  • ajax请求在这里面发生，可以保证先给用户一个页面结构，然后再网络请求把数据刷新到页面的局部区域

    mounted(){
        console.log("虚拟节点树已经挂载到真实的文档树")
    }
    

• beforeMount(){}

  • 可以操作data和方法

  • 不能操作dom

    beforeMount(){
    	console.log("虚拟节点树挂载到真实的文档树之前")
    }
    

• beforeUpdate(){}

  • data数据初始化不会执行更新钩子

    beforeUpdate(){
        console.log("数据已经改变但是页面还没有刷新时",this.msg)
    }
    

• updated(){}

  • 销毁实例之前

  • 常常去 把一些运行的代码停下来

  • 本地或者网络请求来记录用户的配置信息或者偏好设置

    updated(){
    	console.log("页面已经更新了",this.msg)
    }
    

• beforDestroy(){}

  • 最后能够访问vm的函数了

  • 保存用户配置信息

    beforeDestroy(){
        console.log("vm销毁之前",this.msg)
    }
    

• destroyed(){}

  • 无法操作vm了

  • 清理定时器之类的

    destroyed(){
        console.log("vm已经销毁",this)
    }
    

组件

• components:{}

  • 全局组件

    <div>
        <el></el>
    </div>
    <script>
    Vue.component("el",{
        template:`<h1>wenben</h1>`//虚拟节点中写模板字符串
    })
    </script>
    

  • 局部组件

    • 组件中也有data属性，但是组件中的data是函数返回值

    new Vue({
        el:"app",
        component:{
    		"mytarget":{
    			data(){
    				return {
    					msg:"hello vue"
                    }
                },
                template:`<div>{{msg}}</div>`//使用data中的返回值
            }
        }
    })
    

  • 组件中也有data，methods等属性

    component:{
    	"myvue":{
    	templat:``,
        methods:{}.
        filters:{},
        computed:{},
        component:{}//这里是component中也能够嵌套compinent
        watch:{},
        directives:{},
    	beforeCreate(){},
    	created(){},
    	beforeMount(){},
    	mounted(){},
    	beforeUpdate(){},
    	updated(){},
    	beforeDestroy(){},
    	destroyed(){}
        }
    }
    

补充一些全局（过滤器等）

• 全局与局部过滤器

  
  <div id="app">
      <p>{{title|fn}}</p>
  </div>
  <script>
      //局部过滤器写法
  	new Vue({
  		el:"#app",
          data:{
  			title:"title"
          }，
          filters:{
  			fn(arg){return arg+"123"}
      	}
      })
      //全局过滤写法
      Vue.filter("fn",(arg)=>{
          return arg+"123"
      })
  </script>
  
  
  

补充一张Vue生命周期图