Vue基础知识(一)-插值语法

更新时间:2023-06-17 03:34:40 阅读: 评论:0

randy harrisonVue基础知识(⼀)-插值语法
1.mustache语法( 也叫双⼤括号)
mustache : 英⽂是胡须 / 胡⼦的意思,因为 {{ }} 像⼈的脸上两边的胡⼦(⾃⾏脑补)
⽤法:在html标签中 插⼊ {{ 变量名 }} ,来显⽰⾃⼰要展⽰的数据
注意:mustache语法中可以写简单的表达式
代码如下:
加拿大硕士申请条件<div id="app">
<!-- mustache语法中可以写简单的表达式 -->
<h1>
{{firstName + ' ' + lastName}}
</h1>
物主代词<h2>
{{msg}}
</h2>
<!-- mustache语法中可以写简单的表达式 -->
<h3>
{{ count * 2}}
2020年中秋国庆晚会</h3>
</div>
<script>
//创建Vue实例,得到 ViewModel
我回来了英文
const vue = new Vue({
el: "#app",
data: {
firstName: 'Kobe',
lastName: 'Bryant',
becau of you 歌词msg: '你好啊',贤惠的意思
count: 200
},
methods: {}
});
</script>
2.v-text
特点: 和原⽣js的innerText属性类似,作⽤和mustache语法⼀样,但是没有mustache语法那么灵活,因为它只能写⼀个固定的值,并不能像mustache语法⼀样能写表达式,对⼀些字符串进⾏拼接操作等等一辈子的英文
结果并没有展⽰张三,⽽是替换了原先的内容
抱负是什么意思注意: 修改了msg的数值时,被v-once修饰的标签的数据没有发⽣改变
5.v-pre
特点:标签具有v-pre,界⾯会原封不动地展⽰标签内的内容,不会解析mustache语法等代码如下:
<div id="app">
6.v-cloak
<style>
二年级英语[v-cloak]{
display: none;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-cloak>
{{msg}}
</h2>
</div>
<script>
/
/创建Vue实例,得到 ViewModel
tTimeout(function(){
const vue = new Vue({
el: "#app",
data: {
msg: '你好啊',
},
methods: {}
});
},1000)
</script>
⽤⼀个⼀秒的定时器来检验⼀下,⼀秒后显⽰

本文发布于:2023-06-17 03:34:40,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/78/972569.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:语法   标签   数据
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图