This time I will bring you the use of vue's built-in instructions. What are the precautions when using vue's built-in instructions. The following is a practical case, let's take a look. The
directive is one of the most commonly used functions in Vue templates. It is prefixed with v-. Its main responsibility is to apply certain behaviors to the DOM accordingly when the value of its expression changes. This article mainly introduces the detailed explanation of Vue's built-in instructions. Friends in need can refer to
Directives are special attributes with v- prefix. Their responsibility is to change the value of the expression when it changes. The associated effects are responsive to the DOM.
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 be directly Using JavaScript statement, it can also be a function name in the methods option of the Vue instance, and 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, used to access native DOM events, can prevent events from 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:
Add a small dot "." after the @bound 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 expressionSupports 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 v-For expressionWhen traversing the object attributes, 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 v - The expression of 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 immediately renew.
• 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.
替换的数组中,含有相同元素的项不会被重新渲染,因此可以大胆地用新数组来替换旧数组,不用担心性能问题。
10.5 过滤与排序
当你不想改变原数组,想通过一个数组的副本来做过滤或排序的显示时, 可以使用计算属性来返回过滤或排序后的数组 ,例如:
<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 Use of vue built-in instructions. For more information, please follow other related articles on the PHP Chinese website!