<!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/vue@2.5.16/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>
3400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
