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
随机推荐
- k8s学习-文档&概念
1.文档大全 kubernetes objects文档(yaml文件编写): https://kubernetes.io/docs/concepts/overview/working-with-obj ...
- 滴滴HBase大版本滚动升级之旅
桔妹导读:滴滴HBase团队日前完成了0.98版本 -> 1.4.8版本滚动升级,用户无感知.新版本为我们带来了丰富的新特性,在性能.稳定性与易用性方便也均有很大提升.我们将整个升级过程中面临的 ...
- 4-react 组件之间传值。
1.传值: 都是使用props和state结合得方式进行组件之间得传值 再react中传值得话是父子组件之间得传值,一般会把父组件中得state值通过props传给子组件,再子组件中使用props进行 ...
- 学习第一个python程序
打印9*9惩罚表 for i in range(1,10): for j in range(1,i+1): print(str(j)+"*"+str(i)+"=" ...
- 有没有人想和我一起编写 Clear Writer 的？
合作内容 程序编写 了解 JS.HTML.CSS 等基础前端技能,了解 Electron 开发. 翻译 熟练运用一门外语(中文英文除外),书面表达过关. 报酬 在 Github 上本项目里面的 REA ...
- 解决错误【selenium.common.exceptions.SessionNotCreatedException】
以前能用,突然不能用了,是浏览器版本可能升级了,与原来的weddriver驱动版本不符合 解决办法:1.更新浏览器驱动, 2.降低浏览器版本
- 一篇看懂Docker
松勤教育2020.4.20 我要分享 Docker 是什么? Docker 属于 Linux 容器的一种封装,提供简单易用的容器使用接口.它是目前最流行的 Linux 容器解决方案. Dock ...
- MySQL 视图 事务 索引 外连接
视图 1.定义 select 语句的结果集,是一张虚拟的表2.创建视图语句create view 视图名 as select语句3.查看视图show views;4.使用视图select * from ...
- c++运算符重及其调用
本文参考自:https://blog.csdn.net/lisemi/article/details/93618161 运算符重载就是赋予运算符新功能,其本质是一个函数. 运算符重载时要遵循以下规则: ...
- JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...