vue 模板

1. vue 语法有这两大类

插值语法

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

指令语法

1. 功能：用于解析标签，包括：标签属性、标签体内容、绑定事件…
2. 举例： v-bind：href = “xxx” 或者简写 :href = 'xxx" ,xxx 同样要写 js 表达式，并且可以直接读取到 data 里的所有属性
3. 备注： 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>

在以后的学习中，要注意 多级结构，
红色框蓝色内容：看起来是一个字符串，实际上是 当作 表达式来处理的