Vue基础语法

最新推荐文章于 2025-05-17 16:30:21 发布

bugsayend

最新推荐文章于 2025-05-17 16:30:21 发布

阅读量95

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_42707967/article/details/114381663

版权

一.Vue中template模板

二.vue中Mustache语法

vue中mustache语法就是插值表达式，其中插值表达式支持的操作：
1.部分模板中标签元素内容替换
2.不仅支持变量，而且支持简单的表达式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>模板</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>{{ msg }}</h1>
            <h2>{{firstName + lastName }}</h2>
            <h2>{{number * 2 }}</h2>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "hello",
                    firstName:"m",
                    lastName: "yt",
                    number:100

                },
                methods:{

                }
            })
        </script>
    </body>
</html>

三.vue中v-once指令

v-once用法如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>模板</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>{{ msg }}</h1>
            <h1 v-once>{{ msg }}</h1>
            
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "hello",
                    firstName:"mao",
                    lastName: "yaomin",
                    number:100

                },
                methods:{

                }
            })
        </script>
    </body>
</html>

该指令表示视图中元素或组件只会渲染一次，后续数据修改，但是绑定了v-once的标签元素内容不会修改

四. vue中v-text,v-html指令

v-text，将表达式的值当作文本渲染，v-html将表达式的值当作html内容渲染

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>模板</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 v-text="msg">aaa</h1>
            <h1 v-html="url">ccc</h1>
            
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    msg:"你好呀，韩梅梅",
                    url:"<a href='https://www.baidu.com'>百度链接</a>"
                },
                methods:{

                }
            })
        </script>
    </body>
</html>

注意：v-text和v-html都会将标签元素的元素内容会全部替换

五.vue中v-pre,v-cloak指令

vue中v-pre指令的作用是：原封不动显示标签元素的内容，不会进行解析渲染
vue中v-cloak指令的作用是，用来处理插值表达式等渲染闪屏，解决网速过慢渲染时，因为vue在解析玩标签元素后会自动删除元素中的v-cloak属性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>模板</title>
        <script src="vue.js"></script>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <h1>{{ msg }}</h1>
            
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    msg:"你好呀，韩梅梅",
                    url:"<a href='https://www.baidu.com'>百度链接</a>"
                },
                methods:{

                }
            })
        </script>
    </body>
</html>

六.vue中v-bind（：），v-for指令

v-bind是用来动态绑定标签元素的属性
绑定img中src属性

<img v-bind:src="url" alt="这是一张图片">
或
<img :src="url" alt="这是一张图片">

v-bind动态绑定class属性

在这里插入代码片