vue.js-过滤器、指令、事件、语法糖
2019-08-05 本文已影响3人
学的会的前端
小练习
- 需求： 在页面中实时显示当前时间
<body>
<div id = "dataApp">
{{date}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//需求：在页面中实时显示当前时间
var app = new Vue({
el: "#dataApp",
data: {
date: new Date()
},
mounted: function(){
var _this = this; //this代表的就是vue实例
//setInterval(）:定时器
this.timer = setInterval(function(){
_this.date = new Date();
},1000)
},
//在vue 实例销毁之前，必须清楚定时器
beforeDestroy:function(){
//如果定时器存在，就清除定时器
if(this.timer){
clearInterval(this.timer)
}
}
})
</script>
</body>
过滤器
-
Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 对数据进行过滤，经常用于格
式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义
的， 通过给 Vue 实例添加选项 filters 属性来设置 -
过滤器的串联
过滤器：{{ data | filter1 |filter2}} -
过滤器的参数
{{date | formatDate(‘argue’，‘arg2’)}}中的第一个和第二个参数，分别对应过滤器的第二个和第三个参数。例如：
{{date | formatDate(66,99)}}和formatDate: function(value,a,b)中，a=66,b=99 -
对date中的数据进行处理
<div id = "dataApp">
{{date}}
<br/>
<!--过滤器,|后面紧跟过滤器的名字，-->
{{date | formatDate}}
//过滤器
var plusDate = function(value){
return value < 10 ? '0' + value : value //如果value < 10返回 0+value,大于10，返回value
};
var app = new Vue({
el: "#dataApp",
data: {
date: new Date()
},
//定义过滤器,因为过滤器不只是一个，所以生成对象
filters: {
//value是默认属性，必须添加,va
formatDate: function(value){
//将字符串转化成date类型
var date = new Date(value);
var year = date.getFullYear(); //年
var month = plusDate(date.getMonth() + 1);//月
var day = plusDate(date.getDay()); //日
var hours = plusDate(date.getHours()); //时
var min = plusDate(date.getMinutes()); //分
var sec = plusDate(date.getSeconds()) //秒
//将整理好的数据返回
return year + '--' + month + '--' + day + '--' + hours + '--' + min + '--' + sec;
}
},
.....
指令和事件
指令（ Directives ）是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们
快速完成DOM操作。循环渲染。显示和隐藏
- v-text:—————解析文本 和{{ }} 作用一样，只会解析文本，把字符串直接渲染到页面上。
在标签中以属性的形式引入v-text = 'apple',那么在data中定义的apple的内容就会渲染到页面上。
{{apple}}<br/>和<span v-text = "apple"></span>作用一模一样 - v-html:————— 解析html
<span v-html = "banana"></span> - v-bind—————–v-bind 的基本用途是动态更新 HTML 元素上的属性，比如 id 、
class 等。v-bind只能绑定活的属性！
<div class = "{{className}}"></div> <!--拿不到值-->
<div v-bind:class = "className"></div> <!--可以拿得到值-->
- v-on——————它用来绑定事件监听器
<button v-on:click = "count">{{countnum}}</button>
von具体介绍
在普通元素上， von 可以监听原生的 DOM 事件，除了 click 外，还有
dblclick、 keyup, mousemove 等。表达式可以是一个方法名，这些方法都
写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向
的是当前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数
据。
vue中用到的所有方法都定义在methods中，和data平级。
- 指令具体的代码实现
<body>
<div id = "app">
获取message数据：{{message}}<br/>
v-text:解析文本：<span v-text = "apple"></span><br/>
v-text解析HTML，显示的HTML字符串而不是相应地元素渲染<br/>
<div v-text = "banana"></div>
v-html解析HTML:<div v-html = "banana"></div>
v-bind绑定活的属性：<div v-bind:class = "className"></div>
v-bind的语法糖:<div :class = "className"></div>
v-on绑定事件：<button v-on:click = "count">{{countnum}}</button><br/>
v-on绑定事件的语法糖：<button @click = "count">{{countnum}}</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: 'hello!',
apple: '这是一个苹果!',
banana: '<span style = "color: red;">这是红色</span>',
className: 'content',
countnum: 0
},
methods: {
count: function(){
this.countnum = this.countnum + 1
}
}
})
</script>
</body>
语法糖
语法糖是指在不影响功能的情况下 ， 添加某种简洁方法实现同样的效果 ， 从而更加方便程序开发。
v-bind: 可以转换成 :
v-on: 可以转换成@
