过滤器
处理数据格式，在双花括号插值和v-bind中使用
// 局部注册：只适用于当前vm对象
<div id="app">
<!-- 3. 调用过滤器 -->
<p>{{ msg | upper | abc }}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'kfc'
},
// 1. 设置vm的过滤器filters选项
filters: {
upper: function(v) {
// 2. 在过滤器的方法中操作数据并返回结果
return v.toUpperCase();
}
}
});
</script>
// 全局注册的过滤器，不同的vm对象都可以使用
<div id="app">
<!-- 3. 调用过滤器: (msg会自动传入到toUpper中)-->
<p>{{msg | toUpper}}</p>
</div>
<script src="./vue.js"></script>
<script>
// 1. 定义全局过滤器
Vue.filter('toUpper', (value) => {
console.log(value);
// 2. 操作数据并返回
value = value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
console.log(value);
return value;
});
new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
}
});
</script>
ref操作dom
<div id="app">
<!-- 1. 给要操作的DOM元素设置ref属性 -->
<input type="text" ref="txt">
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
// mounted当页面加载完毕执行
mounted() {
console.log(this.$refs.txt);
// 2. 用this.$refs.属性 去操作DOM
this.$refs.txt.focus();
},
});
</script>
购物车小案例
<body>
<div id="app">
<input type="checkbox" value="checkedAll" v-model="checkedAll" @change="handleAllChange">
<ul>
<li v-for="good in goods">
<!-- 注意：这里value一定是动态绑定的 -->
<input type="checkbox" :value="good" v-model="checkgroup" @change="handleSgChange">
{{good}}
<!-- 注意这里要把good整个传过去，不能只传数量，因为只传数量不能修改原数组 -->
<button @click="handleCount(good,-1)">del</button>
{{good.count}}
<button @click="handleCount(good,1)">add</button>
</li>
</ul>
<p>总金额计算：<span>{{handleSum()}}</span></p>
</div>
<script src="vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
goods:[
{name:"宝马",price:"10",count:"2",id:"1"},
{name:"奥迪",price:"20",count:"3",id:"2"},
{name:"劳斯莱斯",price:"30",count:"2",id:"3"},
],
checkgroup:[],
checkedAll:false,
},
methods: {
handleSum() {
let sum=0;
for(let i in this.checkgroup){
sum+=this.checkgroup[i].price*this.checkgroup[i].count;
}
return sum;
},
handleAllChange(){
//全选框
if(this.checkedAll){
//勾选状态
this.checkgroup=this.goods;
}else {
//未勾选状态
this.checkgroup=[];
}
},
handleSgChange(){
//每一个选框
if(this.checkgroup.length===this.goods.length){
this.checkedAll=true;
}else {
this.checkedAll=false;
}
},
handleCount(good,num){
if(num===1){
good.count++;
}else {
good.count--;
if(good.count<1){
good.count=1;
}
}
}
},
})
</script>
</body>
生命周期总结
beforeCreate( )// 该钩子函数执行时，组件实例还未创建.
created()//组件初始化完毕，各种数据可以使用，可以使用ajax发送异步请求获取数据
beforeMounted()// 未执行渲染，更新，虚拟DOM完成，真实DOM未创建
mounted()// 初始化阶段结束，真实DOM已经创建，可以发送异步请求获取数据,也可以访问dom元素
beforeUpdate()//更新前，可用于获取更新前各种状态数据
updated()//更新后执行该钩子函数，所有的状态数据是最新的。
beforeDestroy() // 销毁前执行，可以用于一些定时器的清除。
destroyed()//组件已经销毁，事件监听器被移除，所有的子实例也会被销毁。
