阿菜的Vue学习之旅(二)
一、Mustache语法的使用
今天阿菜在继续学习Vue的时候,碰到了老师讲的一种“轻逻辑”的语法——Mustache语法。
作为新手村的体验式程序员,阿菜在看懂晦涩的官方文档解释之前,先上手敲了一波代码。
index.html
<body>
<div id="app">
<!--Mustache的语法很简单,就是在html页面使用 {{variable}}-->
<h2>{{message}}</h2>
<h2>{{message}},李银河</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script src="js/vue.js"></script>
<script src="js/demo03.js"></script>
</body>
demo.js
ew Vue({
el: "#app",
data:{
message: "你好啊",
firstName: "Audrey",
lastName: "Hepburn",
counter: 100
}
})
结果如下:
====== 错误LOG ========================
在第一次运行的时候,阿菜看到的是这样的页面:
仔细一瞅代码,发现代码如下:
第一版 demo.js
ew Vue({
el: "#app",
//起始
message: "你好啊",
firstName: "Audrey", //这些变量本都属于data的,而少了data部分
lastName: "Hepburn",
counter: 100
//结尾
})
因此可不要粗心了哈!
二、Mustache 语法的使用总结
- 动态绑定数据
js部分:
let me = new Vue({
el: "#me",
data: {
name: "陈奕迅"
}
})
html部分:
<p id="me">{{name}}</p>
- 动态绑定属性
js部分:
let myBestFriend = new Vue({
el: "#myBestFriend",
data: {
myHref: "https://github.com/new"
}
})
html部分:
<a id="myBestFriend" href="{{myHref}}}">github</a>
- 三元表达式
js部分:
let ran = new Vue({
el: ".ran",
data: {
randomNum: Math.random() * 10
}
})
html部分:
<p class="ran">{{randomNum > 6 ? "随机数大于等于6" : "随机数小于6"}}</p>
- 算术运算
js部分:
let myJudge = new Vue({
el: ".myJudge",
data: {
basisPoints: 100
}
})
html部分:
<p class="myJudge">我的颜值:{{basisPoints * 1}}</p>
参考资料 :
WXML模板语法
—————————————————————————— —
上一篇
阿菜的Vue学习之旅(一)
下一篇
阿菜的Vue学习之旅(三)