vue模板语法

Ciao。

已于 2022-08-14 21:22:34 修改

阅读量64

点赞数

分类专栏： vue2学习文章标签： vue.js 前端 javascript

于 2022-08-14 21:11:38 首次发布

本文链接：https://blog.csdn.net/Alive_m/article/details/126336388

版权

vue2学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

vue模板语法有两大类：

插值语法：
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
指令语法：
功能：用于解析标签：（包括：标签属性、标签体内容、绑定事件件…）
举例：v-bind：href="xxx"或简写为:href=“xxx”,xx同样要写js表达式，且可以直接读取到data中的所有属性

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script type="text/javascript" src="/excise/src/vue2.0/daima/js/vue.js"></script>
</head>
<body>

<div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr/>
    <h1>指令语法</h1>
    <a v-bind:href="school.url.toUpperCase()" :x="name">点我去{{school.name}}学习1</a>
    <a :href="school.url">点我去尚硅谷学习2</a>
</div>


<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            name: 'jack',
            school: {
                name: '尚硅谷',
                url: 'http://www.atguigu.com',
            }
        }
    })
</script>
</body>
</html>