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
随机推荐
- SpringCloud之Security
Spring Security是Spring提供的一个安全框架,提供认证和授权功能,最主要的是它提供了简单的使用方式,同时又有很高的灵活性,简单,灵活,强大. 我个人博客系统采用的权限框架就是Spri ...
- Nginx 的变量究竟是怎么一回事？
之前说了很多关于 Nginx 模块的内容,还有一部分非常重要的内容,那就是 Nginx 的变量.变量在 Nginx 中可以说无处不在,认识了解这些变量的作用和原理同样是必要的,下面几乎囊括了关于 Ng ...
- Linux中GitLab的部署
1.版本控制介绍 版本控制最主要的功能就是追踪文件的变更.它将什么时候.什么人更改了文件的什么内容等信息忠实地了记录下来.每一次文件的改变,文件的版本号都将增加.除了记录版本变更外,版本控制的另一 ...
- 网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...
- 关于UDP的检验和计算(附代码)
关于UDP的检验和计算(附代码) 在下午的学习过程中https://www.cnblogs.com/roccoshi/p/13032356.html 有一张图讲述了UDP的校验方法, 如下: 老师只粗 ...
- Jlink设置正确，但下载程序失败
[图中reset and run]勾选后即每次·下载程序后会自动复位,不需要再在硬件上进行复位 各参数设置正确 但依然下载失败. 原因是需要重新再编译一次,因为上次设置错误,编译后目标未创建! 重新编 ...
- Anroid组件滚动视图(ScollView)简单使用
ScollView应用展示 在xml文件中添加滚动视图 activity_main.xml <?xml version="1.0" encoding="utf-8& ...
- 3.kubernetes的CNI网络插件-Flannel
目录 1.1.K8S的CNI网络插件-Flannel 1.1.1.集群规划 1.1.2.下载软件.解压.软链接 1.1.3.最终目录结构 1.1.4.拷贝证书 1.1.5.创建配置 1.1.6.创建启 ...
- SpringCloud（一）版本选择
Springboot版本 官网:https://spring.io/projects/spring-boot 在官网上 springboot已经更新到最新2.2.6 Spingcloud版本 官网:h ...
- Java中的I/O流全汇总，所有的I/O就一张图
放大再看,注意视力!哈哈 一口吃不成胖子,一点一点的看: 大家都是文化人,拿图要指明出处!!! 头上↑那框,对,就是那 使用的是XMind软件画的,要源文件吗? 在这里:https://gith ...