• 技术文章 >web前端 >Vue.js

    一文详解vue指令及其过滤器(附代码示例)

    藏色散人藏色散人2023-01-22 07:30:01转载50

    本篇文章给大家带来了关于前端vue的相关知识,聊聊什么是内容渲染指令以及属性绑定指令等等,感兴趣的朋友,下面一起来看一下吧,希望对需要的朋友有所帮助!

    vue 指令与过滤器

    内容渲染指令

    内容渲染指令是用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有3种。

    v-text

    示例

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

    插值表达式 {{}}双大括号

    在实际开发中应用较多,不会覆盖原有渲染
    示例

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

    v-html

    可以把带标签的的字符串,渲染成真正的html 内容
    示例

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

    属性绑定指令

    注意:插值表达式只能用在元素内容节点中,不能用在元素的属性节点

    动态绑定属性值 v-bind

    在属性前加属性指令 v-bind: 为元素动态绑定值,vue 规定 v-bind 可以简写成: ,示例

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

    使用 javascript 表达式

    在 vue 提供的模板渲染语法中,除了支持绑定简单的数据值之外,还支持 javascript 表达式的运算,例如

    {{ number + 1 }};
    {{ ok ? 'YES' : 'NO'}};
    {{ message.split('').reverse().join('')}};
    
    <div v-bind:id="'list-' + id"></div>

    注意在简写 v-bind 属性绑定期间,如果绑定内容需要进行动态拼接,则字符串外应包裹单引号,例如

    <div :title="'box' + index">!!!!!</div>

    事件绑定指令

    v-on 绑定事件

    v-on 绑定事件指令,辅助程序员为DOM元素绑定监听事件,格式如下

    <p>count的值是: {{count}}</p>
            <!-- 语法格式为 v-on:事件名称="事件处理函数的名称" -->
            <button v-on:click="addCount">+1</button>
     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: 也可以简写为 @

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

    注意:原生 DOM 对象有 onclick、oninput、onkeydown 等原生事件,替换成 vue 的事件绑定形式后,分别为: v-on:click 、v-on:input、v-on:keydown

    事件对象

    vue 提供了内置固定的变量 $event ,它就是原生 DOM 的事件对象 e

    <!-- 如果 count 为偶数,则按钮背景变为蓝色,否则,取消背景 -->
    <!-- vue 提供了内置固定的变量 $event ,它就是原生 DOM 的事件对象 e-->
            <button @click="add(1, $event)">+n</button>
    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.preventDefault() event.stopPROpagation() 是非常常见的需求。因此, vue 提供了事件修饰的概念,辅助程序员更方便的**对事件的触发进行控制。常用5种修饰符如下:

    事件修饰符说明
    .prevent阻止默认行为(例如:阻止 a 链接跳转、阻止表单提交等)
    .stop阻止事件冒泡
    .capture以捕获模式触发当前的事件处理函数
    .once绑定事件只触发一次
    .self只有在 event.target 是当前元素自身时触发事件处理函数

    示例1:

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

    推荐学习:《vue.js视频教程

    以上就是一文详解vue指令及其过滤器(附代码示例)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:cnblogs,如有侵犯,请联系admin@php.cn删除
    专题推荐:Vue
    上一篇:【整理分享】48个前端高频面试题(附答案解析) 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 【整理汇总】45+个Vue面试题,带你巩固知识点!• 一文带你详细了解Vue脚手架• 一文带你详解Vue中的组件化编程• 一文详解vue怎么实现v-model(附代码示例)• 深入聊聊vue3中的reactive()
    1/1

    PHP中文网