Vue.js模板语法详解：插值与指令的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51045721/article/details/123724414

文章目录

- 插值语法
- 指令语法

vue 语法有这两大类

插值语法

功能：用于解析标签体内容
写法：{{xxx}} ，xxx 是 js 表达式，且可以直接读取 data 里面的所有属性

指令语法

功能：用于解析标签，包括：标签属性、标签体内容、绑定事件…
举例： v-bind：href = “xxx” 或者简写 :href = 'xxx" ,xxx 同样要写 js 表达式，并且可以直接读取到 data 里的所有属性
备注： vue 里面有很多属性，形式都是 v-xxx

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <script type="text/javascript" src="./vue.js"></script>
</head>

<body>
    <!-- 准备容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>hello,{{name}}</h3>
        <hr>

        <h1>指令语法</h1>
        <!-- 
            v-bind 可以动态的绑定任何属性
            简写为 ：
         -->
        <a v-bind:href="url" w="hh">look,点开试试</a>
        <a :href="url" w="hh">look,点开试试666</a>


    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时产生生产提示

    new Vue({
        el: '#root',
        data: {
            name: 'hxb',
            url: 'https://blog.youkuaiyun.com/m0_51045721/article/details/123720957?spm=1001.2014.3001.5501',
            w: 'dn'
        }
    })
</script>

</html>