模板语句——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}}岁。其他演员包括 {{ actors0.name}}{{actores0.age}},{{ actors1.name}}{{actores2.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>

相关推荐
子兮曰1 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰1 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万1 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝1 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
A黄俊辉A1 天前
uniapp webview中实现 app和内嵌的H5双向通信
vue.js·json
三十而立洋1 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁2 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄2 天前
JavaScript 隐式全局变量解析
javascript
honkun62 天前
vue 表格组件 vxe-table 配置 ajax 请求自动加载数据与表单查询
vue.js·vxe-table
kybs19912 天前
全球灾害数据分析可视化 毕业设计-附源码66794
vue.js·spring boot·mysql·安全·django·c#·asp.net