首页> web前端> Vue.js> 正文

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

藏色散人
发布: 2023-01-22 07:30:01
转载
1932 人浏览过

本篇文章给大家带来了关于前端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}}

登录后复制
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:也可以简写为 @

登录后复制

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

事件对象

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

  
登录后复制
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.js视频教程

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

相关标签:
vue
来源:cnblogs.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn