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…

Linux字符设备号

一. 简介 为了方便管理&#xff0c;Linux 中每个设备都有一个设备号。 为了后面字符设备驱动的学习&#xff0c;本文了解一下 设备号组成与分配。 二. Linux字符设备号的组成与分配 1. 设备号的组成 设备号由主设备号和次设备号两部分组成&#xff0c;主设备号表示某一个…

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;从而降低成本。…

Python列表去重且不改变元素顺序的代码

Python列表去重且不改变元素顺序的方法 Python列表去重&#xff0c;如果不考虑原来元素的顺序&#xff08;基本顺序&#xff09;的话&#xff0c;可以使用Python内置的set()函数对列表进行转换去重&#xff0c;然后转换会列表&#xff0c;这是因为set()集合本身就具备去重的功…

利用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…

Mysql允许局域网或外部网络访问

1、配置服务器监听 首先&#xff0c;应该让服务器监听想要共享的ip地址。 (1) windows找到安装路径下的 my.ini&#xff1b; (2) linux 找到安装路径下的 my.cnf&#xff1b; [mysqld] bind_address0.0.0.0 # 8.0.22版本之前&#xff0c;只支持设置一个地址(*, 0.0.0.0, or …

桥接和享元模式(结构型设计模式)的 C++ 代码示例模板

文章目录 前言代码仓库桥接模式&#xff08;Bridge&#xff09;享元模式&#xff08;Flyweight&#xff09;总结参考资料作者的话 前言 桥接和享元模式&#xff08;结构型设计模式&#xff09;的 C 代码示例模板。 代码仓库 yezhening/Programming-examples: 编程实例 (githu…

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…

geemap学习笔记031:使用Earth Engine数据--FeatureCollection

前言 本节将会详细的介绍一下Earth Engine数据类型FeatureCollection的加载、创建、Filtering、可视化等等。 1 导入库并显示地图 import ee import geemap ee.Initialize()2 加载FeatureCollection Map geemap.Map() fc ee.FeatureCollection(TIGER/2016/Roads) #加载Ro…

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;因为定时异常可能会意外地覆盖比预期更多的路径&…