vue中的插值表达式的作用

+ 在vue中的作用范围中使用data

+ 支持js代码的运算

+ 支持函数的调用

v-text 直接进行输出，会覆盖原有内容

v-html 会把数据解析成html代码执行

v-bind 对属性进行绑定

v-model 表单数据的双向绑定，也是vue

v-if 控制标签元素  每次都会删除或者创建元素，有较高的切换性能消耗

v-show 控制标签元素 没有进行删除，添加了dispaly：none ，有较高的初始渲染开销

v-for 循环

v-on 绑定事件

按键修饰符

.enter

.tab

.delete  捕获删除和退格键（backspace/delete）

.esc

.space

.ctrl

.alt

.shift

原文地址：https://www.cnblogs.com/lxz123/p/12541849.html

时间： 2024-10-08 01:35:25

vue中的插值表达式的作用的相关文章

vue中的插值表达式

前言: 在html页面上只能展示字符串,console.log()打印出的也是字符串,意味着都会调用toString()方法,但实际上控制台展示的既有数组又有对象等类型,那是由于浏览器会进行处理 用法: 使用在vue实例对象对应的DOM元素的html的正反标签之间 支持匿名变量 支持三目运算符 数值 支持四则运算 支持比较运算符 支持数值类型的一些内置方法 数组 支持数组的索引取值方法 对象:支持对象的属性 window内置对象的Math的属性和方法:如果data中也有一个Math,那么vue对

图解vue中 v-for 的 :key 的作用，虚拟dom Diff算法

其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设: 1.两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构. 2.同一层级的一组节点,他们

vue 中的 key 有什么作用？

key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确.更快速. Vue 的 diff 过程可以概括为: oldCh 和 newCh 各有两个头尾的变量 oldStartIndex.oldEndIndex 和 newStartIndex.newEndIndex,它们会在新节点和旧节点会进行两两对比 即一共有4种比较方式:newStartIndex 和oldStartIndex .newEndIndex 和 oldEndIndex .newStartI

vue中$refs的用法及作用详解

一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取dom节点了,可以直接在上面的input上绑定input1,然后$refs里面调用就行. 然后在JavaScript里面通过this.$refs.input1去调用就行了. 这样可以有效减少获取dom节点的性能消耗. HTML <div id="app"> <input ty

插值表达式和Vue标签属性的用法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue插值表达式、v-text、v-html、v-cloak、v-bind、v-on

一.解析 插值表达式:{{}} v-html:解析带标签语句 v-cloak:使用 v-cloak 能够解决 插值表达式闪烁的问题 v-text:默认 v-text 是没有闪烁问题的,v-text会覆盖元素中原本的内容,但是 插值表达式  只会替换自己的这个占位符,不会把 整个元素的内容清空 v-bind:Vue提供的属性绑定机制   缩写是 : v-on:Vue提供的事件绑定机制   缩写是 @ 二.实例 <body> <div id="app"> <!

横冲直撞vue(第三篇)：vue中template的三种写法、v-bind、v-on、更新元素的指令v-text与v-html、条件渲染指令v-if 与v-show、v-for

一.vue中template的三种写法 第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <body> <div id="app"></div> <script src="./lib/vue.js"></script> <script type="text/javascript&qu

vue中如何实现数据的双向绑定

vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this.value;会导致循环调用set方法,所以要借助中间对象的形式把值赋给中间对象,获取obj.name的时候我们获取中间对象的最新值即可 let obj = {name:'zhufeng',age:9};//数据 let temp = {name:"lily"};//借助中间对象 let

在Vue 中调用数据出现属性不存在的问题

这已经是我在调用数据时趟过几次的坑了,索性记录下来防止后面再犯: 一般我们请求数据来渲染一个页面的时候,请求下来的数据基本上都是数组或是对象,再通过列表循环和插值表达式渲染的页面:在data 中提前声明接收数据的变量时若为指定类型,就直接将数据渲染到页面,在浏览器的控制台基本上都会出现 "某某属性未定义" 的英文报错:下面举个例子: 先假设请求的是下面的json 数据: { "code": 0, "data":[ { "name&quo