Vue学习笔记（二）
程序员文章站
2022-03-10 16:43:25
1 插值操作1.1 Mustache语法Mustache ：双大括号 {{}}Title
{{message}}
...1 插值操作
1.1 Mustache语法
Mustache ：双大括号 {{}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>
<body>
<div id = "app">
<h1>{{message}}</h1>
<!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
<h2>{{first + second}}</h2>
<h2>{{first + ' ' + second}}</h2>
<h2>{{first}} {{second}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script type="text/javascript" src="js/vue.min.js" ></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好，大哥',
first:'床前明月光',
second:'疑是地上霜',
counter:100
}
})
</script>
</body>
</html>
解析：mustache语法中，不仅可以直接写变量，还可以写简单的表达式。
1.2 其他指令
① v-once ：该指令后面不需要跟任何表达式。该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。
② v-html ：该指令后面往往会跟上一个string类型，会将string的html解析出来并且进行渲染。
③ v-text：通常情况下，后面接一个string类型，不建议使用。
④ v-pre
⑤ v-cloak
本文地址：https://blog.csdn.net/weixin_43574277/article/details/107339423
下一篇： 顺序执行DOS命令