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
随机推荐
- Android开源框架选择
Android开源项目推荐之「网络请求哪家强」 Android开源项目推荐之「图片加载到底哪家强」 Android网络框架的封装 Android Volley+OkHttp3+Gson(Jackson ...
- ElasticSearch系列（二）：ElasticSearch Head、Kibana、Elasticsearch-Analysis-Ik安装、使用
1.ElasticSearch Head使用 扩展程序安装插件:ElasticSearch github地址:https://github.com/mobz/elasticsearch-head/ 运 ...
- Request 对象的主要方法
setAttribute(String name,Object):设置名字为 name 的 request 的参数值 getAttribute(String name):返回由 name 指定的属性值 ...
- bat 脚本定时删除备份文件
删除 D:\yswbak 目录下rar类型 6天前的 文件 @echo off forfiles /p D:\yswbak /m *.rar /d -6 /c "cmd /c del @pa ...
- 在kubernetes中搭建harbor，并利用MinIO对象存储保存镜像文件
前言:此文档是用来在线下环境harbor利用MinIO做镜像存储的,至于那些说OSS不香吗?或者单机harbor的,不用看了.此文档对你没啥用,如果是采用单机的harbor连接集群MinIO,请看我的 ...
- python抓取网页引用的模块和类
在Python3.x中,我们可以使用urlib这个组件抓取网页,urllib是一个URL处理包,这个包中集合了一些处理URL的模块,如下:1.urllib.request模块用来打开和读取URLs:2 ...
- Node.js 学习笔记（二）
express是nodejs的一个轻量级框架. express的功能很简单, 功能依赖中间件. 安装:在你的项目文件价里打开cmd窗口,在里面使用npm工具(就是在cmd里输入 npm install ...
- C#数据结构与算法系列（四）：链表——单链表（Single-LinkedList）
1.介绍: 链表是有序的列表,但是它在内存的存储如下: 链表是以节点的方式来存储,链式存储 每一个节点包含data域,next域:指向下一个节点 链表的各个节点不一定是连续存储 链表分带头节点的链表 ...
- ca70a_c++_重载函数_实参类型转换
/*ca70a_c++_重载函数_实参类型转换转换等级,详见P290 编译选择哪个函数版本呢?1.精确匹配2.通过类型提升3.通过标准转换4.通过类类型转换参数匹配和枚举类型重载和const形参 vo ...
- cc21a -c++重载成员操作符*，->,代码示范
cc21a重载成员操作符*,->, *,解引用操作符 ->箭头操作符,用于智能指针类 #include "pointer.h" //pointer.cpp #inclu ...