• 技术文章 >web前端 >Vue.js

    深入浅析Vue中的模板语法:插值和指令

    青灯夜游青灯夜游2021-11-17 19:42:42转载114
    本篇文章带大家了解一下Vue中的模板语法,介绍一下插值语法、指令语法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    Vue有很多模板语法特别好用,就是在HTML中写一些Vue定义的一些模板语法,可以快速的展现数据,绑定方法等。这也就是Vue上手很快的原因之一。

    1. 模板的理解

    我们先来理解理解什么是模板?

    模板就是动态html页面,这里面包含了一些js语法代码

    Vue的模板语法分为两种,分别是:

    1、插值语法:

    2、指令语法:

    【相关推荐:《vue.js教程》】

    下面我们来介绍几个常用的指令语法。

    2. 指令语法:强制数据绑定 v-bind:

    功能:指定变化的属性值

    完整写法

    v-bind:xxx='yyy'  // yyy会作为表达式解析执行

    简洁写法

    :xxx='yyy'

    单向数据绑定

    双向数据绑定 指令 v-model

    3. 指令语法:绑定事件监听 v-on:

    功能:绑定指定事件名的回调函数

    完整写法

    v-on:click='xxx'
    v-on:keyup='xxx(参数)'
    v-on:keyup.enter='xxx'

    简洁写法

    @click='xxx'
    @keyup='xxx'
    @keyup.enter='xxx'

    4. v-text与v-html

    v-text

    v-html

    1、作用:向指定节点中渲染包含html结构的内容。

    2、与插值语法的区别:

    3、严重注意:v-html有安全性问题!!!!

    <body>
        <div id='app'>
    
            <h2>1. 大括号表达式</h2>
            <p>{{msg}}</p>    <!--textContent -->
            <p>{{msg.toUpperCase()}}</p>
    
            <p v-html="msg"></p> <!--innerHTML -->
    
            <p v-text="msg"></p> <!--textContent -->
            <p v-text="msg.toUpperCase()"></p>
    
    
            <h2>2. 指令一: 强制数据绑定</h2>
            <img src="imgUrl" alt="Vue">  <!--无法显示图片,没有识别成js表达式 -->
            <img v-bind:src="imgUrl" alt="Vue"> <!--属性值识别成js表达式 -->
            <img :src="imgUrl" alt="Vue">
    
    
            <h2>3. 指令二: 绑定事件监听</h2>
            <button v-on:click="test1">test1</button>
            <button @click="test1">test1</button>
            
            <button @click="test2('abc')">test2</button> <!--可以传参数 -->
            <button @click="test2(msg)">test2</button>
        </div>
    
    
    
        <script src="../js/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    msg: '<a href="http:www.baidu.com">I Will Back!</a>',
                    imgUrl: "https://cn.vuejs.org/images/logo.png"
                },
                methods: {
                    test1() {
                        alert('heheh');
                    },
                    test2(content){
                        alert(content);
                    }
                }
    
            })
        </script>
    </body>

    1.png

    5. 条件渲染指令

    移除标签删除

    写法:

    1. v-if="表达式"
    2. v-else-if="表达式"
    3. v-else="表达式"

    适用于:切换频率较低的场景。 特点:不展示的DOM元素直接被移除。 注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。

    添加样式隐藏(display: none)

    写法:v-show="表达式"适用于:切换频率较高的场景。 特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

    【备注】使用v-if的时候,元素可能无法获取到,而使用v-show一定可以获取到。

    比较v-if与v-show

    v-if是控制元素是否加载到页面上(有性能开销) v-show是控制元素的显示与隐藏 (初始创建时加载一次)

    <body>
        <div id="demo">
    
            <p v-if="ok">成功了</p> <!-- 移除标签删除 -->
            <p v-else>失败了</p>
    
            <p v-show="ok">又成功了</p> <!-- 添加样式隐藏 -->
            <p v-show="!ok">又失败了</p>
    
            <button @click="ok = !ok">切换</button>
        </div>
    
        <script src="../js/vue.js"></script>
        <script>
            new Vue({
                el: '#demo',
                data: {
                    ok: false,
                }
            })
        </script>
    </body>

    2.gif

    6. 总结

    一些常用的指令

    更多编程相关知识,请访问:编程入门!!

    以上就是深入浅析Vue中的模板语法:插值和指令的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    上一篇:总结分享一些关于vue的前端基础面试题 下一篇:vue项目中能引jquery吗
    php中文网线上培训班

    相关文章推荐

    • 手把手教你在vue2中利用svg开发一个环形进度条组件• 深入浅析Vue-Router中的导航钩子• vue路由学习之区分$route和$router,看看它们的区别• 浅谈Vue中动态组件怎么使用?• vue中什么是SPA和MPA?两者有什么差异?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网