欢迎光临散文网 会员登陆 & 注册

2.VUE模板语法

2022-08-07 16:12 作者:我的GIS  | 我要投稿

Vue模板语法:

容器里的代码被称为“Vue模板”

“模板语法”包括两大类“插值语法”“指令语法”

    1.插值语法:

        功能:用于解析标签体内容

        写法:{{xxx}}, xxx是js表达式(可以得到值的js代码),且可以直接读取到“data”中的所有属性


    2.指令语法:

        功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...)

        举例:v-bind:href="xxx" 或简写为 :href="xx", xxx同样要写js表达式,且可以直接读取到data中所有属性

        备注:Vue中有很多的指令,且形式都是: v-????, 此处用v-bind举例


<body>

    <!-- 准备好一个容器-->

    <div id = "root">

        <h1>插值语法</h1>

        <h3>你好,{{name}}</h3>

    

        <h1>指令语法</h1>

        <a v-bind:href = "url" x = "hello">链接1</a>

        <a :href = "ur1" :x = "hello">链接2</a>

    </div>

</body>


<script type="text/javascript">

    new Vue({

        el: '#root',

        data: {

            name: 'jack',

            url: 'http://www.baidu.com',

            hello: '你好'

        }

    })

</script>


2.VUE模板语法的评论 (共 条)

分享到微博请遵守国家法律