vue 学习总结

 //vue 内置指令  v-cloak vue编译结束后移除通常配合[v-cloak]{ display:none;}
// v-once  使用只会渲染一次包括子元素
//css 绑定要使用驼峰camelCase 或者短横干 kebab-case   vue还会自动给特殊css增加前缀如 transform
//v-for 可以遍历对象属性user{name:'张三'，age:'18'}  v-for='value in user' 可以迭代整数 v-for="n in 10" 遍历对象和变量数组都是两个参数
//调用数组的方法也会触发vue重新渲染 但是部分方法不会比如filter，直接通过索引设置是不会触发重新属性的比如 app.books[3]={..}
有时候又一定要用name可以使用Vue.set();
//如果不希望组件复用 可以在元素上定义key 值必须唯一 key="onelyOne"
 //使用$refs 配合ref='domName' 来操作 不需要用jquery   this.$refs.domName.checked;
//v-pre 跳过编译{{}}

 .//事件
   // stop防止冒泡
   // prevent、、
   // capture 捕获事件
   //self，只有事件本身触发才有效
   // once只触发一次
   // 按键修饰符
   // 只有在按键值13的时候调用
   // @keyup.13=“”
   // 自定义按键
  //  vue.config.keyCodes.f1=112
   // 使用 @keyup.f1="xx"
  //  快捷键别名
  //  .enter
   // .tab
   // .delete   (删除和 退格键)
   // .esc
   // .soace
   // .up
   // .down
   // .left
   // .right
  //  可以组合使用
   // .ctrl
   // .alt
   // .shift
   // .meta(mac command键 windows 窗口键)
   // 组合使用例子  @click.ctrl 鼠标加按键
-------------
自定义事件之一  使用总控来操作
html
--------
<div id="app">
    {{msg}}
    <my-a></my-a>
</div>
-------
script
-------
 //组件通信  使用空vue定义事件
    var b=new Vue({});

    Vue.component('my-a',{
        template:"<button @click='onEve'>组件按钮</button>",
        methods:{
            onEve:function () {
                console.log("来自组件my-a的消息")
                b.$emit("m","来自组件my-a的消息");

            }
        }
    });
    var app=new Vue({
        el:"#app",
        data:{
            msg:"vue"
        },
        mounted:function () {
            var _this=this;
            b.$on("m",function (val) {
                console.log("bus自定义事件");
                _this.msg=val;
            })
        },

    })

---------------
组件
-----------
//推荐组件使用命名 小写短横杠命名kabab-case、
//在使用props的时候要用kevav-case命名
//is可以手动挂在组件 包括限制的元素内
//在组件上使用v-model="property"  组件可以用this.$emit("input",参数);来触发自定义事件
例如：{{total}} <my-component v-model="total"></my-component>
//除了$emit 还有父链$parent 直接修改父级组件  this.$parent.message=xxx 
//$children 动态渲染时候子组件是不固定的所以不推荐使用 应该使用 子组件索引ref 和$refs组合使  要避免在计算属性和dom中使用
//监听自定义事件bus.$on('事件名',"参数");  触发this.$emit("事件名","参数")