模板语句——02

模板语句的数据来源

1.谁可以给模板语句提供数据支持? data选项

2.data选项的类型是什么? Object | Function (对象或者函数)

3.data配置项的专业叫法:vue 实例的数据对象。(data实际上是给整个)vue实例提供数据的来源

4.对象必须是纯粹的对象(含有零个或多个的Keyvalue 对)

5.data数据如何插入到模板语句当中?

{{}}这是vue框架自己给自己搞的一套语法,别的框架看不懂,浏览器也是不能够识别的

vue框架是自己是能够看得懂。这种语法在vue中被称为:模板语法中的插值语法(有的人叫胡子语法)

怎么用?

{{ datade 的 key}}

插值语法的小细节:

{这里不能有其他字符包括空格{}这里不能有其他的字符包括空格}


程序:

<body>

<div id='app'></div> //指定挂载的位置

//vue 程序

<script>

new vue ({

template:'<h1>最近非常火爆的电视剧{{name}},它的上映日期是{{releaseTime}}

主角是{{lead.name}},年龄是{{lead.age}}岁。其他演员包括 {{ actors[0].name}}{{actores[0].age}},{{ actors[1].name}}{{actores[2].age}}。 {{a.b.c.d.name}}

</h1>`, // {这里不能有其他字符包括空格{}这里不能有其他的字符包括空格}

data : {

name:'美美11'

releaseTime:'2024/3/27',

lead:{

name : '甜甜',

age : 18

},

actors : [

{

name : '安心'

age : ' 30 '

},

{

name : '高启强'

age : ' 30 '

}

],

a : {

b : {

c : {

d : {

name : '好美丽'

}

}

}

}

}

}).$mount('#app')

</script>

</body>

相关推荐
Irene199113 分钟前
Prettier 配置文件 .prettierrc.js 和 .prettierrc.json 的区别
javascript·json
国服第二切图仔1 小时前
DevUI Design中后台产品开源前端解决方案之Carousel 走马灯组件使用指南
前端·开源
无限大61 小时前
为什么浏览器能看懂网页代码?——从HTML到渲染引擎的奇幻之旅
前端
福尔摩斯张1 小时前
Linux信号捕捉特性详解:从基础到高级实践(超详细)
linux·运维·服务器·c语言·前端·驱动开发·microsoft
2401_860319521 小时前
DevUI组件库实战:从入门到企业级应用的深度探索 ,如何快速安装DevUI
前端·前端框架
计算机毕设VX:Fegn08951 小时前
计算机毕业设计|基于springboot + vue服装商城系统(源码+数据库+文档)
数据库·vue.js·spring boot·课程设计
cc蒲公英1 小时前
javascript有哪些内置对象
java·前端·javascript
zhangwenwu的前端小站2 小时前
vue 对接 Dify 官方 SSE 流式响应
前端·javascript·vue.js
王林不想说话2 小时前
受控/非受控组件分析
前端·react.js·typescript
_杨瀚博2 小时前
VUE中使用AXIOS包装API代理
前端