Other vue syntax:
1. Event monitoring:
The basic syntax of
v-on : v-on: monitored event = "event function"
Syntax sugar: the above format can be changed to: @Listener event = "event function"
problem of passing parameters:
1. When we do not need to pass parameters When, the parentheses () of the following function can be omitted, but note that if you do not write (), a native event event object will also be passed by default
. 2. When we pass multiple parameters, we also need to pass the native event event object , You can use $event to pass as a formal parameter.
Examples:
<div id="app">
<!--不传递参数：默认传递一个原生的event的对象-->
<button v-on:click="button1">点击我1</button>
<!--传递二个参数,如果也要传递event原生事件，则需要$event传递-->
<button @click="button2('张三',$event)">点击我2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
},
methods:{
button1: function (event){
console.log(event);
console.log("button1被点击了")
},
/*函数的简写方式，等同于上边*/
button2(name,event){
console.log(name);
console.log(event);
console.log("button2点击了")
}
}
})
</script>
v-on modifiers:
1.stop: stop bubbling, when the parent of the current event still has an event, you can use this modifier to
prevent the parent event from triggering 2.pervent: prevent the default event, for example: when we door When using the form to submit, you can click the submit button to submit. When we don't want to submit like this, but want to trigger an event, when we call the function to submit ourselves, we can use the perevent modifier to prevent the default event of this button.
3. {keyCode | keyAlias}: Key modifier, which specifies that the key is clicked to trigger the event. For example: @keyup. key = "event": when the specified key is lifted, the event is triggered
4.once: the function is only triggered once
2. v-if、v-else-if、v-else
These three instructions are very similar to the if, else-if, and else we use in js. In vue, these three can decide whether to render or destroy an element or component based on the result of an expression. When the expression is false, the corresponding label will not appear in the DOM at all.
<div id="app">
<span v-if="type">
<label>用户名</label>
<input type="text" placeholder="请输入用户名" key="username-input"/>
</span>
<span v-else-if="!type">
<label>邮箱</label>
<input type="text" placeholder="请输入邮箱" key="email-input"/>
</span>
<button @click="checkType">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
type: true
},
methods:{
checkType(){
this.type = !this.type;
}
}
})
</script>
Note:
1. In the three expressions of v-if, v-else-if, and v-else, the value can be directly obtained from data, without using { {}}, just use it directly.
2. In the above case, after we entered the text in the input box, we clicked to switch the type and found that the text content did not disappear. The reason:When Vue considers performance, it will try to use the already created elements instead of creating new elements. In the case, Vue finds that the original input is not used, and another input is used, then Vue will The original input is used as the input in else. Solution: Add an attribute key to the element that you don’t want vue to reuse. As long as the value of the key is different, it will not be reused. When it is the same, it will still be reused.
3. v-show
Both v-show and v-if have the same function. Both are used to determine whether an element or component is rendered and eliminated. It also requires expressions.
The difference with v-if:
v-if means that when the expression is invalid, the element will not be created at all.
v-show is when the expression is invalid, the display attribute is set to none.
How to choose:
switch multiple times, use v-show
to switch once, use v-if to
use the same usage as v-if, no demonstration
4.v-for traversal
Traverse the array:
<div id="app">
<ul>
<!--不需要索引,在需要使用的地方，可以使用{
{music}}，或者使用bind的方式都可以-->
<li v-for="music in musics">{
{music}}</li>
<li>======================================</li>
<!--需要索引，index就表示了索引，从0开始-->
<li v-for="(music,index) in musics">{
{index+music}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
musics: ['逃爱','四季于你','大天棚','错乱时空']
}
})
</script>
Traverse objects:
<div id="app">
<!--遍历数组-->
<ul v-for="person in persons">
<!--遍历集合：这个地方的person是上边遍历之后的每个person，还可以继续遍历-->
<li v-for="(value,key,index) in person">{
{index}}{
{key}}{
{value}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
persons: [
{
name: "张三",
age: 20
},
{
name: "李四",
age: 25
},
{
name: "王五",
age: 21
}
]
}
})
</script>
We know that vue is a responsive framework. The background data changes and the foreground automatically changes. The corresponding Vue also has some reactive methods for operating the array. Using these methods, the foreground will also change directly:
1.push(): add to the end of the array Element
2.pop(): delete the last element of the array
3.unshift(): add an element to the beginning of the array
4.shift(): delete the first element
5.sort(): sort the array
6.reverse(); Reverse the data in the array
splice(): Magic skill, you can add, delete and modify the array! ! !
Increase: splice (start index, 1,'increased data')
Delete: splice (start index) delete the remaining elements from the start index
Specific deletion: splice (start index, delete several)
Modification: splice (modify the index of the element, 1, the modified content)
Note: Use: The array name [] method is not responsive and cannot be updated in real time!
5.v-model binding form operation
Generally, we can submit the form manually through events, so how can we get the value entered by the user from the form entered by the customer?You can use v-model to bind the form and our data in both directions
<div id="app">
<!--v-bind:value="message" @input="message = $event.target.value"-->
<input type="text" v-model="message">
<textarea v-model="message">
</textarea>
<span>{
{message}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
message: ''
}
})
</script>
The form input tag bound above, the v-model used, is actually a syntactic sugar, which is equivalent to the abbreviation of two tags:
v-bind:value="message": the value of the tag and the message in our data Binding
@input="message = $event.target.value": monitor the input tag, when there is data input, the value of the message in the data will be changed to the value input by the user.
This is two-way binding.
v-model binding redio:
<div id="app">
<input type="radio" name="gender" value="男" v-model="gender">男
<input type="radio" name="gender" value="女" v-model="gender">女
<span>性别是：{
{gender}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
gender: '男'
}
})
</script>
v-model binding checkbox
<div id="app">
<input type="checkbox" name="type" value="篮球" v-model="type">篮球
<input type="checkbox" name="type" value="足球" v-model="type">足球
<input type="checkbox" name="type" value="乒乓球" v-model="type">乒乓球
<input type="checkbox" name="type" value="排球" v-model="type">排球
<span>爱好有：{
{type}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
type: []
}
})
</script>
Note: When it is a checkbox type, this type needs to be an array in data. When we select it, the selected value will be automatically put into the array.
v-model binding select
<div id="app">
<select v-model="type">
<option value="">--请选择--</option>
<option value="篮球">篮球</option>
<option value="篮球">足球</option>
</select>
<span>选择的是：{
{type}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
type: ''
}
})
</script>
There is also a concept on the Vue official website called value binding. In fact, when there is a value in our data, it will be automatically displayed, which is the attribute of v-bind. As long as there is a value in our data, it will be automatically echoed on the page side.
Modifiers of v-model:
1.lazy: Similar to lazy loading, as in the above case, our input will be echoed word by word in the span tag next to it. This is a waste of performance. We can set the lazy modifier,After the input is completed, press Enter or the cursor is removed, it will be bound.
2. Number modifier: Even if the input type we write at the front desk is number, it is still string type when passed to data, so we can use this modifier to convert the value to number when binding the value.
3. Trim modifier: Take out the extra spaces.