IV。イベント修飾子
4.1 .stop
ストップバブリング
htmlコード：
<style>
.heade{
height: 150px;
background:red ;
}
</style>
<div id="app">
<div class="heade" @click="divHeader">
<!-- 使用.stop 阻止冒泡 -->
<input type="button" value="按钮" @click.stop="butHeader" />
</div>
</div>VUEコード：
var vm =new Vue({
el:'#app',
data:{},
methods:{
divHeader() {
console.log("div");
},
butHeader() {
console.log("but")
}
}
})4.2 .prevent
デフォルトの動作を妨げます
htmlコード：
<div id="app">
<a href="www.baidu.com" @click.prevent="linkclick">点击一下，我不想去百度</a>
</div>VUEコード：
var vm =new Vue({
el:'#app',
data:{},
methods:{
linkclick() {
console.log("不去百度，留在页面");
}
}
})4.3 .capture
キャプチャ・トリガイベントを達成
htmlコード：
<style>
.heade{
height: 150px;
background:red ;
}
</style>
<div id="app">
<div class="heade" @click.capture="divHeader">
<input type="button" value="按钮" @click="butHeader" />
</div>
</div>VUEコード：
var vm =new Vue({
el:'#app',
data:{},
methods:{
divHeader() {
console.log("div");
},
butHeader() {
console.log("but")
}
}
})4.4 .self
イベント・ハンドラをトリガする現在の要素を実現するためにのみ
だけその泡立ちの振る舞いを防ぐことができます、それは、バブリングの他の行為を防ぐことはできません。
htmlコード：
<style>
.heade{
height: 150px;
background:red ;
}
</style>
<div id="app">
<div class="heade" @click.self="divHeader">
<input type="button" value="按钮" @click="butHeader" />
</div>
</div>VUEコード：
var vm =new Vue({
el:'#app',
data:{},
methods:{
divHeader() {
console.log("div");
},
butHeader() {
console.log("but")
}
}
})4.5 .once
一回だけトリガー
htmlコード：
<div id="app">
<a href="www.baidu.com" @click.once="linkclick">点击一下，我不想去百度</a>
</div>VUEコード：
var vm =new Vue({
el:'#app',
data:{},
methods:{
linkclick() {
console.log("啊啊啊啊，只能不去一次");
}
}
})4.5カスタムキー修飾
Vue.config.keyCodes。タイトルキー=値
Vue.config.keyCodes.f2=113V.フィルター
共通のフォーマットテキストとして使用することができ
、フィルタは、2つの場所で使用することができます：口ひげとvバインド表現補間
フィルタを複数回呼び出すことができ
htmlコード：
<div id="app">
<p>{{msg | MsgFormat('疯狂','123') | testFormat }}</p>
</div>VUEコード：
Vue.filter('MsgFormat',function(msg,arg,arg2){
//字符串的 replace 方法第一个参数可以写字符串 也可以写正则表达式
return msg.replace(/好/g,arg+arg2)
})
//可以多次调用过滤器
Vue.filter('testFormat',function(msg){
return msg+'==========='
})
var vm = new Vue({
el: "#app",
data: {
msg:'你好我好大家好'
},
methods: {}
}){{名前|名前}}と呼ばれる==フィルタフォーマット==フィルタ
グローバルフィルタ5.1を定義します
単純なケースによる---時刻形式
スルーフィルタVue.filter（）フィルタを定義
htmlコード：
<div id="app">
<div class="container">
<div class="row">
<div class="span12">
<table class="table table-hover">
<thead>
<tr>
<th>
id
</th>
<th>
name
</th>
<th>
createtime
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody v-for="item in list " :key='item.id'>
<!-- 自定义一个方法 将关键字 作为参数传递到方法里-->
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.createtime | dateFormat}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>VUEコード：
var vm = new Vue({
el: "#app",
data: {
list: [{
id: 1,
name: '宝马',
info: '很好',
createtime:new Date()
},
{
id: 2,
name: 'LV',
info: '很贵',
createtime:new Date()
}
]
},
methods: {}
})フィルタ
パラメータ：「DATEFORMAT」：フィルター名
パラメータII：メソッドは、多くのパラメータ持つことができます
が、最初のフィルタパラメータは常にパイプ記号- > |「」を介して送信されるデータを、先行します
Vue.filter('dateFormat',function(dateString,patter=""){//patter一定要传值
// 根据指定的字符串得到特定的时间
var dt=new Date(dateString)
// padStart() 字符串在前面填充
//yyyy-mm-dd 获取年月日 时分秒
var y=dt.getFullYear()
var m=(dt.getMonth()+1).toString().padStart(2,'0')
var d=dt.getDate().toString().padStart(2,'0')
var h=dt.getHours().toString().padStart(2,'0')
var mm=dt.getMinutes().toString().padStart(2,'0')
var ss=dt.getSeconds().toString().padStart(2,'0')
//toLowerCase():将 所有英文字母转换为小写
if(patter && patter.toLowerCase() == 'yyyy-mm-dd'){
return y+'-'+m+'-'+d
}else{
return y+'-'+m+'-'+d+' '+h+':'+mm+':'+ss
}
})5.2カスタムフィルタプライベート
プライベートローカルフィルタは、現在のVMオブジェクト表示制御の領域のみを使用することができます
htmlコード：
<div id="app"></div>
<div id="app2">
<p v-color="'red'" >{{dt | dateFormat}}</p>
</div>VUEコード：
var vm2=new Vue({
el:'#app2',
data:{
dt:new Date()
},
//定义一个 私有过滤器 私有过滤器都具有[过滤器名称]和[处理函数]
//过滤器 采用就近原则
filters:{
dateFormat:function(dt,patter=""){
// 根据指定的字符串得到特定的时间
var dt=new Date(dt)
//yyyy-mm-dd 获取年月日 时分秒
var y=dt.getFullYear()
var m=dt.getMonth()+1
var d=dt.getDate()
var h=dt.getHours()
var mm=dt.getMinutes()
var ss=dt.getSeconds()
//toLowerCase():将 所有英文字母转换为小写
if(patter && patter.toLowerCase() == 'yyyy-mm-dd'){
return y+'-'+m+'-'+d
}else{
return y+'-'+m+'-'+d+' '+h+':'+mm+':'+ss
}
}
}
})VI。ライフサイクルメソッド
Vueのインスタンスから作成され、常に総称ライフサイクルと呼ばれる、イベント、各種を伴う、期間を破壊するために、実行します！
（ライフサイクルイベントである）== ==ライフサイクルフック=機能=ライフサイクルライフサイクルイベント
6.1倍を作成するためのライフサイクル機能
6.1.1 beforeCreate（）
ただ、インスタンスがメモリ内に作成され、この時点では、プロパティとメソッドを初期化する良いデータがありません
6.1.2作成しました（）
OKインスタンスがメモリ内に作成された、データおよび方法は、[OK]を作成されているこの時間は、この時点ではまだテンプレートをコンパイルするために開始されていません
6.1.3 beforeMount（）
この時点では、テンプレートをコンパイルされているが、ページに装着されていません
6.1.4）（マウント
この時点で、私たちは、ページ指定されたコンテナのディスプレイに取り付けられた、テンプレートをコンパイルしています
ライフサイクル機能は、6.2倍を実行します
6.2.1のBeforeUpdate（）
この関数は、状態値のデータでは、この時間は、最新である、ステータス更新の前に行われますが、この時点ではまだ再レンダリングDOMノードに始まっていないので、データは、画面や古い上に表示されます
6.2.2更新（）
この関数を呼び出した後、更新の例として、データは、データ状態での値とのインターフェイスに表示されている更新プログラムを完了した、インターフェイスは再レンダリング良いされています！
破壊時の6.3ライフサイクル機能
6.3.1 beforeDestroy（）
破壊するインスタンスの前に呼び出されます。このステップでは、インスタンスは、まだ完全に利用可能です。
6.3.2破壊（）
Vueのインスタンスを破壊した後に呼び出されます。呼び出しの後、すべてが非結合ます表示Vueのインスタンスを、すべてのイベントリスナーが削除され、すべての子インスタンスが破棄されます