vue.js -- 模板语法

最新推荐文章于 2024-01-16 09:29:33 发布

爱划水de鲸鱼哥～

最新推荐文章于 2024-01-16 09:29:33 发布

阅读量139

点赞数 2

分类专栏： Vue3 文章标签： vue js html javascript

本文链接：https://blog.csdn.net/m0_47901007/article/details/118515793

版权

Vue3 专栏收录该内容

31 篇文章 4 订阅

订阅专栏

插值表达式

插值表达式是数据绑定最常见的形式就是使用 {{ }} 语法的文本插值，{{ }} 将会被替代为对应组件实例中 content property 的值。无论何时，绑定的组件实例上content property 发生了改变，插值处的内容都会更新。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js -- 模板语法</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    content: 'Hello Vue.js!'
                }
            },
            template: `<div>{{content}}</div>`
        })
        const vm = app.mount('#root');
    </script>
</body>
</html>

页面效果：
在这里插入图片描述

v-once

v-once 只渲染一次，当数据改变时，插值处的内容不会更新。

代码演示：

<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    content: 'Hello Vue.js!'
                }
            },
            template:'<div v-once>{{content}}</div>'
        })
        const vm = app.mount('#root');
    </script>
</body>

页面效果：
在这里插入图片描述

v-html

插值表达式会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML代码，需要使用 v-html。

v-html 有XSS风险，会覆盖子组件

使用插值表达式代码演示：

<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    content: '<b>Hello Vue.js!</b>'
                }
            },
            template:'<div>{{content}}</div>'
        })
        const vm = app.mount('#root');
    </script>
</body>

页面效果：
在这里插入图片描述

使用v-html代码演示：

<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    content: '<b>Hello Vue.js!</b>'
                }
            },
            template:'<div v-html="content"></div>'
        })
        const vm = app.mount('#root');
    </script>
</body>

页面效果：
在这里插入图片描述

v-bind

v-bind用于绑定数据和元素属性。

v-bind:title可以缩写成:title

代码演示：

<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    content: 'Hello Vue.js!'
                }
            },
            template:'<div :title="content">{{content}}</div>'
        })
        const vm = app.mount('#root');
    </script>
</body>

页面效果：
在这里插入图片描述

动态参数

代码演示：

        const app = Vue.createApp({
            data(){
                return {
                    content: 'Hello Vue.js!',
                    name: 'title'
                }
            },
            template:'<div :[name]="content">{{content}}</div>'
        })

页面效果：
在这里插入图片描述

v-on

v-on用于绑定事件

v-on:click可以缩写成@click

代码演示：

        const app = Vue.createApp({
            data(){
                return {
                    content: 'Hello Vue.js!',
                    event:'click'
                }
            },
            methods:{
                handleClick(){
                    alert('handlClick');
                }
            },
            template:'<div @[event]="handleClick">{{content}}</div>'
        })

页面效果：
在这里插入图片描述

修饰符

修饰符是以.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符对于触发的事件调用 event.preventDefault()；。

代码演示：

  const app = Vue.createApp({
            data(){
                return {
                    content: 'Hello Vue.js!'
                }
            },
            methods:{
                handleClick(e){
                    // e.preventDefault();
                }
            },
            template: `
                <form action="https://cn.bing.com" @click.prevent="handleClick">
                    <button type="submit">提交</button>
                </form>
                `
        })