阿菜的Vue学习之旅（二）

kokunka

已于 2022-02-25 22:38:35 修改

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-01-29 23:25:04 首次发布

本文链接：https://blog.csdn.net/kokunka/article/details/122746287

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

阿菜的Vue学习之旅（二）

- - 一、Mustache语法的使用
  - 二、Mustache 语法的使用总结

一、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学习之旅（三）

kokunka

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阿菜的Vue学习之旅（二）

阿菜的Vue学习之旅（二）一、Mustache语法的使用二、Mustache 语法的使用总结三、引用Mustache.js的使用一、Mustache语法的使用今天阿菜在继续学习Vue的时候，碰到了老师讲的一种“轻逻辑”的语法——Mustache语法。作为新手村的体验式程序员，阿菜在看懂晦涩的官方文档解释之前，先上手敲了一波代码。index.html<body> <div id="app"> <!--Mustache的语法很简单，就是在html页
复制链接

扫一扫