快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

vue指令及其过滤器怎么使用

本篇内容主要讲解“vue指令及其过滤器怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue指令及其过滤器怎么使用”吧!

创新互联自成立以来，一直致力于为企业提供从网站策划、网站设计、成都网站制作、网站设计、外贸网站建设、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

vue 指令与过滤器

内容渲染指令

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

v-text

示例


    
    

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

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

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


    
姓名：{{username}}


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

v-html

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


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

属性绑定指令

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

动态绑定属性值 v-bind

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

使用 javascript 表达式

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

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

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

!!!!!

事件绑定指令

v-on 绑定事件

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

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: 也可以简写为 @

-1

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

事件对象

vue 提供了内置固定的变量 $event ，它就是原生 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.preventDefault() 或 event.stopPROpagation() 是非常常见的需求。因此， vue 提供了事件修饰的概念，辅助程序员更方便的**对事件的触发进行控制。常用5种修饰符如下：

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

示例1：

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

到此，相信大家对“vue指令及其过滤器怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


文章名称：vue指令及其过滤器怎么使用
网页网址：http://6mz.cn/article/gspcoh.html

其他资讯