VUE第四天知识点

 Vue 也允许注册自定义指令 
        代码复用和抽象的主要形式是组件 (component 讲到这里再说) 

        v-on v-if v-show v-for v-model v-bind v-else v-once v-text v-html  
        指令目的   作用    操作底层DOM  

        指令 directive  
        v- 开头     驼峰命名 (单词之间  大写字母  变为小写字母 前面加 -  )  newColor   (W3C HTML 不准出现大写字母 )   

        全局定义  Vue.directive(name,{钩子函数})   Vue.filter
        局部定义  directives      filters 

        钩子函数   一个指令定义对象可以提供钩子函数 (操作指令的钩子函数 )
        bind   指令第一次绑定到 元素时候调用     进行一些初始化操作   1 
        inserted  插入   被绑定元素插入父节点时调用  1
        update    更新  数据或者DOM节点 更新    n 
        unbind   只调用一次，指令与元素解绑时调用   1

        钩子函数 有几个参数 (el binding )
        el 绑定的DOM
        binding  指令携带的变量数据
        name 指令名
        value 指令的值  最重要  binding.value
        expression  指令对应的表达式 变量名称
        argument   指令的参数     v-on:click  click args
        modifiers   指令的修饰符   v-on.stop:click  stop 修饰符 

 jquery ajax 来请求数据 

        $.ajax 
        $.get
        $.post
        $.put
        $.delete
        $.load 
        $.options 浏览器预检请求：在复杂请求且跨域的情况下，浏览器会发起options预检请求

        $.ajax({
            url,
            timeout,  // 超时
            beforeSend,  // 发送之前 
            dataType, // 返回数据格式 
            type,   // 请求方式 
            data,   // 参数
            headers,  // 请求头 
            success,  // 请求成功
            fail,    // 请求失败
            complete    // 请求结束 
        })

        跨域   (协议 主机  端口 不一样都会产生跨域)
        jsonp 
        反向代理 
        cors 
        接口联调 


        $.ajax
        fetch
        axios 
        vue-resouces 

 fetch 请求数据  
        fetch 抓取数据  不需要引入 直接调用
        1. 第一个参数是URL 
        2. 第二个参数是可选参数 (data headers)
        3. 使用了 JavaScript Promises 来处理结果/回调:(then 成功的回调 )  (catch 失败的回调 )

        var p = new Promise(function(resolve,reject){
        });
        p.then(result=>{}).catch(err=>{})


        fetch 写法 固定

        fetch(url,options)
        .then(res=>res.json())   // 转为json 格式
        .then(result=>result)    // 成功的回调
        .catch(err=>err)

        POST 提交三种比较重要的 content-type 
        1    'Content-Type': 'application/json'   服务端消息主体是序列化的JSON字符串  除IE 外都支持 
        2    'Content-Type': 'application/x-www-form-urlencoded'   发送到服务器之前，所有字符都会进行编码
        提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 value 都进行了 URL 转码   querystring.stringify 
        var obj = {username:"zkl"}  username=zkl
        3    'Content-Type': 'multipart/form-data'       不对字符编码。在使用包含文件上传控件的表单时，必须使用该值

 axios
        基于 Promise    .then().catch()
        new Promise(function(resolve,reject){})

        axios.get(url[, config])
        axios.post(url[, data[, config]])

        axios({
            url, 
            method,  // 请求方式
            headers,  // 请求头 
            baseURL,  // 接口域名   http://localhost:3000/
            data,    //  post 请求提交的 数据   
            params ,   //  传递查询参数search  ?limit=8
            timeout,  // 超时 
        }).then(result)
        .catch(err)

        暂不能解决 jsonp 
        vue-resource    https://www.cnblogs.com/axl234/p/5899137.html
        
        百度搜索的 https://www.baidu.com/sugrec

  Vue 组件  代码复用和抽象的主要形式是组件  封装代码  
        组件当做小型的 单元实例对象  带有一个名称  (小巧  独立 可复用)
        
        必须包含 一段  HTML标签的 代码块 (css样式 javascript代码)
        显示页面
        展示数据
        修改数据 

        组件当做小型的 vm 实例对象  (组件系统  vue 核心)
        Vue.component(name,options)  全局注册  name 组件名称  options 组件选项参数 
        components  局部注册 

        组件名规则  
        组件名  不能跟 html 标签一致
        mHead  遵循驼峰名 m-head
        组件首字母 可以大写 (单文件组件)
        组件的模板 只能包含一个 根元素 顶层标签 
        组件书写可以使用单标签  

        Vue.extend    使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象
        extend   

        组件的选项参数  包含 之前你在实例写的任何属性 
        data 除外    在组件里面 data 属性必须是一个函数  必须有返回值  必须返回一个对象 

 通过 Prop 向子组件传递数据

        props 属性   用来传递(父组件传给子组件)组件的参数 (动态&静态)   v-bind
        props 只能用来传递数据  不可以修改   
        动态props v-bind 
        静态props 没有 v-bind 

        props 驼峰命名   user-name="zuozuomu"

        props 校验  格式类型
        String    
        Number
        Boolean
        Array
        Object
        Date
        Function
        Symbol  符号 


        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）
        a. props  必须动态props 父组件修改自身的变量  把变化的值传入 子组件  子组件接收动态props 
        b. refs    
        c. 事件中央总线
        d. vuex (最后一天) 

        2. 子组件访问父组件
        
        3. 兄弟组件之间的通信


        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数