【Vue进阶】第一章——熟悉Vue常用指令：从文本插值到表单绑定

原创 已于 2024-10-19 00:42:58 修改 · 1k 阅读 · 36 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #ecmascript #html #css #java #spring cloud

于 2024-10-18 23:53:04 首次发布

目录

内容主要包含 

1.Vue 常用指令介绍

目标

内容讲解

内容小结

2.文本插值v-html

目标

内容讲解

内容小结

3.绑定属性 v-bind:属性名或者 :属性名 (重点)

目标

内容讲解

内容小结

4.条件渲染v-if

目标

内容讲解

内容小结

5.条件渲染v-show

目标

内容讲解

内容小结

6.列表渲染 v-for

目标

内容讲解

内容小结

7.事件绑定 v-on:事件名或者@事件名(重点)

目标

内容讲解

内容小结

8.表单绑定v-model(重点) 非常重要

目标

内容讲解

内容小结

 


de146e1b0afa4221942e6f1e4ef454e6.gif

内容主要包含 

本章节将详细介绍Vue.js中的一些核心指令，包括文本插值、属性绑定、条件渲染、列表渲染、事件绑定和表单绑定等。通过实际的代码示例和详细的解释，帮助读者深入理解这些指令的工作原理和使用技巧，从而在实际项目中更加灵活地运用Vue.js。

1.Vue 常用指令介绍

目标

  • 理解什么是Vue 指令
  • 掌握如何使用Vue指令
  • 能够说出常见的Vue指令

内容讲解

【1】Vue 指令介绍

在vue中指令是作用在视图中的即html标签，可以在视图中增加一些指令来设置html标签的某些属性和文本。

指令都是以带有 v- 前缀的特殊属性。

【2】使用Vue指令

使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。

【3】常见的Vue指令

 

654e273f2c7395ec5ac40efddcd1ceb2.png

内容小结

1.使用Vue指令注意事项

1）就是vue中的常见指令都是必须书写在html标签的属性中，在属性值中书写js代码。

2）vue中的指令只能使用在视图中，不能使用在脚本。

2.文本插值v-html

目标

  • 能够使用文本插值
  • 理解文本插值和插值表达式区别

内容讲解

【1】文本插值使用格式

<标签名 v-html="vue中data的key"></标签名>

说明：文本插值v-html通过data的key获取value显示标签
最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue文本插值
weixin_46230055的博客
06-29 425
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue.min.js"></scrip
Vue 文本插值简单示例
caoxinjian423的博客
09-28 785
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&gt.
VUE 文本插值
weixin_67812721的博客
08-15 572
VUE
VUE基础--文本插值（最基本的数据绑定形式）
qq_62799602的博客
01-12 752
vue 的文本插值--{{}}的使用
【Vue】模板语法——文本插值
早睡早起长头发的博客
02-01 1818
在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。这种 {{ }} 语法的专业名称是插值表达式（英文名为：Mustache），在实际开发中用的最多。在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还。只是内容的占位符，不会覆盖原有的内容。
Vue3中的模板指令——表单输入绑定指令v-model（:value和@input）
传播有益的技术文章，力求精准、专业、专心、专享
06-06 1263
v-model指令实现表单输入值与父组件中的属性变量保持同步
vue从入门到进阶的vue代码示例，开发示例代码
最新发布
11-17
Vue从入门到进阶的代码示例涵盖了构建Vue应用的基础知识，以及在项目中实现各种功能时可能会用到的高级特性。以下是从给定文件中提取出的关于Vue.js的相关知识点： 1. 创建Vue应用的基本方法： - 引入Vue核心库，...
Vue——表单输入绑定
hulin的博客
04-09 1286
Vue的表单输入绑定
ppt课件-第2章 Vue数据绑定 .zip
03-22
本课件“第2章 Vue数据绑定”将深入讲解Vue的核心特性之一——数据绑定，它是Vue实现声明式编程的关键。 在Vue中，数据绑定允许开发者在视图和模型之间建立直接的关联，确保当模型数据发生变化时，视图会自动更新，...
Vue系列(三)之基本语法文本插值
安妍妍的博客
12-30 2443
基本语法Vue实例插值普通文本原始html 今天主要介绍Vue常见的语法，声明式渲染和常用的指令。 Vue实例 上篇文章中我们使用new关键字创建了一个Vue实例： <div id="app"> <div>messgae：{{message}}</div> </div> <script> var vm = new Vu...
vue的插值操作
韩旭不会敲代码吧的博客
07-19 2333
插值操作：将vue实例中data里面的某个值，插到页面DOM元素上进行显示。 并改变data值可以动态改变显示。 1、Mustache 1.Mustache (胡子/胡须) 可以通过Mustache语法(也就是双大括号{{}})来进行插值操作； 数据绑定最常见的形式就是使用“Mustache”语法的文本插值 2.Mustache语法，不仅仅可以直接写变量，也可以写简单的表达式 <div id="app"> <h2>{{message}}</h2&g.
[Vue学习笔记] 插值 - 文本
GYK0812的博客
01-31 286
vue 中使用双花括号在HTML中插入文本： <span id='app'>Message: {{ msg }}</span> 双花括号中的 msg 变量，需要定义在vue实例中 <script type="text/javascript"> var vm = new Vue({ el : '#app', data: {msg:1} }) </script> 如果想让msg 参数变化一次，再次改变msg 的值时， h
VUE之实例绑定、文本插值、基本指令、语法糖
weixin_44775723的博客
07-13 632
（1）数据绑定与Vue案例 （2）实例与数据绑定步骤 （3）Vue实例属性 （4）模板-文本插值 （5）基本指令 v-html、v-pre、v-once、v-bind、v-on （6）语法糖
Vue-插值的操作
七一
08-20 506
1、Mustache语法基本使用 <h1>{{message}}</h1> <!--不仅可以写变量，也可以写简单的表达式--> <h1>{{firstName + ' ' + lastName}}</h1> <h1>{{firstName}} {{lastName}}</h1> <h1>{{weight * 2}}</h1> </div> <script src
vue之实例绑定、文本插值、基础绑定、语法糖
javascr_的博客
07-04 703
vue.js是一套构建用户界面的框架，只关注数据层且不会影响DOM层 vue的应用创建很简单，通过构造函数vue即可创建Vue根实例，并启动vue根实例。 创建根实例 var app = new Vue({ //相应的代码块 }) 将vue实例绑定到变量app，事实上所有代码都是一个对象，写入vue实例的选项的。vue()构造函数的参数是一个键值对，内...
Vue学习02-Vue插值操作
ZZ15901898915的博客
11-23 331
前面一篇文章中简单的记录了一下Vue基础的内容，接下来主要记录Vue的插值与表达式，以及它的一些基本指令。 初识Vue.js
vue基础，学习vue必会的几大系统指令
weixin_51771816的博客
08-26 209
vue基础，vue常用的系统指令
Vue学习总结
m0_62300955的博客
02-02 1142
本文详细介绍了vue2和vue3最基础的知识，通过一些简单的案例来体现知识点的用法和功能。
Vue中的三种绑定方式
qq_72760247的博客
10-13 2023
Vue中的三种绑定方式
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值