Vue基本使用---对象提供的属性功能
一 过滤器
过滤器就是vue允许开发者自定义的文本格式化函数，
可以使用在两个地方：输出内容和操作数据中。
1.1 定义过滤器的两种方式
1.1.1 使用Vue.filter()进行全局定义
Vue.filter("RMB1", function(v){
//就是来格式化(处理)v这个数据的
if(v==0){
return v
}
return v+"元"
})
1.1.2 在Vue对象中通过filters属性类定义
var vm = new Vue({
el:"#app",
data:{},
filters:{
RMB2:function(value){
if(value==''){
return;
}else{
return '¥ '+value;
}
}
}
});
1.2 计算和监听属性
监听属性，可以帮助我们侦听data中某个数据的变化，从而做相应的自定义操作。
监听属性时一个对象，它的键时要监听的对象或者变量，值是一个函数，当监听的data数据发送变化时，会自定义执行对应的函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<button @click="num++">按钮</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {num: 23,},
watch: {
//num发生变化的时候，要执行的代码,num必须是data中的键
num: function (newval, oldval) {
console.log("num已经发生变化了！", this.num)
},
}
})
</script>
</body>
</html>
二 Vue 对象的生命周期
每个vue 对象在创建时都要经过一系列的初始化过程。在这个过程中vue.js会自动运行一些叫做生命周期的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。
2.1 了解数据生成、加载、更新的过程
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<button @click="num++"> 按钮</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {num: 0},
beforeCreate: function () {
console.log("beforeCreate,vm对象尚未创建,num=" + this.num);
this.name = "zhangsan"; //此时没有this对象，设置name是无效的
},
created: function () {
console.log("created,vm对象创建完成,设置好了要控制的元素范围,num=" + this.num); // 0
this.num = 20;
},
beforeMount: function () {
// this.$el 就是我们上面的el属性了，$el表示当前vue.js所控制的元素#app
console.log(this.$el.innerHTML);
console.log("beforeMount,vm 对象尚未把data数据显示到页面中，num=" + this.num);
},
mounted: function () {
console.log(this.$el.innerHTML);
console.log("mounted,vm对象已经把data数据显示到页面中，num=" + this.num);
},
beforeUpdate: function () {
console.log(this.$el.innerHTML);
console.log("beforeUpdate,vm对象尚未把更新后的data数据显示到页面中，num=" + this.num);
},
updated: function () {
console.log(this.$el.innerHTML);
console.log("updated,vm对象已经把更新后的data数据显示到页面中，num=" + this.num);
},
})
</script>
</body>
</html>
效果如下：
点击按钮使数据更新后
2.2 总结
在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。
另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created
三 阻止事件冒泡和刷新页面
3.1 阻止事件冒泡
通过 设置@click.stop来阻止事件冒泡
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.box1 {
width: 200px;
height: 200px;
background: #ccc;
} .box2 {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div id="app">
<div class="box1" @click="func1">
<!-- @click.stop来阻止事件冒泡 -->
<div class="box2" @click.stop.prevent="func2"></div>
</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {
func1: function () {
console.log("box1")
},
func2: function () {
console.log("box2")
}
}
})
</script>
</body>
</html>
3.2 阻止表单提交和页面刷新
通过设置 @click.prevent来阻止表单提交
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<form action="">
<input type="text">
<input type="submit">
<!-- @click.prevent来阻止表单提交 -->
<input type="submit" value="提交02" @click.prevent="func3">
</form>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {
func3: function () {
console.log("页面不刷新时执行点击提交的函数")
},
}
})
</script>
</body>
</html>
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()进行全局定义 示例: < ...
- day77 vue对象提供的属性功能
目录 一.过滤器 二.计算属性(computed) 三.侦听属性(watch) 四.vue对象的生命周期 五.阻止事件冒泡和刷新页面 六.综合案例-todolist 一.过滤器 定义:就是vue允许开 ...
- Vue通过Blob对象实现导出Excel功能
不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Exc ...
- vue watch关于对象内的属性监听
vue可以通过watch监听data内数据的变化.通常写法是: data: { a: 100 }, watch: { a(newval, oldVal) { // 做点什么... console.lo ...
- 组件 computed 与 vuex 中 getters 的使用，及 mapGetters 的使用，对象上追加属性，合并对象
vue 是响应式的数据,这一点相当的方便我们的操作,但有些错误的操作方法会 vue 的响应无效 除此之外我们还要了解 vue.set() 和 Object.assgin() 的使用 vue.set() ...
- 02 Vue之vue对象属性功能&axios数据请求实现
1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...
- VUE（vue对象的简单属性）
一:全局过滤器和局部过滤器 ps:不管是局部过滤器还是全局过滤器,一定都要有renturn 返回 <!DOCTYPE html> <html lang="en"& ...
随机推荐
- mac php apache mysql 集成环境 的软件
http://xclient.info/s/mamp-pro.html?t=4e60e3c234937f46b33e6b15eeafeb5ee326afa4 MAMP Pro 5.1 集成web服务器 ...
- python HTMLTestRunner.py
Mac下HTMLTestRunner.py存放路径: -/anaconda/lib/python3.6/site-packages/HTMLTestRunner.py 已经更改,python3可以直接 ...
- Javascript继承机制的设计思想
转自:http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.htm ...
- HTML5按比例缩略图片并上传的实例
<!DOCTYPE HTML PUBLIC> <html> <head> <meta charset="utf-8"> <sc ...
- QQ中的国家城市数据。
在QQ安装目录可以找到loclist.xml文件 C:\Program Files\Tencent\QQ\I18N\2052 以上是中文版,若需要英文版,可安装国际版...在1033目录 code都是 ...
- MySQL函数及用法示例
(一) 1.字符串函数ascii(str) 返回字符串str的第一个字符的ascii值(str是空串时返回0) mysql> select ascii('2'); -> 50 ...
- 添加自己的discuz 的积分策略
在参考了网上的一些文章和discuzx开发手册,开始操作:1.在数据库表pre_common_credit_rule增加一条记录,rulename填“填写推荐人”,action填“txtjr”(跟下面 ...
- 理解ServletRequest和ServletResponse
博客地址:http://blog.51cto.com/lavasoft/275586
- 2015年传智播客JavaEE 第168期就业班视频教程day45-ERP项目-0107-其他子系统
一套ERP系统中一定会有CRM,不可能说我所有数据都是散着放的,你想用就随便写一个.你出去和人聊,一定得说我这里有什么有什么,然后你就可以和人说你做的是进销存.人家要问CRM或者说财务系统你就说那不是 ...
- UNITY_INITIALIZE_OUTPUT宏
UNITY_INITIALIZE_OUTPUT宏 UNITY_INITIALIZE_OUTPUT(type,name) –此宏用于将给定类型的名称变量初始化为零.在使用旧版标准所写的Shader时,经 ...