Vue踩坑：Html属性差值弃用双大括号改用v-bind

input标签的placeholder属性

<input slot="right" type="number" pattern="[0-9]*" placeholder="{{phone_placeholder}}" autocomplete="off" v-model="user.phone" />

错误提示：

- placeholder="{{phone_placeholder}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

"placeholder"属性插值错误，如提示，使用 v-bind:placeholder 简写为 :placeholder 代替，即

<input slot="right" type="number" pattern="[0-9]*" :placeholder="phone_placeholder" autocomplete="off" v-model="user.phone" />

img标签的src属性

<div v-for="city in cityList">
  <div>城市名称：{{item.title}}</div>
  <div>城市ID：{{item.id}}</div>
  <div>城市图片：<img src="{{item.img}}"></div>  //这行是报错的
</div>

应改为

<div v-for="city in cityList">
  <div>城市名称：{{city.title}}</div>
  <div>城市ID：{{city.id}}</div>
  <div>城市图片：<img :src="city.img"></div>
</div>

a标签的href属性

href的两种使用：

<template>
  <div>
    <a :href='msg'>APP开发技术博客</a> 
    <a href='http://www.appblog.cn'>APP开发技术博客</a> 
  </div>    
</template>

<script>
export default: {
  data () {
    return: {
      msg: 'http://www.appblog.cn'
    }  
  }
}
</script>