day77 vue对象提供的属性功能
一、过滤器
定义：就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中
易错点：全局是filter，局部是filters
<div id="d1">
<p>{{price|format}}</p>
</div>
<script>
// 全局过滤器，可以在任意位置使用，四舍五入
Vue.filter('format',function (money) {
return money.toFixed(2)
})
let vm = new Vue({
el:'#d1',
data:{
price:1.055111
},
filters:{
// 局部过滤器，只能在当前vm对象内使用
format:function (money) {
return money.toFixed(3)
}
}
})
</script>
二、计算属性（computed）
当我们需要数据进行某种操作加工，就可以用到计算属性
ps：计算属性的函数必须要有返回值
<div id="d1">
<input type="text" v-model="num1">+
<input type="text" v-model="num2">=
<span>{{total}}</span>
</div>
<script>
let vm = new Vue({
el:"#d1",
data:{
num1:0,
num2:0,
},
computed:{
total(){
return parseFloat(this.num1) + parseFloat(this.num2);
}
}
})
</script>
三、侦听属性（watch）
侦听data中的某个数据，当这个数据发生变化了，就执行某些自定义操作
侦听属性一般是一个对象（键值对），他的键通常是一个对象或者变量，值一般是函数，当侦听的data数据发生变化，就会自动执行后面的函数，这个函数在调用的时候会自动传入两个参数，第一个是变化前的值，第二个是变化后的值。
<div id="app">
<p @click="num++">{{num}}</p>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
num:0
},
watch:{
// v1是变化之前的值，v2是变化之后的值
num(v1,v2){
if(this.num>=5){
this.num=5
}
}
}
})
</script>
四、vue对象的生命周期
每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。
beforeCreate（创建前）
- 此时vm对象还没创建，内部的属性，方法一概没有
created（创建后）
- vm对象创建完成，内部的方法（watch，filters。。），属性（data）已经完成实例化，但是此时还未挂载，所以vm对象范围还没有创建（el）
beforeMount（挂载前）
页面还没有被展示但是dom操作已经完成
<div id='app'>{{msg}}</div>
mounted（挂载后）
数据展示到页面上
<div id='app'>{{123}}</div>
beforeUpdate（数据更新前）
- 在数据跟新的时候发生调用，在新的dom渲染和打补丁之前，这里执行的代码不会重新触发数据更新
update（数据更新后）
- dom操作已经渲染完毕，但是这个状态应该避免，如果这里触发了数据更新，就会无限重复这个更新
beforeDestroy（销毁前）
- 实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed（销毁后）
- 所有实例被销毁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
num:0
},
beforeCreate:function(){
console.log("beforeCreate,vm对象尚未创建,num="+ this.num); //undefined
this.name=10; // 此时没有this对象呢，所以设置的name无效，被在创建对象的时候被覆盖为0
},
created:function(){
console.log("created,vm对象创建完成,设置好了要控制的元素范围,num="+this.num ); // 0
this.num = 20;
},
beforeMount:function(){
console.log( this.$el.innerHTML ); // <p>{{num}}</p>
console.log("beforeMount,vm对象尚未把data数据显示到页面中,num="+this.num ); // 20
this.num = 30;
},
mounted:function(){
console.log( this.$el.innerHTML ); // <p>30</p>
console.log("mounted,vm对象已经把data数据显示到页面中,num="+this.num); // 30
},
beforeUpdate:function(){
// this.$el 就是我们上面的el属性了，$el表示当前vue.js所控制的元素#app
console.log( this.$el.innerHTML ); // <p>30</p>
console.log("beforeUpdate,vm对象尚未把更新后的data数据显示到页面中,num="+this.num); // beforeUpdate----31
},
updated:function(){
console.log( this.$el.innerHTML ); // <p>31</p>
console.log("updated,vm对象已经把过呢更新后的data数据显示到页面中,num=" + this.num ); // updated----31
},
});
}
</script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<button @click="num++">按钮</button>
</div>
</body>
</html>
总结：
在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。
另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created
五、阻止事件冒泡和刷新页面
绑定事件的时候添加.stop、.prevent
<div id="app" style="width: 100px;height: 100px;background-color: red" @click="show('box1')">
<div style="background-color: black;height: 80px;width: 80px" @click.stop="show('box2')"></div>
</div>
<a href="https://www.mzitu.com/" @click.prevent.stop="show(123)" >百度</a>
<script>
let vm = new Vue({
el:'#app',
methods:{
show(message){
alert(message)
}
}
})
</script>
六、综合案例-todolist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script src="/vue/vue.js"></script>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" v-model="msg" id="txt1" class="inputtxt">
<input type="button" @click="add" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">
<!-- <!– javascript:; # 阻止a标签跳转 –>-->
<!-- <li>-->
<!-- <span>学习html</span>-->
<!-- <a href="javascript:;" class="up"> ↑ </a>-->
<!-- <a href="javascript:;" class="down"> ↓ </a>-->
<!-- <a href="javascript:;" class="del">删除</a>-->
<!-- </li>-->
<!-- <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>-->
<!-- <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>-->
<li v-for="li,index in li_list">
<span>{{li}}</span>
<a @click="up(index)">↑</a>
<a @click="down(index)">↓</a>
<a @click="del(index)">删除</a>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el:'.list_con',
data:{
msg:'',
li_list : ['学习html','学习css','学习python']
},
methods:{
add(){
if(this.msg==""){
return false;
}
this.li_list.push(this.msg);
this.msg='';
},
up(index){
if(index==0){
return false;
}
// 这里删除得到的是一个数组，因为可能删除多个
let message = this.li_list.splice(index,1)
this.li_list.splice(index-1,0,message[0])
},
down(index){
if(index==this.li_list.length){
return false;
}
let message = this.li_list.splice(index,1)
this.li_list.splice(index+1,0,message[0])
},
del(index){
this.li_list.splice(index,1)
}
}
})
</script>
</body>
</html>
day77 vue对象提供的属性功能的更多相关文章
- Vue (二) --- Vue对象提供的属性功能
--------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...
- vue 对象提供的属性功能、通过axio请求数据(2)
1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...
- Vue对象提供的属性功能
一. 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种: 1. 使用Vue.filter()进行全局定义 示例: < ...
- Vue基本使用---对象提供的属性功能
一 过滤器 过滤器就是vue允许开发者自定义的文本格式化函数, 可以使用在两个地方:输出内容和操作数据中. 1.1 定义过滤器的两种方式 1.1.1 使用Vue.filter()进行全局定义 Vue. ...
- VUE（vue对象的简单属性）
一:全局过滤器和局部过滤器 ps:不管是局部过滤器还是全局过滤器,一定都要有renturn 返回 <!DOCTYPE html> <html lang="en"& ...
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
- 02 Vue之vue对象属性功能&axios数据请求实现
1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...
- vue中computed计算属性与methods对象中的this指针
this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和c ...
- vue 数组中嵌套的对象添加新属性--页面更新
vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735
随机推荐
- 为什么阿里巴巴Java开发手册中不允许魔法值出现在代码中？
在阅读<阿里巴巴Java开发手册>时,发现有一条关于关于常量定义的规约,具体内容如下: 图中的反例是将数据缓存起来,并使用魔法值加链路 id 组成 key,这就可能会出现其他开发人员在复制 ...
- 无监督LDA、PCA、k-means三种方法之间的的联系及推导
\(LDA\)是一种比较常见的有监督分类方法,常用于降维和分类任务中:而\(PCA\)是一种无监督降维技术:\(k\)-means则是一种在聚类任务中应用非常广泛的数据预处理方法. 本文的 ...
- nacos部署注意点
官方Naming Configuration Service https://nacos.io/zh-cn/docs/deployment.html 划重点 单机部署 单机部署默认嵌入式存储数据 支持 ...
- redis 深入理解redis 主从复制原理
redis 主从复制 master 节点提供数据,也就是写.slave 节点负责读. 不是说master 分支不能读数据,也能只是我们希望将读写进行分离. slave 是不能写数据的,只能处理读请求 ...
- python反向遍历一个可迭代对象
我们通常情况下都是正向遍历一个列表,下面是一种简单的反向遍历一个列表的方式. ## 正向遍历 >>>A = [9, 8, 7] >>>for index, a in ...
- webpack简单笔记
本文简单记录学习webpack3.0的笔记,已备日后查阅.节省查阅文档时间 安装 可以使用npm安装 //全局安装 npm install -g webpack //安装到项目目录 npm insta ...
- 10、一个action中处理多个方法的调用第二种方法method的方式
在实际的项目中,经常采用现在的第二种方式在struct.xml中采用清单文件的方式 我们首先来看action package com.bjpowernode.struts2; import com.o ...
- Jenkins入门-环境搭建(1)-转
因为Jenkins的环境搭建比较简单,本来不想来介绍,但是发现有些入门小朋友,从各种网站上下载的各种安装包来搭建,最后导致出现了各种千奇百怪的问题,介于这种情况下我决定还是来写一下Jenkins的环境 ...
- 深入理解JVM（③）虚拟机的类加载时机
前言 Java虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这个过程被称为虚拟机的类加载机制. 类加载的时机 一个类型 ...
- 暑假集训Day2 互不侵犯（状压dp）
这又是个状压dp (大型自闭现场) 题目大意: 在N*N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. ...