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!

An article explaining the vue directive and its filters in detail (with code examples)

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

<div id="app">
    <!-- 把 username 对应的值，渲染到第一个 p 标签中 -->
    <p v-text="username"></p>
    <!-- 把 gender 对应的值，渲染到第二个 p 标签中 -->
    <!-- 注意：第二个 p 标签中，默认文本会被gender值覆盖 -->
    <p v-text="gender">性别</p>
</div>
<!-- 导入 vue 的库文件 -->
    <script src="./lib/vue.js v2.7.13.js"></script>

Copy after login

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

Copy after login

Interpolation expression `{{}}`Double braces

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

<div id="app">
    <p>姓名：{{username}}</p>
</div>

Copy after login

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

Copy after login

v-html

You can render the tagged string into real html content
Example

<div id="app">
    <div v-html="info"></div>
</div>

Copy after login

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

Copy after login

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 that v-bind can be abbreviated as :, Example

<input type="text" v-bind:placeholder="tips">
<img :src="photo" style="width: 150px;">

Copy after login

Using javascript expressions

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

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

<div v-bind:id="&#39;list-&#39; + id"></div>

Copy after login

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

<div :title="&#39;box&#39; + index">!!!!!</div>

Copy after login

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

<p>count的值是: {{count}}</p>
        <!-- 语法格式为 v-on:事件名称="事件处理函数的名称" -->
        <button v-on:click="addCount">+1</button>

Copy after login

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

Copy after login

v-on: can also be abbreviated as @

<button @click="sub">-1</button>

Copy after login

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

<!-- 如果 count 为偶数，则按钮背景变为蓝色，否则，取消背景 -->
<!-- vue 提供了内置固定的变量 $event ，它就是原生 DOM 的事件对象 e-->
        <button @click="add(1, $event)">+n</button>

Copy after login

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 = '';
                    }
                }
              
            }
          
        });

Copy after login

Event modifier

Call event.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:

Event modifierDescription to Capture mode triggers the current event processing function##.once.selfevent.targetExample 1:


.prevent	Prevent default behavior (for example: prevent a link jump, prevent form submission, etc.)
.stop	Stop event bubbling
.capture
The bound event only triggers once
The event handler function is only triggered when	is the current element itself

<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>

Copy after login

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

Copy after login

Recommended learning: "

vue.js video tutorial

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!