美文网首页
插值语法和指令语法

插值语法和指令语法

作者: 冰点雨 | 来源:发表于2021-12-19 16:53 被阅读0次

    总结:

     vue语法模板有两大类
                1.插值语法
                   功能:用于解析标签体内容
                   写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
                2.指令语法
                  功能:用于解析标签(包括:标签属性 标签体内容 绑定事件...)
                  举例:v-bind:href="xxx"   :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性
                  备注:Vue多很多指令,形式都是v-???
    

    插值语法

      <h3> {{name}}</h3>
    

    指令语法

    <a v-bind:href="school.url.toUpperCase()">去{{school.name}}旅游</a>
    

    使用

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>day1</title>
            <script type="text/javascript" src="../js/vue.js"></script>
        </head>
        <body>
            <div id="root">
                <h1>插值语法</h1>
                <h3>hello {{name}}</h3>
                <hr/>
                <h1>指令语法</h1>
                <a v-bind:href="school.url.toUpperCase()">去{{school.name}}旅游</a>
                <a :href="school.url">去旅游2</a>
            </div>
            <script type="text/javascript">
                 Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
                 new Vue({
                     el:"#root",
                     data:{
                         name:"世界",
                         school:{
                             name:'北京大学',
                             url:'https://www.baidu.com/'
                         }
                     }
                 })
            </script>
        </body>
    </html>
    

    相关文章

      网友评论

          本文标题:插值语法和指令语法

          本文链接:https://www.haomeiwen.com/subject/rxsofrtx.html