模板语法

_{vue中两大模板语法}

_{1. 插值}

• 功能：用于解析标签体内容
• 语法：{{xxx}}，xxx是js表达式且可以读取到data中的所有属性

2. 指令

• 功能：用于解析标签（标签属性、标签体内容、绑定时间....）
• 语法：v-bind:href="xxx" 或 :href="xxx"，xxx同样为js表达式且可以读取到data中的所有属性

html

<!-- 准备一个容器 -->
<div id='root'>
    <h1>插值语法：</h1>
    <h3>{{msg}}</h3>

    <h1>指令语法：</h1>
    <!-- v-bind指令 -->
    <a v-bind:href="url">点我去百度</a>
    <!-- v-bind指令简写 -->
    <a :href="url2">点我去新浪</a>
</div>

js

Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//创建vue实例
var vm = new Vue({
  el:'#root',//绑定元素
  data:{ //为模板提供数据
      msg:'hello Vue!',
      url:'https://www.baidu.com',
      url2:'https://www.sina.com.cn'
  },
});