1、vue實現全選和反選，使用vue的computed的set方法實現雙向綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
全選 <input type="checkbox" v-model="checkAll">
<input type="checkbox" v-for="(item,index) in checks" v-model="item.value" :key="index">
</div>
<script src="../node_modules/[email protected]@vue/dist/vue.js"></script>
<script>
// methods和watch 沒有關係
let vm=new Vue({
el:'#app',
data:{
checks:[
{value:true},
{value:false},
{value:true}
]
},
methods:{
},
computed:{
checkAll:{
get(){
return this.checks.every(check=>check.value);
},
set(value){ //雙向綁定數據 會使用set方法
this.checks.forEach(check=>check.value=value);
}
}
}
});
</script>
</body>
</html>
2、vue的生命週期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{a}} {{b}}
</div>
<script src="../node_modules/[email protected]@vue/dist/vue.js"></script>
<script>
let vm=new Vue({
el:'#app',
data:{
a:1,
b:1
},
beforeCreate(){ // 初始化自己的生命週期，並且綁定自己的事件
console.log(this,this.$data)
},
created(){ //如果想調用ajax 可以獲取數據和調用方法
console.log(this.$data);
},
beforeMount(){ // 第一次調用渲染函數之前
console.log('渲染前');
},
mounted(){ //獲取真實dom,因爲頁面已經渲染完了
console.log("渲染後",this.$el.innerHTML);
this.a=100;
this.timer=setInterval(() => {
}, 3000);
},
beforeUpdate(){
this.b=200;
console.log('更新前');
},
updated(){ //一般不要操作數據 可能會導致死循環
console.log('更新後');
},
beforeDestroy(){ //銷燬前 當前實例還可用，
clearInterval(this.timer);
},
destroyed(){ // 實例上的方法、監聽都被移除掉。
}
});
// 調用銷燬
//第一種 路由切換; 第二種：手動銷燬：vm.$destroy();
</script>
</body>
</html>
3、vue的全局組件和局部組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<my-button></my-button>
</div>
<script src="../node_modules/[email protected]@vue/dist/vue.js"></script>
<!--組件化開發的優點 方便協作 方便維護 複用-->
<!--組件的定義 一共有2種 全局組件 局部組件-->
<script>
// 全局組件
/* Vue.component('my-button',{
template:`<button>{{message}}</button>`,
data(){ //爲了每個組件的數據 互不影響
return{
message:'點我啊'
}
}
}); */
let vm=new Vue({ //根實例
el:'#app',
data:{
a:1,
b:1
},
components:{ //子組件在父組件的模板中使用
'myButton':{
template:`<button>{{message}}</button>`,
data(){ //爲了每個組件的數據 互不影響
return{
message:'點我啊'
}
}
}
}
});
</script>
</body>
</html>
4、vue中的 computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{getFullName}}
{{msg}}
</div>
<script src="../node_modules/[email protected]@vue/dist/vue.js"></script>
<script>
// computed 和 methods 的區別 computed有緩存
// computed 和 watch的區別 watch支持異步 watch可以實現一些簡單的功能，先用計算屬性來實現。
let vm=new Vue({
el:'#app',
data:{
firstName:'hello',
lastName:'world',
msg:'vue,',
fullName:''
},
computed:{
getFullName(){ //Object.defineProperty 來實現
console.log('哈哈哈'); //get方法
return this.firstName+this.lastName
}
},
mounted(){
this.fullName();
},
methods:{
getFullName(){
this.fullName=this.firstName+this.lastName
}
},
watch:{
firstName:{
handler(newValue){
setTimeout(() => {
this.getFullName();
}, 1000);
},
immediate:true, //立即執行 可以不再mounted裏面先調用一次
deep:true,
},
lastName(){
this.getFullName();
}
}
});
// 調用銷燬
//第一種 路由切換; 第二種：手動銷燬：vm.$destroy();
</script>
</body>
</html>
