1. Event handler
1.1. Event modifiers
Vue calls modifiers via the directive suffix represented by a dot (.):
.stop modifier : prevents the event from continuing to propagate, that is, it will not trigger the same event bound to other ancestor elements. For example, suppose we have a parent element and a child element, both of which are bound to click events. When the child element is clicked, the click event on the child element will be triggered first, and then the click event on the parent element will be triggered; But if we add the .stop modifier on the child element, when the child element is clicked, only the click event on the child element will be triggered, and the click event on the parent element will no longer be triggered.
. prevent modifier : Prevent browser default behaviors, such as disabling form submission and hyperlink jumps. For example, when we bind the submit event on a form, if we do not want the form to actually be submitted to the back-end server, but to perform some custom operations, we can add the .prevent modifier when binding the submit event, so that we can prevent The default behavior of the form.
.capture modifier : Let the event be triggered from the ancestor element, that is, the event on the ancestor element is triggered first, and then the event on the descendant element is triggered in sequence. For example, when we have a parent element and a child element, both are bound to click events, and the firing order of both is very important. At this time, you can add the .capture modifier to the parent element, so that when clicked When adding a child element, the click event on the parent element will be triggered first, and then the click event on the child element will be triggered to ensure that the two events are executed in the expected order.
.self modifier : The bound event is only triggered when the event is triggered by the element itself. For example, when we bind a click event to a button, and there are other elements inside the button, such as span, i, etc., then if we do not want the click event of the button to be triggered when these internal elements are clicked, we can add .self to the button. Modifier so that the event will only fire when the button itself is clicked.
. once modifier : Only trigger the bound event once, and then automatically unbind. For example, suppose we bind a click event to a button and want the event to be triggered only once. We can add the .once modifier when binding the event. At this time, when the button triggers the click event, the event will be executed once and Automatically unbinding, and subsequent clicks on the button will not trigger the event again.
Usage example:
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>
1.2. Key modifier
Vue allows adding key modifiers to v-on when listening to keyboard events and provides aliases
Usage example:
<input v-on:keyup.enter="submit">
Of course, in addition to the Enter key, there are many other aliases. You can search for them yourself.
1.3. Event bubbling
Before explaining event bubbling, let me first show you what event bubbling is.
As you can see, when we click on the black div, four events will be triggered at the same time. Apply this scenario to our work. Many times, there are too many events on the front end, and user needs will cause our events to overlap from time to time. As a result, such an event bubbles up. If we don't need this, we only need the current event to trigger, and just prevent the bubbling.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<style>
.red{
width: 400px;
height: 400px;
background-color: red;
}
.orange{
width: 300px;
height: 300px;
background-color: orange;
}
.blue{
width: 200px;
height: 200px;
background-color: blue;
}
.black{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<p>冒泡事件</p>
<div class="red" @click="red">
<div class="orange" @click="orange">
<div class="blue" @click="blue">
<div class="black" @click.stop="black"></div>
</div>
</div>
</div>
<p>提交答案</p>
<button @click.once="dosub">提交</button>
<p>按键修饰符</p>
<input v-on:keyup.enter="dosub" />
</div>
</body>
<script type="text/javascript">
// 绑定边界 ES6具体体现
new Vue({
el: '#app',
data() {
return {
f200: 'f200'
};
},
methods: {
red() {
alert("red");
},
orange() {
alert("orange");
},
blue() {
alert("blue");
},
black() {
alert("black");
},
dosub(){
alert("已做完，提交答案");
}
}
})
</script>
</html>
Just add stop after the click event.
1.4. Form value taking
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title>表单</title>
</head>
<body>
<div id="app">
<h1>标题</h1>
<ul>
<li>
<p>vue表单</p>
<label>姓名：</label><input v-model="uname" /><br />
<label>密码：</label><input v-model="upwd" type="password" /><br />
<!-- 将用户的输入值转为 Number 类型 -->
<label>年龄：</label><input v-model.number="age" /><br />
<label>性别：</label>
<input type="radio" v-model="sex" name="sex" value="1" />男
<input type="radio" v-model="sex" name="sex" value="0" />女<br />
<label>爱好：</label>
<div v-for="h in hobby">
<input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{
{h.name}}
</div>
<label>类别：</label>
<select v-model="type">
<option value="-1">===请选择===</option>
<option v-for="t in types" v-bind:value="t.id">{
{t.name}}</option>
</select><br />
<label>备注：</label>
<textarea v-bind:value="mark"></textarea><br />
确认<input type="checkbox" v-model="flag" />
<input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
uname: null,
upwd: null,
age: 10,
sex: 1,
hobby: [{
id: 1,
name: '篮球'
}, {
id: 2,
name: '足球'
}, {
id: 3,
name: '象棋'
}],
hobbies: [],
types: [{
id: 1,
name: 'A'
}, {
id: 2,
name: 'B'
}, {
id: 3,
name: 'C'
}],
type: null,
mark: '学生备注',
flag: false
}
},
computed: {
show: function() {
return !this.flag;
}
},
methods: {
doSubmit: function() {
console.log('doSubmit')
var obj = {
uname: this.uname,
upwd: this.upwd,
age:this.age+10,
sex: this.sex,
hobbies:this.hobbies,
type: this.type,
mark: this.mark,
}
console.log(obj);
}
}
})
</script>
</html>
See what the effect is like
2. Custom components
2.1 Component introduction and definition
Vue components are one of the core concepts in the Vue.js framework, which allow developers to split pages into reusable, independent modules. Components can contain their own templates, styles and logic, making the code more modular, maintainable and reusable.
In addition to Vue's own instructions (v-on|v-model) , Vue also allows the registration of custom instructions, which are divided into global instructions/local instructions according to their scope.
Components can be defined through the Vue.component() method or the components option of the Vue instance. The definition of a component includes its name, template, data, methods, etc.
- local definition
<script>
new Vue({
el: '#liwen',
components: {
"my-button": {
template: "<button>自定义组件</button>"
}
}
})
</script>- global definition
Vue.component('my-button', {
//用来传值的自定义属性
props:['title'],
//模板,模板中写的html代码,在其中可以使用{
{}},及指令等vue元素
template: '<button @click="doClick">{
{title}}: 全局组件</button>',
//注意：在自定义的组件中需要使用函数来定义data
data: function() {
return {
xxx: 0
}
})2.2 Component communication
Vue custom events are designed for communication between components. In Vue, the parent component passes data to the child component through prop. If you want to pass the data of the child component to the parent component, you can bind the custom event.
- Parent Vue instance->child Vue instance, pass data through prop
- Child Vue instance->parent Vue instance, passing data through events
2.2.1 Component passing parameters (parent->child)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件通信——>父传子</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>
<!-- <h3>{
{ts}}</h3> -->
<p>vue组件</p>
<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
<my-button m="文昊"></my-button>
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
components: {
'my-button': {
props: ['m'],
template: '<button @click="doClickMyButton">我是一个自定义组件，被{
{m}}点了{
{n}}次</button>',
data() {
return {
n: 0
};
},
methods: {
doClickMyButton() {
this.n++;
}
}
}
}
});
</script>
</html>
In this code, we pass m to pass parameters and modify the value in our custom attribute
2.2.1 Component passing parameters (child -> parent)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件通信——>子传父</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>
<!-- <h3>{
{ts}}</h3> -->
<p>vue组件</p>
<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
<my-button m="ikun" @three-click="getParam"></my-button>
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
components: {
'my-button': {
props: ['m'],
template: '<button @click="doClickMyButton">我是一个自定义组件，被{
{m}}点了{
{n}}次</button>',
data() {
return {
n: 0
};
},
methods: {
doClickMyButton() {
this.n++;
if (this.n % 3 == 0) {
// 触发自定义组件定义的事件，这里可以传递任意个参数
// 但是触发的事件绑定的函数要与参数个数一致
this.$emit('three-click', this.n, '我们ikun不惹事也不怕事', 'ikun');
}
}
}
}
},
methods: {
getParam(a, b, c) {
console.log(a, b, c);
}
}
});
</script>
</html>
This code implements a parent component to pass properties to a child component, and implements the function of the child component to pass parameters to the parent component through custom events. And use if to judge that every time the button is clicked 3 times, the parameters will be passed.