watch
它用于觀察Vue實(shí)例上的數(shù)據(jù)變動(dòng)晒哄。對(duì)應(yīng)一個(gè)對(duì)象，鍵是觀察表達(dá)式襟企，值是對(duì)應(yīng)回調(diào)嘱么。值也可以是方法名，或者是對(duì)象顽悼，包含選項(xiàng)曼振。
<script type="text/ecmascript-6">
export default {
props: [],
data: function () {
return {
list: [
{
name: '1',
sort: 1
},
{
name: '2',
sort: 2
}
],
list3: ['1', '3']
}
}几迄，
watch:{
list:{
handler:function(val,oldval){
console.log(val)
console.log(oldval)
},
deep:true//對(duì)象內(nèi)部的屬性監(jiān)聽(tīng)，也叫深度監(jiān)聽(tīng)
},
list3: function(val,oldval){
console.log(val)
console.log(oldval)
}
}
}
</script>
克隆
克隆分深度克隆和淺克隆
1.淺克隆
淺克隆之所以被稱(chēng)為淺克隆冰评，是因?yàn)閷?duì)象只會(huì)被克隆最外部的一層,至于更深層的對(duì)象,則依然是通過(guò)引用指向同一塊堆內(nèi)存.
// 淺克隆函數(shù)
function shallowClone(obj1) {
let obj2= {};
for ( let i in obj1) {
obj2[i] = obj1[i];
}
return obj2;
}
// 被克隆對(duì)象
const oldObj = {
name: 'jason',
clothes: [ 'a', 'b', 'c' ],
cup: { thermos: { l: 500 } }
};
const newObj = shallowClone(oldObj);
console.log(newObj.cup.thermos, oldObj.cup.thermos); // { thermos: 500 } { thermos: 500 }
console.log(newObj.cup.thermos === oldObj.cup.thermos); // true
這里當(dāng) newObj.c.h里的值改變的時(shí)候映胁，oldObj.c.h里的值也會(huì)被改變，因?yàn)樗麄兊膬?nèi)存指針的位置相同
2.深度克隆
可以用JSON.parse(JSON.stringify(obj))的方式對(duì)對(duì)象進(jìn)行深度克隆
也已上面的列子為例
const newObj = JSON.parse(JSON.stringify(oldObj));
console.log(newObj.cup.thermos, oldObj.cup.thermos); // { thermos: 500 } { thermos: 500 }
console.log(newObj.cup.thermos === oldObj.cup.thermos); // false
newObj.cup.thermos = 200;
console.log(newObj.cup.thermos, oldObj.cup.thermos); // { thermos: 200 } { thermos: 500 }
點(diǎn)擊空白處甲雅，隱藏DIV
<button @click="togglePanel">點(diǎn)擊</buttton>
<div v-show="visible" ref="main">彈出層</div>
export default {
data () {
return {
visible: false
}
},
methods: {
togglePanel () {
this.visible ? this.hide() : this.show()
},
show () {
this.visible = true
document.addEventListener('click', this.hidePanel, false)
},
hide () {
this.visible = false
document.removeEventListener('click', this.hidePanel, false)
},
hidePanel (e) {
if (!this.$refs.main.contains(e.target)) {
this.hide()
}
}
},
beforeDestroy () {
this.hide()
}
}
vue axios全攻略
轉(zhuǎn)載：https://www.cnblogs.com/libin-1/p/6607945.html
vue 模擬錨點(diǎn)
在vue中用a標(biāo)簽實(shí)現(xiàn)錨點(diǎn)定位時(shí)解孙，如果路由模式使用的是hash模式的話，如果有相應(yīng)的路由的話會(huì)進(jìn)行路由跳轉(zhuǎn)抛人〕诮可以通過(guò)自定義方法來(lái)實(shí)現(xiàn)錨點(diǎn)定位。
<a href="javascript:void(0)" @click="goAnchor('#anchor')"> 我是錨點(diǎn)</a>
<div id="anchor">
methods: {
goAnchor(selector) {
var anchor = this.$el.querySelector(selector)
document.body.scrollTop = anchor.offsetTop; // chrome
document.documentElement.scrollTop = anchor.offsetTop; // firefox
window.pageYOffset = total; //safari
}
}
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個(gè)元素妖枚。 querySelector() 方法僅僅返回匹配指定選擇器的第一個(gè)元素廷臼。如果你需要返回所有的元素，請(qǐng)使用 querySelectorAll() 方法替代盅惜。
vue與后臺(tái)模板引擎“雙花括號(hào)”沖突時(shí)的解決辦法
<div id="app"> ${message } </div>
// Vue.config.delimiters = ['${', '}$'];
var app= new Vue({
delimiters: ['${', '}'],
el:'#app',
data:{
message: 'Hello Vue!'
}
});
