• 第7讲：v-bind属性绑定,v-model双向绑定,v-on事件监听使用

    目录

    1.v-bind双向绑定
    2.v-model双向绑定
    3.v-on事件绑定

    一.v-bind双向绑定

    1.v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），Vue官方提供了一个简写方式 :bind，例如：
    2. <a v-bind:href="url">a>
    4. <a :href="url">a>
    2.v-bind  主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。

    示例











    代码示例1

    1.     <div id="demo">
    2.         <a  href="#" v-bind:href="url">
    3.             <img v-bind:class="c" src="logo.png" alt="">
    4.         </a>
    5.     </div>
    6.     <script>
    7.         var app=new Vue({
    8.             el:'#demo',
    9.             data:{
    10.                 url:'http://www.qq.com',
    11.                 c:'myred'
    12.             }
    13.         });
    14.     </script>

    代码示例2

    1.         <div id="box"> 
    2. 			<img v-bind:src="url" :width='w'/>
    3. 			<img :src="url" :width='w'/>
    4. 		</div>
    5. 		<script type="text/javascript">
    6. 			new Vue({
    7. 				el: '#box',
    8. 				data: {
    9. 				   url:'logo.png',
    10. 				   w:'100px'
    11. 				}
    12. 			})
    13. 		</script>

    3.绑定 HTML Class

    我们可以传给 v-bind:class 一个对象，以动态地切换 class

    对象语法

    1. <div id="app" v-bind:class="{active: isActive}">
    2.     你好
    3. </div>
    4. <script>
    5.     var vm = new Vue({
    6.         el: '#app',
    7.         data: {
    8.             isActive: true
    9.         }
    10.     });
    11. </script>

    数组语法

    1. <div id="app" v-bind:class="[activeClass, dangerClass]">
    2.     v-bind
    3. </div>
    4. <script>
    5.     var vm = new Vue({
    6.         el: '#app',
    7.         data: {
    8.             activeClass: 'active',
    9.             dangerClass: 'text-danger'
    10.         }
    11.     });
    12. </script>

    绑定内联样式

     v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名： 

    1. <div id="app" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">测试</div>
    2. <script>
    3.     var vm = new Vue({
    4.         el: '#app',
    5.         data: {
    6.             activeColor: 'red',
    7.             fontSize: 30
    8.         }
    9.     });
    10. </script>

    直接绑定到一个样式对象通常更好，这会让模板更清晰

    1. <div id="app">
    2.     <div v-bind:style="styleObject">测试效果</div>
    3. </div>
    4. <script>
    5.     var vm = new Vue({
    6.         el: '#app',
    7.         data: {
    8.             styleObject: {
    9.                  color: 'red',
    10.                  fontSize: '13px'
    11.             }
    12.         }
    13.     });
    14. </script>

    二.v-model双向绑定

    v-model一般用于数据的双向绑定（表单元素设置了之后会忽略掉value，checked，selected），常用在表单 及