vue模板语法和数据绑定和el、data的两种

news2024/9/30 15:36:19

vue模板语法有两大类:

1.插值语法:

            功能:用于解拆标签体内容

            写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性

2.指令语法:

            功能:用于解拆标签(包括:标签属性,标签体内容,绑定事件)

             举例:v-bind:href="xxx" 或简写程:href:“xxx”,xxx同样要写js表达式,

且可以直接读取到data中的所有属性。

             备注:Vue中有很多的指令,且形式都是:v-xxx,此处我们只是那v-bind举个例子。

1.差值语法

2. 指令语法

用于拆解标签,如下图v-bind指定href的值

3.数据绑定

单项数据绑定:

数据智能能从data流向页面

双向数据绑定:

数据不仅能从data流向页面,还可以从页面流向data

备注:

1.双向绑定一般都应用在表单类元素上(如:input,select)

2.v-model:value 可以简写为v-model,因为v-model默认手机的就是value值

v-bind就是一个单项数据绑定

v-modle是一个双向数据绑定,如下图,如果是v-modle那么在输入框输入值在开发者框中的值也会改变。

 v-bind:value可以简写为::value    v-modle:value可以简写为v-modle

 

 4.el、data的两种写法

1.el有两种写法

(1).new Vue的时候配置el属性

(2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值

 

2.data有两种写法

(1).对象式

(2).函数式

如何选择:目前都可以,到组件的时候,data必须使用函数式,否则会报错。

(3).一个重要原则:由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《商用密码应用与安全性评估》第一章密码基础知识1.1应用概念

密码的概念与作用 概念 密码:采用特定变换的方法对信息进行加密保护、安全认证的技术、产品和服务。 密码技术:密码编码、实现、协议、安全防护、分析破译、以及密钥产生、分发、传递、使 用、销毁等技术。 密码技术核心:密码算法…

家用洗地机什么品牌质量好耐用?最适合家用的洗地机

近些年,随着消费水平的不断升级,我们对家电产品的要求也在逐步提高,就以这几年非常流行的洗地机为例,如今的人们在选洗地机时,会综合考虑价位、技术、配置、颜值、功能等多个方面,那么市场上家用洗地机什么…

JAVACC

JavaCC全称为Java Compiler Compiler,它是一个生成器,用于生成词法分析器(lexical analysers)和语法分析器(parsers);JavaCC本身并不是词法分析器和语法分析器,它是一个生成器&#…

mysql数据库之索引结构

MySQL的索引是在存储引擎层实现的,不同的存储引擎有不同的结构。 一、常见索引。 索引结构描述BTree索引最常见的索引类型,大部分引擎都支持B树索引Hash索引底层数据结构是用哈希表实现的,只有精确匹配索引列的查询才有效,不支持…

Web版和客户端哪种SQL工具更好?ChatGPT有话要说

2023年年初公司发布了一款Web版SQL工具,短期内就赢得了众多用户的喜爱和下载。不过,也有SQL用户在评论区中提出自己的观点,认为Web版工具都不可靠,甚至看见Web版工具就劝返… … 工具Web化逐渐成为一种趋势,比如&…

如何使用Bypass-Url-Parser实现URL绕过并访问40X受保护页面

关于Bypass-Url-Parser Bypass-Url-Parser是一款功能强大的URL绕过工具,该工具可以使用多种方法实现URL绕过并访问目标站点的40X受保护页面。 工具下载 由于该工具基于Python 3 开发,因此我们首先需要在本地设备上安装并配置好Python 3环境。接下来&a…

PLC实验—西门子S7 1200读取超声波传感器数据

PLC实验—西门子S7 1200读取超声波传感器数据 US-016超声波测距模块 实验箱上是US-016超声波测距模块,其有关信息可以看实验室的博客 US-016超声波测距模块 1号Pin:接VCC电源(直流5V) 2号Pin:量程设置引脚&#xff…

GWT安装过程

1:安装前准备 (可以问我要) appengine-java-sdk-1.9.8 com.google.gdt.eclipse.suite.4.3.update.site_3.8.0 gwt-2.5.1 eclipse-jee-kepler-SR2-win32-x86_64.zip 2:安装环境上 打开eclipse Help –Install New Software… 选择Add –…

如何使用工时表管理项目和非项目的资源?

对新机会做出反应的能力是企业竞争优势的关键。项目不断涌现,企业需要了解具体的可用性以及是否有资源来接受新事物。更进一步来说,企业需要知道员工将时间花在哪里。 使用 8Manage工时表解决方案,你将始终拥有做出正确业务决策所需的全面知…

vue源码分析-响应式系统工作原理

上一章,我们讲到了Vue初始化做的一些操作,那么我们这一章来讲一个Vue核心概念响应式系统。 我们先来看一下官方对深入响应式系统的解释: 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性。 并使用 O…

LeetCode:构造最大二叉树;使用中序和后序数组构造二叉树;使用前序和中序数组遍历二叉树。

构造二叉树最好都是使用前序遍历;中左右的顺序。 654. 最大二叉树 中等 636 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点,其值为 nums 中的最大值。递归地在最大值 左边 的 子数组前缀上 构建…

人力资源管理系统

技术:Java、JSP等摘要:在当今的信息化社会,为了更有效率地工作,人们充分利用现在的电子信息技术,在办公室架设起办公服务平台,将人力资源相关信息统一起来管理,帮助管理者有效组织降低成本和加速…

【Linux】gcc/g++/gdb的使用

🔥🔥 欢迎来到小林的博客!!       🛰️博客主页:✈️小林爱敲代码       🛰️社区 : 进步学堂       🛰️欢迎关注:👍点赞🙌收…

Mask R-CNN 算法学习总结

Mask R-CNN 相关知识点整体框架1.Resnet 深度残差学习1.1 目的1.2 深度学习深度增加带来的问题1.3 Resnet实现思想【添加恒等映射】2.线性插值2.1 目的2.2 线性插值原理2.3 为什么使用线性插值?3.FPN 特征金字塔3.1 FPN介绍3.2 为什么使用FPN?3.3 自下而上层【提取特征】3.4 …

反激与正激的区别

之前学习了正激开关电源,但是对于正激和反激一直不是很清楚,网上找了一篇,觉得感觉该可以,以此记录。正激和反激是两种不同的开关电源技术一、正激(1)概述正激式开关电源是指使用正激高频变压器隔离耦合能量…

深度学习笔记:神经网络权重确定初始值方法

神经网络权重不可为相同的值,比如都为0,因为如果这样网络正向传播输出和反向传播结果对于各权重都完全一样,导致设置多个权重和设一个权重毫无区别。我们需要使用随机数作为网络权重 实验程序 在以下实验中,我们使用5层神经网络…

设计模式-服务定位器模式

设计模式-服务定位器模式一、背景1.1 服务定位模式1.2 策略模式二、代码实战2.1 服务定位器2.2 配置ServiceLocatorFactoryBean2.3 定义一个支付的接口2.4 根据不同类型处理Bean2.5 controller层三、项目结构及测试结果3.1 测试结果3.2 项目结构及源码(欢迎star)四、参考资料一…

进程管理(进程概念、查看进程、关闭进程)

1.进程 程序运行在操作系统中,是被操作系统所管理的。 为管理运行的程序,每一个程序运行的时候,便被操作系统注册为系统中的一个:进程 并会为每一个进程都分配一个独有的:进程ID(进程号) 2. 查…

Paddle OCR Win 11下的安装和简单使用教程

Paddle OCR Win 11下的安装和简单使用教程 对于中文的识别,可以考虑直接使用Paddle OCR,识别准确率和部署都相对比较方便。 环境搭建 目前PaddlePaddle 发布到v2.4,先下载paddlepaddle,再下载paddleocr。根据自己设备操作系统进…

代码随想录算法训练营第四十天 | 343. 整数拆分,96.不同的二叉搜索树

一、参考资料整数拆分https://programmercarl.com/0343.%E6%95%B4%E6%95%B0%E6%8B%86%E5%88%86.html 视频讲解:https://www.bilibili.com/video/BV1Mg411q7YJ不同的二叉搜索树https://programmercarl.com/0096.%E4%B8%8D%E5%90%8C%E7%9A%84%E4%BA%8C%E5%8F%89%E6%90…