vue--温故知新

这周搭React顺风车的百度、wordpress都中途跳车了，个中滋味想必不好受，，，team下周开始要做vue的项目，温故总结下，唤醒沉睡记忆！

♣ v-cloak指令：解决变量闪烁问题()

用法：<div id="app" v-cloak> {{msg}}</div>  样式：[v-cloak] { display: none }
♣ v-if="isShow"是插入或删除节点
   v-show="isShow"是隐藏或显示节点
♣ v-bind:data-m="msg"或：data-m="msg"  --绑定属性
♣ v-bind:key="v.id"  绑定一个数据唯一值，用于虚拟DOM算法，优化渲染效率
♣ v-on:click="getA"|@click="getA"、v-on:clidk.stop="getA"(.stop阻止事件冒泡) 
♣ v-once  加了v-once的元素只会渲染一次，之后数据变化也不会渲染
♣ v-pre 通知编译器跳过当前dom元素,节省编译时间
♣ v-ref="ac"  访问dom  vm.$refs.ac
♣ ♣ ♣ 
♣ filters:{ formatPrice:function(val){return "$"+val;} }   组件的
    Vue.filter("formatP",function(val){return '$'+val }  )  全局的
♣ 定义全局组件： var t = Vue.extend({template:"<h1>tit</h1>"},data:function{return{ })
Vue.component("v-p",t)
注：template:"#id" 选择器定义也可以
♣ 父组件中切换子组件：
<component v-if="tn=='a'" :is="a组件名" :data-msg="msg"></component> 
<component v-if="tn=='a1'" :is="a1组件名" :data-msg="msg1"></component> 
<component v-else :is="a组件2" :data-msg="msg2"></component> 
♣ 父子数据互传：
    父传子：<v-son :data="dd"></v-son>   子组件中：props:["dd"]
    子传父：定义一个方法，发送一个事件给父，父监听，一旦触发就可以对数据处理
watch:{sonD: function(){this.$emit("getD",this.msg,this.msg1)}  }
<v-son @getD="get"></v-son>    定义方法：get:function(arguments){ } 
♣ computed选项：定义计算属性(渲染前进行计算)，内部有缓存机制，如果没变化就从缓存取(复杂的数据处理可以放到这里)
<p>{{content}}</p>
computed:{content:function(){return this.val+"111"}}
♣ 定义一个处理关键字的指令：
        Vue.directive('keyword', function(el, obj) {  //el是所在标签
            let tagName = obj.arg || 'i';  //obj.arg是标签名“strong”
            let k = obj.value;             //obj.value是要替换的值“k”
            let text = el.textContent;  //获取到文本
            let reg = new RegExp(k, 'g');  //全局匹配k
            el.innerHTML = text.replace(reg, function(all) {  //传入一个回调，返回的就是需要替换的内容
                let color = 'blue';
                return `<${tagName} style="color:${color}">${all}</${tagName}>`;   //利用``字符串模板拼接所需显示的样式
            });
        });

♣ $route对象：$route.params   $route.query  -->hash/path/fullPath/name...