vue的语法模板与数据绑定的说明

vue的两大模板语法:

1.插值语法

2.指定语法

插值语法:{{}}         

功能:用于解析标签体的内容

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

指定语法:

功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...) 读取为js表达式

举例:v-bind:href:"xxx"或 简写成:href="xxx",xxx同样要写js表达式且可以直接读取到data中的所有属性

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

代码演示:

<div id="root"><h1>插值法</h1><h3>你好,{{name}}</h3><hr/><h1>指令语法</h1><!-- v-bind:value 单向数据绑定 简写成 :value --><a :href='school.url'>点我去学习1{{school.name}}</a><!-- <a v-bind:href="url">点我去学习2</a> -->
</div>
new Vue({el:'#root',data:{name:'jack',school:{name:'尚硅谷',url:'http://www.atguigu.com'}}
})

运行结果:

 Vue中2种数据绑定数据的方式:

            1.单向数据绑定(v-bind):数据只能从data流向页面

            2.双向数据绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data

单向数据绑定(v-bind):

数据只能从data流向页面

一般使用指定语法:v-bind:value简写成为::value

双向数据绑定(v-model):

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

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

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

代码演示:

<!-- 准备好一个容器 --><div id="root"><!-- 普通写法 --><!-- 单向数据绑定: <input type="text" v-bind:value="name"><br/>双向数据绑定: <input type="text" v-model:value="name"><br/> --><!-- 简写方式 -->单向数据绑定 <input type="text" :value="name"><br/>双向数据绑定 <input type="text" v-model="name"><!-- 如下代码是错误的   因为v-model只能应用于表单类元素上(输入类元素) --><!-- <h2 v-model:x="name"></h2> --></div><script>new Vue({el:'#root',data:{name:'尚硅谷'}})

 

 当双向数据绑定的时候 name改变name的值  单向数据绑定的值也会发生改变,如下:

eldata的两种写法:

el:

//el两种写法
const v = new Vue({
//el:'#root',
data:{
name:'尚硅谷'
}
})
v.$mount('#root') //第二种写法

data:

new Vue({el:'#root',//data的第一种写法:对象式/*data:{name:'尚硅谷'}*///data的第二种写法:函数式//data:function(){}//箭头函数没有自己的this//简写方式data(){console.log('@@@',this);//此处的this是vue的实例对象return{name:'尚硅谷'}}})

总结:

eldata的2种写法:

1.el有2种写法

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

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

2.data有2种写法

(1).对象式

(2).函数式

如何选择:目前哪种写法都可以 以后学习到组件时 data必须使用函数式,否则就会报错

3.一个重要的原则:

Vue管理的函数,一定不要写见箭头函数,一旦写了箭头函数,this就不再是Vue实例了

这里的函数是由vue调用的

如果写箭头函数 那函数就向外找this 找到window

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

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

相关文章

ChatGPT助力Excel数据分析:让你的工作事半功倍!

文章目录 一、ChatGPT简介二、ChatGPT在Excel数据分析中的应用1. 数据清洗2. 数据处理3. 数据分析4. 数据可视化 三、如何使用ChatGPT进行Excel数据分析1. 安装ChatGPT插件2. 输入问题或命令3. 查看结果并调整参数4. 导出结果并分享四、总结与展望 《巧用ChatGPT高效搞定Excel数…

苹果cms论坛多播放源自动采集 /采集在线影视网站/苹果CMS影视站采集器

源码介绍&#xff1a; 苹果cms论坛多播放源自动采集、采集在线影视网站&#xff0c;作为苹果CMS影视站采集器&#xff0c;它能轻松获取在线影视网站资源。 苹果 cms 论坛这是一个基于Vue和Gin实现的在线观影网站。项目采用 vite vue 作为前端技术栈, 使用 ElementPlus 作为 …

el-select 全选

<template><div class"container"><el-selectv-model"choosedList"clearablemultiplecollapse-tagsplaceholder"请选择"change"select_Change"><div style"padding: 0 20px; line-height: 34px">&l…

JVM快速入门

JVM 字节码 字节码文件的组成 字节码由五个部分组成&#xff1a;基础信息 常量池 字段 方法 属性 基础信息&#xff1a; 魔数、字节码文件对应的版本号、访问标识&#xff08;public final&#xff09;、该类的父类索引、该类实现哪些接口的索引 魔数&#xff1a;文件无法…

顶级加密混淆混淆工具测评:ipagurd

摘要 JavaScript代码安全需求日益增长&#xff0c;因此JavaScript混淆工具的使用变得广泛。本文将对专业、商业JavaScript混淆工具ipagurd进行全面评估&#xff0c;通过比较其功能、操作便捷性、免费试用、混淆效果等方面&#xff0c;帮助开发者选择适合自己项目需求的工具。 …

期货平仓日历(期货平仓日期汇总)

什么是期货平仓日历&#xff1f; 期货是一种高风险高收益的投资品种。而期货交易不同于股票等其他投资品种的交易&#xff0c;期货交易需要在一定时间内才能买卖。而期货平仓日历就是指期货交易中规定的所有合约的平仓日期汇总。 常见期货平仓日期和时间&#xff1f; 不同的…

关于EasyExcel 合并单元格方法该如何实现

在做一个业务的导出&#xff0c;目前遇到一个需求&#xff0c;如下图&#xff1a; import com.alibaba.excel.metadata.CellData; import com.alibaba.excel.metadata.Head; import com.alibaba.excel.write.handler.CellWriteHandler; import com.alibaba.excel.write.metad…

在mt5上哪里可以添加指数品种?

在MT5交易平台上&#xff0c;您可以通过以下步骤添加指数品种&#xff08;如股票指数、商品指数等&#xff09;到您的市场观察窗口中&#xff1a; Exness手机登录平台学习指南 步骤一&#xff1a;打开市场观察窗口&#xff1a; 打开MT5交易平台。 在左侧的“市场观察”窗口中&…

高集成高能效FAN21SV04MPX 单输入集成同步降压调节器技术解析

FAN21SV04MPX 是一款高效、小型、可编程频率的 4 A 集成同步降压调节器。FAN21SV04MPX 采用经过优化的互联方式将同步MOSFET和控制器/驱动器包含在一个封装中&#xff0c;使得设计人员能够使用最少的外部元件&#xff0c;在较小面积中满足高电流要求&#xff0c;从而降低成本。…

利用Spark构建房价分析与推荐系统:基于58同城数据的大数据实践

利用Spark构建房价分析与推荐系统&#xff1a;基于58同城数据的大数据实践 基于Spark的房价数据分析预测推荐系统引言技术栈功能概述项目实现1. 数据爬取与处理2. 大数据分析与可视化3. 房价预测模型4. 协同过滤推荐系统5. Web应用开发6. 数据管理与用户管理 总结与展望 基于Sp…

docker学习(十一、Redis集群存储数据方式)

文章目录 一、集群数据存储1.单机连接集群问题2.集群方式连接redis存储数据 二、 查看集群信息 docker搭建Redis集群相关知识&#xff1a; docker学习&#xff08;九、分布式存储亿级数据知识&#xff09; docker学习&#xff08;十、搭建redis集群&#xff0c;三主三从&#x…

MAC苹果笔记本电脑如何彻底清理垃圾文件软件?

苹果电脑以其流畅的操作系统和卓越的性能而备受用户喜爱。然而&#xff0c;随着时间的推移&#xff0c;系统可能会积累大量垃圾文件&#xff0c;影响性能。本文将介绍苹果电脑怎么清理垃圾文件的各种方法&#xff0c;以提升系统运行效率。 CleanMyMac X是一款专业的Mac清理软件…

【音视频 | AAC】AAC音频编码详解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

re:Invent 2023技术上新|Amazon Bedrock现提供对Anthropic最新模型Claude 2.1访问权限

亚马逊云科技已在 Amazon Bedrock 中推出 Anthropic 的 Claude 2.1 基础模型&#xff08;FM&#xff09;。此前&#xff0c;Anthropic 推出了其最新模型 Claude 2.1&#xff0c;此模型为企业提供了一些关键功能&#xff0c;如业界领先的 200,000 个令牌化上下文窗口&#xff08…

vivado 约束条件效率

约束条件效率 审查约束覆盖范围编写时间约束时&#xff0c;重要的是保持约束的简单性并指定它们仅在相关网表对象上。低效的约束导致更大的运行时间和更大的内存消耗。低效的约束也可能导致设计受到不适当的约束&#xff0c;因为定时异常可能会意外地覆盖比预期更多的路径&…

谈谈微服务的Ribbon知识点

Ribbon负载均衡 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端负载均衡的工具。(负载均衡RestTemplate调用)&#xff0c;在服务调用过程中的负载均衡一般使用SpringCloud的Ribbon 组件实现 , Feign的底层已经自动集成了Ribbon , 使用起来非常简单。 Configuration…

[Halcon模块] Halcon13.0查询算子模块归属

&#x1f4e2;博客主页&#xff1a;https://loewen.blog.csdn.net&#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;本文由 丶布布原创&#xff0c;首发于 CSDN&#xff0c;转载注明出处&#x1f649;&#x1f4e2;现…

案例082:基于微信小程序的跑腿管理系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

HarmonyOS概述

HarmonyOS概述 HarmonyOS系统架构 内核层—系统服务层—框架层—应用层 内核层&#xff1a; 内核子系统: HarmonyOS采用多内核设计&#xff0c;支持针对不同资源受限设备 &#xff0c;选用适合的OS内核&#xff0c;为上层提供基础操作系统能力。驱动子系统: 硬件驱动框架(H…

3-10岁孩子语文能力培养里程碑

文章目录 基础能力3岁4岁5岁6-7岁&#xff08;1-2年级&#xff09;8-9岁&#xff08;3-4年级&#xff09;10岁&#xff08;5年级&#xff09; 阅读推荐&父母执行3岁4-5岁6-7岁&#xff08;1-2年级&#xff09;8-9岁&#xff08;3-4年级&#xff09;10岁&#xff08;5年级&a…