Vue指令语法

 除了插值语法(解析标签体的内容)之外，还有指令语法(解析标签：包括标签属性，标签体内容，绑定事件等等)，这两者一起构成了Vue的模板语法

 指令语法

 标签中的属性，我们一般使用的都是指令语法进行数据绑定，例如a标签中的  href  属性包括其他的自定义标签属性

写在标签中写死的href属性 

<h1>指令语法</h1>
<a href="https://www.baidu.com/">跳转到百度1</a>

 

 通过插值语法绑定的href属性

 这是错误的绑定形式，标签体内部的属性，若是通过插值语法绑定，在页面上会展示错误，且控制台也会报错

<div id="root">
  <h1>指令语法</h1>
  <a href={{url}}>跳转到百度2</a>

</div>

<script>
  Vue.config.productionTip = false

  new Vue({
    el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
    // el: document.getElementById('#root'), // 也可以通过document点出来
    data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
      url: 'https://www.baidu.com/'
    }
  })
</script>

 页面上展示的是一个字符串形式的插值语法，跳转并不会有效果

控制台报错：错误信息是说这样的插值语法现在已经被移除了，在以前是可以使用的，现在需要使用 新的绑定语法

 

 正确的绑定语法-- v-bind:（简写为 ：）

控制台的报错信息已经将正确的绑定语法展示出来了，所以我们使用正确的绑定语法，通过 v-bind 和 简写方式( : ) 来绑定标签属性

<div id="root">
  <h1>指令语法</h1>
  <a v-bind:href='url'>跳转到百度2</a>
  
  <!-- 简写方式 -->
  <a :href='url'>跳转到百度2</a>
</div>

<script>
  Vue.config.productionTip = false

  new Vue({
    el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
    // el: document.getElementById('#root'), // 也可以通过document点出来
    data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
      url: 'https://www.baidu.com/'
    }
  })
</script>

在使用正确的绑定语法之后，标签内的 href 属性展示了正确的网址，且能够实现正确的跳转  

 这是因为，当我们使用 v-bind 绑定属性之后，Vue会默认的把 双引号内部 的东西，当做 js表达式来执行，所以会默认的去 data内部 找到对应的属性进行绑定

总结

Vue 的指令语法：

功能：用于解析标签：包括标签属性，标签体内容，绑定事件等等

举例：v-bind:href='xxx'，或简写为 :href='xxx'，xxx同样是 js表达式，且可以直接读取data中的所有属性

备注：Vue中的所有指令的完整形式都是以 v- 开头的，简写方式只有再说，本章知识拿v-bind举例