Vue指令语法-蒲公英云

Vue指令语法

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

指令语法

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

写在标签中写死的href属性

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

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5YWL55qE5Zu-5biD_size_18_color_FFFFFF_t_70_g_se_x_16

通过插值语法绑定的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>

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

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

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5YWL55qE5Zu-5biD_size_20_color_FFFFFF_t_70_g_se_x_16

正确的绑定语法— 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 属性展示了正确的网址，且能够实现正确的跳转 watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5YWL55qE5Zu-5biD_size_20_color_FFFFFF_t_70_g_se_x_16 1