Home >Web Front-end >JS Tutorial >Vue built-in command methods and events
This time I will bring you Vue’s built-in command methods and events. What are the precautions for using Vue’s built-in command methods and events? Here is a practical case, let’s take a look.
Directives are special attributes with v- prefix. Their responsibility is to reactively apply the associated effects to the DOM when the value of the expression changes.
Built-in instructions
1. v-bind: respond to and update DOM characteristics; for example: v-bind:href v-bind:class v-bind:title etc.
The main usage is to bind attributes and dynamically update attributes on HTML elements;
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a> <!-- 缩写 --> <a :href="url" rel="external nofollow" rel="external nofollow" >...</a> <p :title='title'>标题</p> var app = new Vue({ el: '#app', data: { url: 'www.baidu.com', title: 'bind' }, })
2. v-on: used to listen to DOM events; For example: v -on:click v-on:keyup
By the way, let’s talk about methods and events
2.1 The expression of @click can directly use JavaScript statements , or it can be a function name in the methods option of the Vue instance. Parameters can be passed in the method
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething()">...</a> //是一个方法名 <p ng-if='show'>一段文本</p> <button @click="show=false">点击隐藏文本</button> //直接是一个内联的语句 <button v-on:click="count++">Add 1</button> var app = new Vue({ el: '#app', data:{ show: true, counter: 0 }, methods: { doSomething: function(){ console.log(this.title); }, } })
2.2 Methods and events:
Vue provides a special variable $event, which can be used For accessing native DOM events, you can prevent event bubbling or prevent links from opening
Write an example to prevent bubbling:
<p @click="stopClick1('stop1',$event)"> <p @click="stopClick2('stop2',$event)"> <p @click="stopClick3('stop3',$event)">阻止冒泡</p> </p> </p> </p> methods:{ stopClick3: function(message, event){ console.log(message); event.stopPropagation(); //阻止冒泡 }, stopClick2: function(message, event){ console.log(message); }, stopClick1: function(message, event){ console.log(message); } }
2.3 Modifier:
In @binding Add a small dot "." after the event, and then follow it with a suffix to use the modifier.
The above bubbling event can be written as a direct user modifier:
<p @click.stop="stopClick3('stop3')">阻止冒泡</p> //不用通过$event事件再来写了
Some commonly used modifiers are:
• .stop
• .prevent
• .capture
• .self
• .once
< !一阻止单击事件冒泡一〉 <a @click.stop=”handle "></a> 〈!一修饰符可以串联一〉 <a @click.stop.prevent=” handle ” ></a> 〈!一添加事件侦听器时使用事件捕获模式一〉 <p @click . capture=”handle ”> ... </p> 〈!一只当事件在该元素本身(而不是子元素) 触发时触发回调一〉 <p @click.self=” handle ”> ... </p> < !一只触发一次,组件同样适用一〉 <p @click.once=” handle ”> ... </p>
When monitoring keyboard events on a form element, also You can use key modifiers, such as calling a method only when a specific key is pressed:
< !一只有在keyCode 是13 时调用vm.submit()一〉 <input @keyup.13 =“ submit ”〉
3. v-model: two-way binding of data; used for form input, etc.; for example: < input v-model = "message">
4. v-show: conditional rendering instruction, set the css style attribute for DOM
5. v-if: conditional rendering instruction, dynamically added in DOM Or delete DOM elements
6. v-else: conditional rendering instruction, must be used in pairs with v-if
7. v-else-if: judge multi-layer conditions, must be paired with v -if used in pairs;
8, v-text: Update the textContent of the element; for example: is equivalent to < span>{{ msg}} span>;
9. v-html: Update the innerHTML of the element; the tag name will also be included.
10. v-for: loop instruction; for example:
<p id= "app "> <ul> <li v-for="book in books">{ { book.name } }</li> </ul> </p> var app =new Vue({ el: '#app', data: { books: [ {name: '<vue.js实战>'}, {name: '<javascript语言精粹>'}, {name: '<javascript高级程序设计>'} ] } });
10.1 v- for expression supports an optional parameter as the index of the current item when traversing the array, for example:
<p id="app"> <ul> <li v-for="(book , index) in books ">{{ index}} - {{book.name })</li> </ul> </p>
10.2 When the expression of v- for traverses the object properties, there are two optional parameters, namely key name and index:
<p id= "app"> <ul> <li v-for="(value , key , index) in user "> { { index } } - { { key } } : { { value } } </li> </ul> </p> var app = new Vue({ el: '#app', data: { name: 'Aresn', grender: '男', age:23 } });
10.3 The expression of v- for can also iterate integers:
<p id="app"> <span v-for="n in 10">{{n}}</span> </p>
10.4 Array update
When we modify the array, Vue will detect the data change, so the view rendered with v-for will also be updated immediately.
• push()
• pop()
• shift()
• unshit()
• splice()
• sort()
• reverse ()
These methods will change the original array called by these methods
For example, we will add an item to the data books of the previous example:
app.books.push({ name: '《css世界》' });
Some methods will not Change the original array, for example:
• filter()
• concat()
• slice()
They return a new array. When using these non-mutation methods When Vue detects changes in the array, it does not directly re-render the entire list, but maximizes the reuse of DOM elements.
In the replaced array, items containing the same elements will not be re-rendered, so you can boldly replace the old array with a new array without worrying about performance issues.
10.5 Filtering and Sorting
When you do not want to change the original array and want to filter or sort the display through a copy of the array, you can use calculated properties to return the filtered or sorted array. ,For example:
<p id="app"> <ul> <template v-for="book in filterBooks"> <li>书名:{{book.name}}</li> <li>作者:{{book.author}}</li> </template> </ul> </p> var app= new Vue({ el: '#app', computed: { filterBooks: function(){ return this.books.filter(function (book) { return book.name.match(/JavaScript/); }) }, } });
11、v-cloak:不需要表达式,这个指令保持在元素上直到关联实例结束编译; v-cloak 是一个解决初始化慢导致页面闪动的最佳实践 ;
12、v-once:也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。
首次渲染后,不再随数据的变化重新渲染,将被视为静态内容; v-once 在业务中也很少使用,当你需要进一步优化性能时,可能会用到。
13、v-pre:不需要表达式,跳过这个元素以及子元素的编译过程,以此来加快整个项目的编译速度;例如: < span v-pre>{{ this will not be compiled }} </ span>
;
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
The above is the detailed content of Vue built-in command methods and events. For more information, please follow other related articles on the PHP Chinese website!