<!DOCTYPE html>
<html lang="zh-CN">
<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>element-ui</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div style="width: 800px;">
<h1>表單修飾符</h1>
<el-form :model="form" size="small" label-width="120px">
<el-form-item label="lazy修飾符">
<el-col :span="10">
<input type="text" v-model.lazy="form.value1"></input>
</el-col>
<el-col :span="8" :offset="2">{{form.value1}}</el-col>
</el-form-item>
<el-form-item label="trim修飾符">
<el-col :span="10">
<input v-model.trim="form.value2"></input>
</el-col>
<el-col :span="8" :offset="2">{{form.value2}}</el-col>
</el-form-item>
<el-form-item label="number修飾符">
<el-col :span="10">
<input v-model.number="form.value3"></input>
</el-col>
<el-col :span="8" :offset="2">{{form.value3}}</el-col>
</el-form-item>
</el-form>
<h1>事件修飾符 </h1>
<div style="height: 80px; margin-bottom: 10px; background-color: #eee;" @click="myMothod('點擊div')">
<el-button @click="myMothod('點擊button')">正常點擊</el-button>
<el-button @click.stop="myMothod('點擊button')">.stop阻止事件冒泡（點擊子不影響父）</el-button>
</div>
<div style="height: 80px; background-color: #eee;" @click.self="myMothod('點擊div')">
<el-button @click="myMothod('點擊button')">.self只觸發自身事件（父和子的點擊事件都是獨立的）</el-button>
</div>
<div><a href="http://www.baidu.com" @click.prevent="myMothod('點擊鏈接')">.prevent阻止默認事件（鏈接不跳轉）</a></div>
<el-button @click.once="myMothod('點擊button')">.once只能用一次</el-button>
<div style="height: 80px; margin-bottom: 10px; background-color: #eee;" @click.capture="myMothod('點擊div')">
<el-button @click="myMothod('點擊button')">.capture修改冒泡機制（從父到子）</el-button>
</div>
<div style="height: 80px; background-color: #eee; overflow: auto;" @scroll.passive="myMothod('滾動div')">
當我們在監聽元素滾動事件的時候，<br>會一直觸發onscroll事件，<br>在pc端是沒啥問題的，<br>但是在移動端，<br>會讓我們的網頁變卡，<br>因此我們使用這個修飾符的時候，<br>相當於給onscroll事件整了一個.lazy修飾符
</div>
<my-component @click.native="myMothod('點擊組件')"></my-component>
<h1>鼠標按鈕修飾符</h1>
<div @click.right="myMothod('右鍵點擊')">右鍵點擊觸發</div>
<h1>鍵值修飾符</h1>
<input v-model="value" @keydown.ctrl.enter="myMothod('ctrl+enter')" size="100"
style="margin-bottom: 10px;"></input>
<input v-model="value2" @keydown.ctrl.enter.exact="myMothod('ctrl+enter')" size="100"></input>
</div>
</div>
<script>
Vue.component('myComponent', {
template: '<div style="background-color:#eee;"><h4>這是一個通過Vue.component創建出來的組件</h4><p>必須使用.native來修飾組件的click事件，<br>可以理解爲該修飾符的作用就是把一個vue組件轉化爲一個普通的HTML標籤，<br>注意：使用.native修飾符來操作普通HTML標籤是會令事件失效的</p></div>'
});
new Vue({
el: "#app",
data: {
form: {
value1: "",
value2: "",
value3: ""
},
value: "同時按下ctrl+enter時生效",
value2: "只有同時按下ctrl+enter時才生效（按多功能鍵無效）"
},
methods: {
myMothod(val) {
console.log(val);
}
}
})
</script>
</body>
</html>
