VUE 整理学习

/** 常用 */
new Vue({
    el : 'id',            //作用域
    data:{          	  //可调用的数据
        a:1,
        b:[]，
        items:[]
    },
    methods:{             //可调用的方法
    },
    watch:{               //设置对象监听的方法
        items:{
            handler:function(val,oldVal){
            },
            deep:true     //深层处理
        }
    },
    props:['msg'],         //(首先这个是写在子组件声明上的)prop 是父组件用来传递数据的一个自定义属性。
								父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

    events：{          //父子组件中传递 用这个属性 声明事件方法
        事件名：function（）{
        }
    },
    components:{App}   //注册组件（局部的）
filters: {        //过滤器              
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
/** 重要的使用 */
export default{} 相当于 当前页面 new Vue({})花括号里的参数方法 等
========================================================================================================================
父传子 ==========
    父中用子组件，属性 = 子组件props的参数名就可以传递
props  ：（子中 new Vue声明的参数）
    	    $brasdcast：广播事件，事件向下传导给所有后代
            $brasdcast('方法名','参数')
子传父    ==========
   子组件定义 $emit（调用父中的事件）： 触发事件 向父传递                          	  (这种方式 我认为是  父子组件中的 方法功能必须完全一直才可以)
            	$emit('父中自定义的方法名'，'参数')
    $dispatch: 派发事件，事件沿着父链冒泡
            	$dispatch('父中自定义的方法名'，'参数')


========================================================================================================================
自定义事件
v-on:自定义事件名 = "方法名" //如果 子传父 用$emit 用这个    父可以接收到              
=========================================================================================
v_text = {{}}     渲染数据
v-html          渲染页面
v-if             原理：不渲染
v-show          原理：display
v-for                 列表循环渲染

v-on:           事件绑定
                    v-on:click = @click
v-bind :           属性绑定
                    v-bind:src
                    v-bind:class = :class
                    例：v-bind:class ="{finishClass:item.ifFinish}"//finishClass为样式  item.ifFinish为是否显示样式的判断依据
v-on:keyup = @keyp （键盘按键事件）
=========================================================================================
事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。

on:click.stop="doThis"           // 阻止单击事件冒泡
v-on:submit.prevent="onSubmit"  //提交事件不再重载页面
v-on:click.stop.prevent="doThat"//修饰符可以串联
v-on:submit.prevent          //只有修饰符
v-on:click.capture="doThis"    //添加事件侦听器时使用事件捕获模式
v-on:click.self="doThat"      //只当事件在该元素本身（而不是子元素）触发时触发回调
v-on:click.once="doThis"      //事件至少触发一次，2.1.4版本新增
==================================================================================================================== 
按键修饰符
v-on:keyup.13="submit"
v-on:keyup.enter="submit"
 @keyup.enter="submit"
    .enter
    .tab
    .delete (捕获 "删除" 和 "退格" 键)
.esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta

form 修饰符
    .lazy      v-model.lazy="msg"    //在 "change" 而不是 "input" 事件中更新
    .number       v-model.number="age"   //将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）
    .trim     v-model.trim="msg"    //自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入    
    =========================================================================================
    表单
复选框：绑定一个数组  点击复选框 会不断往 数组中添加对应的value值
=========================================================================================
自定义指令
//1 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
    // 当绑定元素插入到 DOM 中。
    inserted: function (el) {
        // 聚焦元素
        el.focus()
    }
})
//2 注册局部自定义指令
new Vue({
    el: '#app',
    directives: {
        // 注册一个局部的自定义指令 v-focus
        focus: {
            // 指令的定义
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        }
    }
})

//钩子
钩子函数
指令定义函数提供了几个钩子函数（可选）：
   bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
   inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
   update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
   componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
   unbind: 只调用一次， 指令与元素解绑时调用。
钩子函数参数
//钩子函数的参数有：
el: 指令所绑定的元素，可以用来直接操作 DOM 。
   binding: 一个对象，包含以下属性：
   name: 指令名，不包括 v- 前缀。
   value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
   oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
   expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
   arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
   modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
   vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
   oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。