Home > Web Front-end > JS Tutorial > Use of vue built-in instructions

Use of vue built-in instructions

php中世界最好的语言
Release: 2018-04-20 13:43:48
Original
1286 people have browsed it

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=&#39;title&#39;>标题</p>
var app = new Vue({
  el: '#app',
  data: { 
    url: 'www.baidu.com',
    title: 'bind'
  },
})
Copy after login

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=&#39;show&#39;>一段文本</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);
    },
  }
})
Copy after login

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(&#39;stop1&#39;,$event)">
      <p @click="stopClick2(&#39;stop2&#39;,$event)">
        <p @click="stopClick3(&#39;stop3&#39;,$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);
    }
}
Copy after login

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(&#39;stop3&#39;)">阻止冒泡</p>  //不用通过$event事件再来写了
Copy after login

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>
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()一〉
<input @keyup.13 =“ 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:

<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高级程序设计>'}
    ]
  }
});
Copy after login

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>
Copy after login

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
  }
});
Copy after login

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

 <p id="app">
    <span v-for="n in 10">{{n}}</span>
  </p>
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.

替换的数组中,含有相同元素的项不会被重新渲染,因此可以大胆地用新数组来替换旧数组,不用担心性能问题。

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/);
      })
    },
  }
});
Copy after login

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

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

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

13、v-pre:不需要表达式,跳过这个元素以及子元素的编译过程,以此来加快整个项目的编译速度;例如: < span v-pre>{{ this will not be compiled }} </ span>

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

推荐阅读:

Vue中slot插槽使用详解

Vue文件阅读器组件FileReader API

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template