这周搭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...