This article brings you relevant knowledge about front-end vue. Let’s talk about what content rendering instructions and attribute binding instructions are. Friends who are interested, let’s take a look together. I hope it will be useful to friends who need it. Helps!

vue directives and filters

Content rendering directive

The content rendering directive is used to assist developers in rendering the text content of DOM elements . There are three commonly used content rendering instructions.

v-text

Example

  
   
性别
 
  

//创建vue 的实例对象 const vm = new Vue({ //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { username: 'zs', gender: '男' } });

Interpolation expression{{}}Double braces

Application in actual development More, it will not overwrite the original rendering
Example

 
姓名：{{username}}
 

const vm = new Vue({ //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { username: 'zs', gender: '男', } });

v-html

You can render the tagged string into real html content
Example

const vm = new Vue({ //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { info: '
 欢迎学习 vuejs
' } });

Attribute binding instructions

Note: Interpolation expressions can only be used in element content nodes, not in element attribute nodes

Dynamic binding Define the attribute value v-bind

Add the attribute instruction before the attributev-bind:dynamically bind the value to the element, vue stipulates thatv-bindcan be abbreviated as:, Example

Using javascript expressions

In the template rendering syntax provided by vue, in addition to supportingbinding simple data values, also supports the operation of javascript expressions, such as

{{ number + 1 }}; {{ ok ? 'YES' : 'NO'}}; {{ message.split('').reverse().join('')}}; 

Note that during the abbreviation v-bind attribute binding, if the binding content needs to be dynamically spliced, the string should be wrapped in single quotes, such as

!!!!!

Event binding instruction

v-on Binding event

v-on Binding event instruction assists programmers in binding listening events for DOM elements. The format is as follows

count的值是: {{count}}
  +1

const vm = new Vue({ //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data:{ count: 0, }, // 定义事件的处理函数 methods:{ add: function () { // console.log(vm); // vm.count += 1; // this === vm this.count += 1; } // 也可简写成 add () { // console.log(vm); this.count += 1; } } });

v-on:can also be abbreviated as @

-1

Note: The native DOM object has native events such as onclick, oninput, onkeydown, etc., replace them with vue After the event binding form, they are: v-on:click, v-on:input, v-on:keydown

Event object

vue provides built-in fixed variables$event, which is the event object of the native DOM e

  +n

const vm = new Vue({ //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data:{ count: 0, }, // 定义事件的处理函数 methods:{ add (n, e) { this.count += 1; // 判断 this.count 的值是否为偶数 if (this.count%2 === 0) { //偶数 e.target.style.backgroundColor = 'blue'; console.log(e); } else { // 奇数 e.target.style.backgroundColor = ''; } } } });

Event modifier

Callevent.preventDefault()or ## in the event processing function #event.stopPROpagation()is a very common requirement. Therefore, vue provides the concept of event modification to assist programmers to more conveniently control the triggering of events. The five commonly used modifiers are as follows:

跳转到百度首页

const vm = new Vue({ //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data:{}, // 定义事件的处理函数 methods:{ show () { // e.preventDefault(); console.log("点击了 a 链接"); } } });

Recommended learning: "

"

The above is the detailed content of An article explaining the vue directive and its filters in detail (with code examples). For more information, please follow other related articles on the PHP Chinese website!