一、過濾器
1、語法：
Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 對數據進行過濾，
經常用於格式化文本，比如字母全部大寫、貨幣千位使用逗號分隔等。
2、過濾的規則是自定義
的， 通過給 Vue 實例添加選項 filters 來設置
過濾器：{{ data | filter1 |filter2}}
3、實例
需求是 實時顯示當前時間
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</head>
<body>
<div id="aaa">
{{date}} 原始數據
{{date | formatDate}} 過濾後的數據
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var plusDate =function(value){
return value>10?value:'0'+value
}
//判斷傳入的數據是否是個位數，是個位數就補0
var app=new Vue({
el:'#aaa',
data:{
date:new Date(),
},
mounted:function(){
var _this=this
this.timer=setInterval(function(){
_this.date = new Date()
},1000) //設置定時器，一秒輸出一次
},
beforeDestroy:function (){
if(this.timer){
clearInterval(this.timer)
} //在實例銷燬，清除定時器
},
filters:{
formatDate:function(value){
var date =new Date(value)
var year=date.getFullYear()
var month=plusDate(date.getMonth()+1)
var day=plusDate(date.getDate())
var hour=plusDate(date.getHours())
var min=plusDate(date.getMinutes())
var sec=plusDate(date.getSeconds())
return year +'--'+month+'--'+day +' '+hour+':'+min+':'+sec
}
} //在filters對象定義所有過濾器，過濾器formatDate是一個函數，必須的參數是value值，其他參數是 {{date | formatDate(66,69)}} ,過濾器傳入的數據。注意使用過濾器，傳入的參數不用寫value
})
</script>
</body>
</html>4、過濾器的參數
{{date | formatDate(66,99)}} 中的第一個和第二個參數，分別對應過濾器的第二個和
第三個參數
{{date | formatDate(66,99)}} 中的第一個和第二個參數，分別對應過濾器的第二個和 第三個參數 filters:{
formatDate:function(value,a,b){ //formatDate是過濾器的名字，會有其他的過濾器
var date =new Date(value);
var year =date.getFullYear();
var month=plusDate(date.getMonth()+1);
var day=plusDate(date.getDate());
var hours=plusDate(date.getHours());
var min=plusDate(date.getMinutes());
var sec=plusDate(date.getSeconds());
return year +'--'+month+'--'+day+' '+hours+'--'+min+'--'+sec+a+b;
}
},結果會同時輸出ab
我特別容易寫錯month，和Date不加大寫
二、指令和事件
指令（ Directives ）是 Vue 模板中最常用的一項功能，它帶有前綴 v－，能幫我們
快速完成DOM操作。循環渲染。顯示和隱藏
本節目標 v-text , v-html , v-bind , v-on
1、v-text:—————解析文本 和{{ }} 作用一樣
2、v-html:————— 把數據當成html解析
3、v-bind—————–v-bind 的基本用途是**動態更新 HTML 元素上的屬性，比如 id 、
class** 等
4、v-on——————它用來綁定事件監聽器
在普通元素上， v-on 可以監聽原生的 DOM 事件，除了 click 外，還有
dblclick、 keyup, mousemove 等。表達式可以是一個方法名，這些方法都
寫在 Vue 實例的 methods 屬性內，並且是函數的形式，函數內的 this 指向
的是當前 Vue 實例本身，因此可以直接使用 this.xxx 的形式來訪問或修改數
據
vue中用 到的所有方法都定義在methods中
<style>
.transRed{
background-color:red;
height:30px;
}
</style> <div id="abc">
<span v-text='content'></span>
<div v-html='contentHtml'></div>
<div v-bind:class="className"></div>
<button v-on:click="count">{{countNum}}</button>
</div>var app2=new Vue({
el:'#abc',
data:{
content:'fff',
contentHtml:'<span style="color:blue">我是html</span>',
className:'transRed', //提前定義一個transred的屬性
countNum:0
},
methods:{
count:function(){
this.countNum +=1
}//點擊按鈕加一
}
})4、語法糖
語法糖是指在不影響功能的情況下 ， 添加某種簡潔方法實現同樣的效果 ， 從而更加方便程
序開發。
v-bind ——> : (冒號)
v-on ——> @