阿菜的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模板语法