02_Vue3基础语法(一)

Vue3基础语法(一)

Mustache双大括号语法

如果我们希望把数据显示到模板(template)中,使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。

  • 并且我们前面提到过,data返回的对象是有添加到Vue的响应式系统中;
  • 当data中的数据发生改变时,对应的内容也会发生更新。
  • 当然,Mustache中不仅仅可以是data中的属性,也可以是一个JavaScript的表达式。

另外这种用法是错误的:

02_Vue3基础语法(一)_第1张图片

v-once指令

v-once用于指定元素或者组件只渲染一次:

  • 当数据发生变化时,元素或者组件以及其所有的子元素将视为静态内容并且跳过;

  • 该指令可以用于性能优化;

  • 如果是子节点,也是只会渲染一次:

02_Vue3基础语法(一)_第2张图片

v-text指令

用于更新元素的 textContent:

02_Vue3基础语法(一)_第3张图片

v-html

默认情况下,如果我们展示的内容本身是 html 的,那么vue并不会对其进行特殊的解析。

如果我们希望这个内容被Vue可以解析出来,那么可以使用 v-html 来展示;

02_Vue3基础语法(一)_第4张图片

v-pre

v-pre用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签: 跳过不需要编译的节点,加快编译的速度;

02_Vue3基础语法(一)_第5张图片

v-cloak

这个指令保持在元素上直到关联组件实例结束编译。

和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。

02_Vue3基础语法(一)_第6张图片

v-bind的绑定属性

前面讲的一系列指令,主要是将值插入到模板内容中。

但是,除了内容需要动态来决定外,某些属性我们也希望动态来绑定

  • 比如动态绑定a元素的href属性;
  • 比如动态绑定img元素的src属性;

绑定属性我们使用v-bind:

缩写::

预期:any (with argument) | Object (without argument)

参数:attrOrProp (optional)

修饰符

.camel - 将 kebab-case attribute 名转换为 camelCase。

用法:动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。

绑定基本属性

v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值(这个学到组件时再介绍);

在开发中,有哪些属性需要动态进行绑定呢?

  • 还是有很多的,比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

02_Vue3基础语法(一)_第7张图片

绑定class介绍

在开发中,有时候我们的元素class也是动态的,比如:

  • 当数据为某个状态时,字体显示红色。
  • 当数据另一个状态时,字体显示黑色。

绑定class有两种方式:

  • 绑定class – 对象语法

    我们可以传给 :class (v-bind:class 的简写) 一个对象,以动态地切换 class。

02_Vue3基础语法(一)_第8张图片

  • 绑定class – 数组语法

​ 我们可以把一个数组传给 :class,以应用一个 class 列表;

02_Vue3基础语法(一)_第9张图片

绑定style介绍

我们可以利用v-bind:style来绑定一些CSS内联样式:

  • 这次因为某些样式我们需要根据数据动态来决定;
  • 比如某段文字的颜色,大小等等;

CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名;

绑定class有两种方式:

  • 对象语法

02_Vue3基础语法(一)_第10张图片

  • 数组语法

在这里插入图片描述

动态绑定属性

在某些情况下,我们属性的名,可能也不是固定的:

  • 前面我们无论绑定src、href、class、style,属性名称都是固定的;
  • 如果属性名称不是固定的,我们可以使用 :[属性名]=“值” 的格式来定义;
  • 这种绑定的方式,我们称之为动态绑定属性;

02_Vue3基础语法(一)_第11张图片

绑定一个对象

如果我们希望将一个对象的所有属性,绑定到元素上的所有属性,应该怎么做呢?

  • 非常简单,我们可以直接使用 v-bind 绑定一个 对象;
  • 案例:info对象会被拆解成div的各个属性

02_Vue3基础语法(一)_第12张图片

v-on绑定事件

前面我们绑定了元素的内容和属性,在前端开发中另外一个非常重要的特性就是交互。

在前端开发中,我们需要经常和用户进行各种各样的交互:

  • 这个时候,我们就必须监听用户发生的事件,比如点击、拖拽、键盘事件等等
  • 在Vue中如何监听事件呢?使用v-on指令。
  • 接下来我们来看一下v-on的用法:

v-on的使用:

缩写:@

预期:Function | Inline Statement | Object

参数:event

修饰符

  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyAlias} - 仅当事件是从特定键触发时才触发回调。
  • .once - 只触发一次回调。
  • .left - 只当点击鼠标左键时触发。
  • .right - 只当点击鼠标右键时触发。
  • .middle - 只当点击鼠标中键时触发。
  • .passive - { passive: true } 模式添加侦听器

用法:绑定事件监听

你可能感兴趣的:(Vue.js,javascript,vue.js,前端)