Vue 简单的语法

1.插值表达式

1.插值表达式的作用是什么?

利用表达式进行插值,将数据渲染到页面中;

2.语法结构?

{{表达式}}

3.插值表达式的注意点是什么?

(1)使用的数据要存在,在data中;

(2)支持的是表达式,而不是语句;

(3)不能在标签属性中使用;<p title={{ 变量 }}></p> ×

2.Vue 指令

Vue 会根据不同的指令,针对标签实现不同的功能。指令:带有 v-前缀的特殊标签属性;

(1)v-html:

作用:动态的解析标签,(像插值表达式的话会以文本形式进行展示)
v-html = "表达式 " → 动态设置元素 innerHTML

(2)v-show & v-if:

作用:控制元素的隐藏
-v-show:控制元素显示隐藏
语法:v-show = "表达式" 表达式值 true 显示, false 隐藏
原理:切换 display:none 控制显示隐藏
场景: 频繁切换显示隐藏的场景
-v-if:控制元素显示隐藏(条件渲染)
语法: v-if = "表达式" 表达式值 true 显示, false 隐藏
原理: 基于条件判断,是否 创建 或 移除 元素节点
场景: 要么显示,要么隐藏,不频繁切换的场景

(3)v-else & v-else-if:

作用:辅助v-if 进行判断渲染
语法: v-else v-else-if = "表达式"
注意: 需要紧挨着 v-if 一起使用

(4)v-on:

作用:注册事件 = 添加监听+提供处理逻辑
语法:<1> v-on:事件名 = "内联语句" ; <2> v-on:事件名 = "methods中的函数名"
简写: @事件名="methods中的函数名"
注意:methods函数中的 this 指向 Vue 实例;同时,我们也可以通过v-on 来调用传参;

(5)v-bind:

作用:动态地设置 html 的标签属性和 -> src url title ...
语法:v-bind:属性名 = "表达式 "
注意:简写形式 :属性名 = "表达式"

(6)v-for:

作用:基于数据循环,多次渲染整个元素 ->数组、对象、数字
语法:v-for = "(item,index) in 数组";item 是每一项,index是索引;
省略 index 则 v-for = "item in 数组"
注意:v-for 的默认行为会尝试 原地修改元素 (就地复用),因而我们最好加上v-for 中的key,并且给元素添加的唯一标识,便于Vue进行列表项的正确排序复用。
注意点:

  1. key 的值只能是 字符串 或 数字类型
  2. key 的值必须具有 唯一性
  3. 推荐使用 id 作为 key(唯一),不推荐使用 index 作为 key(会变化,不对应);
(7)v-model:

作用:给表单元素使用,双向数据绑定 -> 可以快读获取或设置表单元素内容
① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
语法:v-model = '变量'

3.指令的修饰符

通过 " . " 指明一些指令的 后缀 ,不同 后缀 封装了不同的处理操作 -> 简化代码

(1)按键修饰符

@keyup.enter -> 键盘回车监听

(2)v-model 修饰符

v-model.trim -> 去除首尾空格

v-model.number -> 转数字

(3)事件修饰符

@事件名.stop -> 阻止冒泡

@事件名.prevent -> 阻止默认行为

4.v-bind 对于样式操作的增强*

(1)v-bind - 操作 class

语法: : class = "对象/数组"

1.对象 -> 键就是类名,值是布尔值。如果值是 true ,有这个类,否则没有这个类;

复制代码
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

适用的场景:一个类名,来回切换;

2.数组 -> 数组中所有类,都会添加到盒子上,本质就是一个 class 列表

复制代码
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

适用场景:批量添加或删除类;

示例:京东秒杀导航栏的切换

(2)v-bind - 操作 style (个人认为这个还是比较重要的)

语法: :style = "样式对象"

复制代码
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

适用场景:某个具体属性的动态设置

注意的一些点:

<1>一些格式:首先,对于CSS属性值,我们需要对其加引号;其次,对于带有横杠的属性名,在JS对象中是不支持的,因而此时可以采取两种方法:一种是驼峰;另一种是我们可以对这种属性名加引号;

复制代码
<div :style="{height:"400px";width:"600px";backgroundColor:'white';'background-color':'white';}"></div>

<2>如果对单个的属性进行动态的改变,则

复制代码
<div :style="{height:"400px";width:len;}"></div>

/* 然后在 data 中定义 len */

5.v-model 应用于其他表单元素

这个暂时和之前的是一样的


参考:

026-v-model应用于其他表单元素_哔哩哔哩_bilibili

相关推荐
前端大白话3 分钟前
Vue2和Vue3语法糖差异大揭秘:一文读懂,开发不纠结!
javascript·vue.js·设计模式
剽悍一小兔4 分钟前
小程序发布后,不能强更的情况下,怎么通知到用户需要去更新?
前端
115432031q4 分钟前
基于SpringBoot+Vue实现的旅游景点预约平台功能十三
java·前端·后端
JiangJiang5 分钟前
🧠 面试官:受控组件都分不清?还敢说自己写过 React?
前端·react.js·面试
tianchang5 分钟前
JS 中 Map 的概念与使用
前端·javascript
Jenlybein5 分钟前
[ Javascript 面试题 ]:提取对应的信息,并给其赋予一个颜色,保持幂等性
前端·javascript·面试
Carlos_sam5 分钟前
Opnelayers:向某个方向平移指定的距离
前端·javascript
夜熵6 分钟前
JavaScript 中的 this
前端·面试
绅士玖8 分钟前
Vue.js 核心特性解析:响应式原理与组合式API实践
vue.js
前端小巷子9 分钟前
CSS 单位指南
前端·css