（3）vue (v-命令)

1. v-model

Vue 提供 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id='app'>
    <input type="text" v-model='inputValue'>
    <h1> {{ inputValue}}</h1>
  
  </div>

  <script>
    var vm = new Vue({
        el : "#app",
        data(){
            return{
                inputValue :' '
            }
        }
    })
  </script>

2.class与style绑定

v-bind

 <div id="app"> 
    <div v-bind:class=" { active: isActive}  ">
    </div>
 </div>
    
<script>
    var vm = new Vue({
    el: '#app',
    data() {
      return{
          isActive:true,
        }
      }
})
</script>

其中
<div v-bind:class=" { active: isActive} ">可以写为
<div :class=" { active: isActive} ">

<div :class="'div1'"></div>
<div class="div1"></div> //两种写法展现效果一样

html的形式     <div class="div1"></div>
vue原始写法	  <div v-bind:class="'div1'"></div>
vue单个		  <div :class="'div1'"></div>
vue多个	      <div :class="[ 'div1', is1? '':'div2']"></div>

html:       <div style="color: red;"></div>
vue单个:     <div :style="color: 'red'">77</div>
vue多个:     <div :style="color: 'red', width: isTrue? '100px': '200px'"></div>

<img :src="url" alt="">

var app = new Vue({
       el: '#app',
       data: {
       		url:"https://pics4.baidu.com/feed/f7246b600c3387441f759c744c3f6af1d72aa03b.jpeg?token=7e53d5f34ee6bb5236480720de526d02"
       }
       
   })