Instructions for using vue built-in instructions-JS Tutorial-php.cn

This time I will bring you the instructions for using the built-in instructions of vue. What are theprecautionsof the instructions for using the built-in instructions of vue. The following 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 the attributes onHTML elements;

...  ... 标题
 var app = new Vue({ el: '#app', data: { url: 'www.baidu.com', 　　　　title: 'bind' }, }）

Copy after login

2, v-on: used for monitoring DOM events; For example: v-on:click v-on:keyup

By the way, let’s talk about methods and events

2.1 Expression of @click The formula canuse JavaScriptstatements directly, or it can be a function name in the methods option in the Vue instance. Parameters can be passed in the method

 ...  ...　　　　//是一个方法名 一段文本
 　　//直接是一个内联的语句  var app = new Vue({ el: '#app', 　　data:{ 　　　　show: true， 　　　　counter： 0 　　}, methods: { doSomething: function(){ console.log(this.title); }, } }）

Copy after login

2.2 Methods and events:

Vue provides a special variable $event, which is used to access native DOM events, which can prevent events from bubbling or prevent links from opening.

Write an example to prevent bubbling:

 
 
阻止冒泡
 
 
 　　
 methods:{ stopClick3: function(message, event){ console.log(message); event.stopPropagation(); //阻止冒泡 }, stopClick2: function(message, event){ console.log(message); }, stopClick1: function(message, event){ console.log(message); } }

Copy after login

2.3 Modification Symbol:

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:

阻止冒泡

　　//不用通过$event事件再来写了

Copy after login

Some commonly used modifiers are:

• .stop

• .prevent

• .capture

• .self

• .once

＜！一阻止单击事件冒泡一〉〈！一修饰符可以串联一〉〈！一添加事件侦听器时使用事件捕获模式一〉

...

〈！一只当事件在该元素本身（而不是子元素）触发时触发回调一〉

...

＜！一只触发一次，组件同样适用一〉

...

Copy after login

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()一〉 
        
         Copy after login

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}} ;

9. v-html: Update the innerHTML of the element; the tag name will also be included.

10. v-for: loop instruction; for example:

 
 { { book.name } }
 
 
 var app =new Vue({ el: '#app', data: { books: [ {name: ''}, {name: ''}, {name: ''} ] } });

Copy after login

10.1 v-for expressionSupports an optional parameter as the index of the current item when traversing the array, For example:

 
 {{ index}} - {{book.name })

Copy after login

10.2 v-For expressionWhen traversing the objectattributes, there are two optional parameters, namely key name and index:

 
  { { index } } - { { key } } : { { value } } 
 
 
 var app = new Vue({ el: '#app', data: { name: 'Aresn', grender: '男', age:23 } });

Copy after login

10.3 v - The expression of for can also iterate integers:

 {{n}}

Copy after login

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世界》' });

Copy after login

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

当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组，例如：

 
  
 
 var app= new Vue({ el: '#app', computed: { filterBooks: function(){ return this.books.filter(function (book) { return book.name.match(/JavaScript/); }) }, } });

Copy after login

11、v-cloak：不需要表达式，这个指令保持在元素上直到关联实例结束编译； v-cloak 是一个解决初始化慢导致页面闪动的最佳实践；

12、v-once：也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。

首次渲染后，不再随数据的变化重新渲染，将被视为静态内容； v-once 在业务中也很少使用，当你需要进一步优化性能时，可能会用到。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！