vue语法（一）

最新推荐文章于 2024-02-04 14:52:21 发布

坏萝卜

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量65

点赞数 1

分类专栏： vue2 文章标签： vue

本文链接：https://blog.csdn.net/qq_52135740/article/details/118495563

版权

vue2 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

Mustache

可以通过Mustache语法（大括号）将data中的文本数据，插入到HTML中，并且数据是响应式。

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h3>{{message}}，world</h3>
        <!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
        <h2>{{code+name}}</h2>
        <h2>{{code+' '+name}}</h2>
        <h2>{{code}} {{name}}</h2>
        <h2>{{count * 20}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //编程范式：声明式编程
    //创建Vue实例
    const app = new Vue({
        el: '#app',
        data: {
            message: "hello",
            code: 'my',
            name: 'Name',
            count: 10
        }
    })
</script>

v-once

在某些情况下，我们可能不希望界面随意的跟随改变。这个时候我们就可以使用v-once指令

v-once:

1.该指令后面不需要跟任何表达式（比如之前的v-for后面是由跟表达式的）

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

<body>
    <div id="app">
        <h2 v-once>{{message}}</h2>
        <h3>{{message}}</h3>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //编程范式：声明式编程
    //创建Vue实例
    const app = new Vue({
        el: '#app',
        data: {
            message: "hello"
        }
    })
</script>

在这里插入图片描述

v-html

1.该指令后面往往会跟上一个string类型

2.会将string的html解析出来并且进行渲染

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h3 v-html="message"></h3>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //编程范式：声明式编程
    //创建Vue实例
    const app = new Vue({
        el: '#app',
        data: {
            message: "<a href='https://image.baidu.com/'>百度一下</a>"
        }
    })
</script>

v-pre

用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

<body>
    <div id="app">
        <h2>{{message}}</h2>                    //    <a href='https://image.baidu.com/'>百度一下</a>
        <h3 v-pre>{{message}}</h3>				// 			{{message}}
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //编程范式：声明式编程
    //创建Vue实例
    const app = new Vue({
        el: '#app',
        data: {
            message: "<a href='https://image.baidu.com/'>百度一下</a>"
        }
    })
</script>

v-bind

作用：动态绑定属性

缩写：：

预期：any （with argument）|Object （without argument）

参数： attrOrProp（optional）

案例动态绑定class属性

对象语法：

绑定方式：对象语法（class后面跟的是一个对象）

<head>
    <meta charset="UTF-8">
    <title>vue初体验</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 用法一：直接通过{}绑定一个类 -->
        <h2 :class="{active:isActive}">你好</h2>
        <!-- 用法二：也可以通过判断，传入多个值 -->
        <h2 :class="{active:isActive,line:isLine}">你好</h2>
        <!-- 用法三：和普通的类同时存在，并不冲突 -->
        <h2 class="title" :class="{active:isActive,line:isLine}">你好</h2>
        <!-- 用法四：如果过于复杂，可以放在一个methods或者computed中 注：classes是一个计算属性 -->
        <h2 class="title" :class="classes()">你好</h2>
        <button v-on:click="btnClick">切换</button>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //编程范式：声明式编程
    //创建Vue实例
    const app = new Vue({
        el: '#app',
        data: {
            isActive: true,
            isLine: true
        },
        methods: {
            btnClick: function () {
                this.isActive = !this.isActive
            },
            classes: function () {
                return { active: this.isActive, line: this.isLine }
            }
        },
        // computed: {
        //     classes: function () {
        //         return 'active'
        //     }
        // }
    })

数组语法：

<body>
    <div id="app">
        <h2 class="title" :class="[active,line]">{{message}}</h2>
        <h2 class="title" :class="getclass()">{{message}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //编程范式：声明式编程
    //创建Vue实例
    const app = new Vue({
        el: '#app',
        data: {
            active: 'aaa',
            line: 'bbb',
            message: "你好喔"
        },
        methods: {
            getclass: function () {
                return [this.active, this.line]
            }
        }
    })
</script>

案例动态绑定style属性

对象语法：

style后面跟的是一个对象类型

对象的key是css属性名称

对象的value是具体赋的值，值可以来自于data中的属性

<body>
    <div id="app">
        <h2 :style="{fontSize:finalSize+'px'}">{{message}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //编程范式：声明式编程
    //创建Vue实例
    const app = new Vue({
        el: '#app',
        data: {
            finalSize: 50,
            message: "你好喔"
        }
    })
</script>

数组语法：

style后面跟的是一个数组类型

多个值以，分割即可。

<body>
    <div id="app">
        <h2 :style="[finalSize,col]">{{message}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //编程范式：声明式编程
    //创建Vue实例
    const app = new Vue({
        el: '#app',
        data: {
            finalSize: { fontSize: '50px' },
            col: { color: 'red' },
            message: "你好喔"
        }
    })
</script>

计算属性computed

<body>
    <div id="app">
        <h2>总价格：{{totalPrice}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //编程范式：声明式编程
    //创建Vue实例
    const app = new Vue({
        el: '#app',
        data: {
            books: [
                { id: 1, name: 'a1', price: 119 },
                { id: 2, name: 'a2', price: 105 },
                { id: 3, name: 'a3', price: 98 },
                { id: 4, name: 'a4', price: 87 },
            ]
        },
        computed: {
            totalPrice: function () {
                let index = 0;
                for (let i = 0; i < this.books.length; i++) {
                    index += this.books[i].price
                }
                return index
            }
        }
    })
</script>

计算属性的缓存

methods和computed的区别：

计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。methods会调用多次。

<body>
    <div id="app">
        <h2>{{getName()}}</h2>
        <h2>{{getName()}}</h2>
        <h2>{{getName()}}</h2>
        <h2>{{getName()}}</h2>
        <h2>{{name}}</h2>
        <h2>{{name}}</h2>
        <h2>{{name}}</h2>
        <h2>{{name}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //编程范式：声明式编程
    //创建Vue实例
    const app = new Vue({
        el: '#app',
        data: {
            firstName: 'w',
            lastName: 'zz'
        },
        methods: {
            getName: function () { 
                console.log('getName');							//会执行四次
                return this.firstName + ' ' + this.lastName
            }
        },
        computed: {
            name: function () {									//只执行一次
                console.log('name');
                return this.firstName + ' ' + this.lastName

            }
        }
    })
</script>

计算属性setter和getter

每个计算属性都包含一个getter和一个setter

一般情况下setter方法不常用

<body>
    <div id="app">
        <h2>{{name}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //编程范式：声明式编程
    //创建Vue实例
    const app = new Vue({
        el: '#app',
        data: {
            firstName: 'w',
            lastName: 'zz'
        },
        computed: {
            name: {
                set: function (newValue) {
                    const names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                    console.log(this.firstName);
                    console.log(this.lastName);
                },
                get: function () {
                    return this.firstName + ' ' + this.lastName
                }
            }
        }
    })
</script>

坏萝卜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue语法（一）

Mustache可以通过Mustache语法（大括号）将data中的文本数据，插入到HTML中，并且数据是响应式。<body> <div id="app"> <h2>{{message}}</h2> <h3>{{message}}，world</h3>  <h2
复制链接

扫一扫

专栏目录