01-学习vue笔记分享-mustache语法

最新推荐文章于 2022-12-22 00:21:52 发布

柯柯来康康

最新推荐文章于 2022-12-22 00:21:52 发布

阅读量1.3k

点赞数

分类专栏：学习知识分享 vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42647901/article/details/107175110

版权

mustache语法与部分指令

语法

mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式；
mustache用{ {}}表示；

<div id="app">
        <h2>{
  {message}}</h2>
        <h2>{
  {message}},kjk</h2>
        <!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
        <h2>{
  {firstName + lastName}}</h2>
        <h2>{
  {firstName + " " + lastName}}</h2>
        <h2>{
  {firstName}} {
  {lastName}}</h2>
        <h2>{
  {counter * 2}}</h2>

    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello",
                firstName: "kobe",
                lastName: "bryant",
                counter: 1000
            },
        })
    </script>

指令

v-once

1、该指令表示元素和组件只渲染一次，不会跟随数据的改变而改变。

2、该指令后面不需要跟任何表达式（v-for则需要）。

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <h2 v-once>{
  {message}}</h2>
        <!-- v-once不随数据改变而改变 -->
        <h2>{
  {message}}</h2>
    </div>
    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                message: "hello vscode"
            },
            methods: {}
        });
    </script>
</body>

在控制台输入以下代码改变message的数据，可发现v-once所在行数据不会重新渲染。

v-text v-html

v-text与v-html指令都可以更新页面元素的内容，不同的是，v-text会将数据以字符串文本的形式更新，而v-html则是将数据以HTML标签的形式更新。需要注意的是，v-text、v-html指令会替换掉页面整个的内容。

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <h2>************{
  {message}}************</h2>
        <h2>************{
  {html}}************</h2>
        <h2 v-text="message">************</h2>
        <h2 v-text="html">************</h2>
        <h2 v-html="html">************</h2>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                message: "hello",
                html: "<h2 style='color:blue'>Vue是现在最流行的框架之一</h2>"
            },
            methods: {}
        });
    </script>
</body>

分析：

1、页面内容******在有v-text v-html俩个指令的时候都会被替换成相应内容；

2、v-text会将数据以字符串文本的形式更新，而v-html则是将数据以HTML标签的形式更新。

v-pre

类似于HTML的一个标签pre，指定显示的内容的格式；

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <h2>{
  {message}}</h2>
        <h2 v-pre>{
  {message}}</h2>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                message: "hello",
            },
            methods: {}
        });
    </script>
</body>

分析：即使data里面定义了message这里仍然是显示的{ {message}}

v-cloak（ 需要配合css使用(解决：插值表达式闪烁的问题)）

在某些情况下，对于vue.js的引用因为某些原因没有加载完成，或者是加载有延迟时，未编译的Mustache标签就无法正常显示。我们可以用v-cloak，这个指令保持在元素上直到关联实例结束编译。和 CSS ： [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

当我正常代码运行时，在页面加载时会闪烁，然后才会加载完成，如下：

为了更明显，我在下面的例子中，模拟将网页加载速度变慢，此时就可以看见，页面最先开始会显示出插值表达式，只有vue.js加载完成后，才会渲染成正确的数据。

    setTimeout(() => {
            new Vue({
                el: '#app',
                data: {
                    msg: 'Vue'
                }
            })
        }, 2000)

这个问题加入CSS可以被很好地解决： [v-cloak] { display: none } ，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

同样的，在 html 中的加载点加上 v-cloak，也可以解决这一问题

<body>
<div id="app" v-cloak>
    <p>{
  {message}}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'hello world!'
        }
    });
</script>

但是，也会发生失效的案例：那就只好在样式CSS写上[v-cloak] { display: none }；

v-bind

1、前面几个指令主要作用都是插入模板内容中，而v-bind可以用来动态绑定属性（比如 img 的 src、title 属性和 a 元素的 href 属性等等）和样式（可以用style的形式进行内联样式的绑定，也可以通过指定 class 的形式指定样式)；

2、缩写是：

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <input type="button" value="按钮" v-bind:title="Title" v-bind:style="{color:Color,width:Width+'px'}">
    </div>
    <!--v-bind：可以用来在标签上绑定标签的属性和样式，对于绑定的内容，可以对该内容进行编写合法的 JavaScript表达式-->
    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                Title: "这是我自定义的title属性",
                Color: "red",
                Width: "120"
            },
            methods: {}
        });
    </script>
</body>

效果如下：

分析：

1、值得关注的是，v-bind绑定的属性值中，可以对该内容进行编写合法的 JavaScript表达式；如：{color:Color,width:Width+'px'}

2、注意此处px要加引号

3、上面代码可以简写成<input type="button" value="按钮" :title="Title" :style="{color:Color,width:Width+'px'}">

v-bind动态绑定class（对象语法）也就是class后面跟着是一个对象

<style>
        .active {
            color: red;
        }

        .line {
            background-color: royalblue;
            width: 100px;
        }
    </style>

设置激活类的样式如上

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <!-- v-bind:class="{类名1：属性值1，类名2：属性值2}" -->
        <h2 v-bind:class="{active:isActive,line:isLine}">{
  {msg}}</h2>
        <button v-on:click="btnClick">按钮</button>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                msg: "kk",
                isActive: true,
                isLine: true
            },
            methods: {
                btnClick: function () {
                    this.isActive = !this.isActive
                    this.isLine = !this.isLine
                }
            }
        });
    </script>
</body>

代码结果如下：

分析：

1、先给不同类名赋予样式，用v-bind动态绑定类名时，样式也会随之切换；

2、对象语法：v-bind:class="{类名1：属性值1，类名2：属性值2}"

3、active，line俩个类先在实例中的data默认布尔值为true，确保能够被应用。再给按钮一个点击事件（v-on：click），实现点击的时候，类的布尔值取反也就是实现了点击实现再点击取消的效果，原则上就是类的显示和隐藏

总结：

还有以下用法：

1、直接通过{}绑定一个类 : <h2 :class = "{'active : isActive'}">hello world</h2>,此时isActive是布尔值

2、也可以通过判断，传入多个值： <h2 :class = "{'active : isActive', 'line' : isLine}">hello world</h2>此时isActive、 isLine是布尔值

3、和普通的类同时存在，并不冲突，注：如果俩者都为真，则会同时存在三个类

<h2 class="title" ; :class = "{'active : isActive', 'line' : isLine}">hello world</h2>

4、如果过于复杂，可以放在一个methods或者computed中，注：下面的classes是一个计算属性

<h2 class="title" ; :class = "classes">hello world</h2>

{'active : isActive', 'line' : isLine}则是放在了计算属性中，以下是放在方法中的案例

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <!-- v-bind:class="{类名1：属性值1，类名2：属性值2}" -->
        <h2 v-bind:class="{active:isActive,line:isLine}">{
  {msg}}</h2>
        <h2 v-bind:class="classes()">{
  {msg}}</h2>
        <button v-on:click="btnClick">按钮</button>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                msg: "kk",
                isActive: true,
                isLine: true
            },
            methods: {
                btnClick: function () {
                    this.isActive = !this.isActive
                    this.isLine = !this.isLine
                },
                classes: function () {
                    return {
                        active: this.isActive,
                        line: this.isLine
                    }
                }
            }
        });
    </script>
</body>

v-bind动态绑定class（数组语法）class后面跟得是数组

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <h2 :class="[active,line]">{
  {msg}}</h2>
        <h2 :class="classes()">{
  {msg}}</h2>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                msg: "hello",
                active: "a",
                line: "b"
            },
            methods: {

最低0.47元/天解锁文章

柯柯来康康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-学习vue笔记分享-mustache语法

mustache语法与部分指令语法 mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式； mustache用{{}}表示； <div id="app"> <h2>{{message}}</h2> <h2>{{message}},kjk</h2>  .
复制链接

扫一扫