vue系列教程（七）模板

最新推荐文章于 2024-06-28 10:20:14 发布

菜鸟笔记本

最新推荐文章于 2024-06-28 10:20:14 发布

阅读量176

点赞数

分类专栏： vue 文章标签： vue模板 vue指令

本文链接：https://blog.csdn.net/qq_25983579/article/details/102999953

版权

vue 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

1. 简介

Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中也称为Mustache语法

2. 数据绑定的方式

a.双向绑定
v-model
b.单向绑定
方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
方式2：使用v-text、v-html

3. 其他指令

v-once 数据只绑定一次
v-pre 不编译，直接原样显示

4. 代码

<script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            let vm = new Vue({
                el:'#itany',
                data:{
                    msg:"hello vue.js"
                }
            })
        }
    </script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id = "itany">
        <!--v-model数据的双向绑定-->
        <input type="text" v-model="msg"/>
        <!--{{}}数据的单向绑定-->
        <h3>{{msg}}</h3>
        <!--v-cloak:该指令为了方式数据渲染的时候出翔{{}}的现象，需要配合css属性一起使用-->
        <h3>aa<span v-cloak>{{msg}}</span></h3>
        <!--绑定text标签会将所有的内容以文本形式输出-->
        <h3 v-text="msg"></h3>
        <!--绑定html标签，会将显示内容中的html标签进行隐藏-->
        <h3 v-html="msg"></h3>
        <!--v-once该指令表示只会执行一次-->
        <h3 v-once>{{msg}}</h3>
        <!--v-pre表示跳过元素的编译过程直接显示元素-->
        <h3 v-pre>{{msg}}</h3>
    </div>
</body>

github代码下载地址:https://github.com/xiangjianming/vueStart.git

菜鸟笔记本

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue系列教程（七）模板

1. 简介Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据模板就是{{}}，用来进行数据绑定，显示在页面中也称为Mustache语法2. 数据绑定的方式a.双向绑定v-modelb.单向绑定方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决方式2：使用v-text、v-html3. 其他指令v-once 数据只绑定一次...
复制链接

扫一扫

专栏目录