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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/179133.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

11.15 知识总结(模板层、模型层)

一、 模板层 1.1 过滤器 1.什么是过滤器&#xff1f; 过滤器类似于python的内置函数&#xff0c;用来把变量值加以修饰后再显示。 2. 语法 1、 {{ 变量名|过滤器名 }} 2、链式调用&#xff1a;上一个过滤器的结果继续被下一个过滤器处理 {{ 变量名|过滤器1|过滤器2 }} 3、有的过…

网页中 URL 的使用

网页中 URL 的使用 绝对路径相对路径使用场景 网页中的 URL 主要分为两大类&#xff1a;相对路径与绝对路径。 绝对路径 绝对路径可靠性强&#xff0c;而且相对容易理解&#xff0c;在项目中运用较多 形式特点http://test.com/web直接向目标资源发送请求&#xff0c;容易理解…

什么是智能井盖?万宾科技的智能井盖传感器的效果

近年来为打造智慧城市政府一直在不懈努力。加速城市基础建设是一项重要的举措&#xff0c;它有助于推动城市综合治理城市生命线的建设工程。在改善市民生活质量的过程中&#xff0c;市政部门正积极进行井盖的改进和升级工作&#xff0c;特别是那些看似微不足道的井盖却蕴含着重…

Java方法中不使用的对象应该手动赋值为NULL吗?

在java方法中&#xff0c;不使用的对象是否应该手动赋值为null&#xff1f;我们先来通过一个示例看一下。 垃圾回收示例一 public class GuoGuoTest {public static void main(String[] args) {byte[] placeholder new byte[64 * 1024 * 1024];System.gc();} } 上面代码向内…

报错缺少class(org.apache.hadoop.hdfs.DistributedFileSystem)

平台报错缺少 java.lang.RuntimeException:java.lang.ClassNotFoundException: Class org.apache.hadoop.hdfs.DistributedFileSystem not found 实则是缺少jar包 hadoop-hdfs-client-3.1.1.3.1.0.0-78.jar 找到对应的jar放到程序的lib中即可

【外汇天眼】解析外汇交易平台:深度了解DD与NDD两大模式

外汇交易平台种类繁多&#xff0c;涵盖不同的分类与运营模式&#xff0c;令投资者难以甄别&#xff0c;也增加了选择的难度。为了解决这一问题&#xff0c;我们将更深入地了解外汇平台的多样性。 在线外汇交易平台主要分为两大类&#xff1a;处理平台模式&#xff08;Dealing …

移植freertos到qemu上运行

1、freertos源码下载 参考博客&#xff1a;《freertos源码下载和目录结构分析》&#xff1b; 2、编译freertos 2.1、选择合适的Demo freertos官方已经适配过qemu&#xff0c;所以我们并不需要做源码级别的移植&#xff0c;只需要选择合适的Demo文件夹。 2.2、修改Makefile 2.3…

ATFX汇市:10月美国名义CPI年率大降,美元指数创近三月新低

ATFX汇市&#xff1a;据美国劳工部劳动统计局数据&#xff0c;美国10月未季调CPI年率最新值3.2%&#xff0c;低于前值3.7%&#xff0c;低于预期值3.3%&#xff1b;10月未季调核心CPI年率最新值4%&#xff0c;低于前置和预期值的4.1%。名义CPI与核心CPI双双下降&#xff0c;透露…

Python--快速入门四

Python--快速入门四 1.Python函数 1.在括号中放入函数的参数。 2.可以通过return在函数作用域外获取函数作用域内的值。(默认的return值为None) 代码展示&#xff1a;BMI计算函数 def calculate_BMI(fuc_height,fuc_weight):fuc_BMI fuc_weight/(fuc_height**2)return fuc…

day21_mysql

今日内容 零、 复习昨日 第一阶段: Java基础知识(会编程,懂编程) 第二阶段: Web开发(前端,后端,数据库) 一、MySQL 一、引言 二、数据库 2.1 概念 ​ 数据库是“按照数据结构来组织、存储和管理数据的仓库。是一个长期存储在计算机内的、有组织的、有共享的、统一管理的数据集合…

reticulate | R-python调用 | 安装及配置 | conda文件配置

reticulate | R-python安装及配置 | conda文件配置 1. 基础知识2. 安装reticulate from CRAN3. 包含了用于Python和R之间协同操作的全套工具&#xff0c;在R和Rstudio中均可使用4. 配置python环境4.1 4种环境配置方式4.2 miniconda 环境install_miniconda()报错一install_minic…

如何调整图片尺寸:简单实用的教程分享

报名事业编考试的时候&#xff0c;会发现上传照片时会提示图片大小尺寸应该为多少&#xff0c;如果不符合规定就无法提交报名&#xff0c;那么怎么才能修改图片大小呢&#xff1f;最简单的方法就是利用调整照片大小工具来对图片尺寸修改&#xff0c;本文分享一个在线图片处理工…