watch
它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
<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//对象内部的属性监听，也叫深度监听
},
list3: function(val,oldval){
console.log(val)
console.log(oldval)
}
}
}
</script>
克隆
克隆分深度克隆和浅克隆
1.浅克隆
浅克隆之所以被称为浅克隆，是因为对象只会被克隆最外部的一层,至于更深层的对象,则依然是通过引用指向同一块堆内存.
// 浅克隆函数
function shallowClone(obj1) {
let obj2= {};
for ( let i in obj1) {
obj2[i] = obj1[i];
}
return obj2;
}
// 被克隆对象
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
这里当 newObj.c.h里的值改变的时候，oldObj.c.h里的值也会被改变，因为他们的内存指针的位置相同
2.深度克隆
可以用JSON.parse(JSON.stringify(obj))的方式对对象进行深度克隆
也已上面的列子为例
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 }
点击空白处，隐藏DIV
<button @click="togglePanel">点击</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全攻略
转载：https://www.cnblogs.com/libin-1/p/6607945.html
vue 模拟锚点
在vue中用a标签实现锚点定位时，如果路由模式使用的是hash模式的话，如果有相应的路由的话会进行路由跳转。可以通过自定义方法来实现锚点定位。
<a href="javascript:void(0)" @click="goAnchor('#anchor')"> 我是锚点</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 选择器的一个元素。 querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
vue与后台模板引擎“双花括号”冲突时的解决办法
<div id="app"> ${message } </div>
// Vue.config.delimiters = ['${', '}$'];
var app= new Vue({
delimiters: ['${', '}'],
el:'#app',
data:{
message: 'Hello Vue!'
}
});
