vue学习记录：事件修饰符、v-model、Class 与 Style 绑定

一、vue.js事件修饰符

1. .stop 阻止冒泡
2. .prevent 阻止默认行为
3. .self 实现只有点击当前元素时候，才会触发事件处理函数
4. .capture 实现捕获触发事件的机制
5. .once 只触发一次事件处理函数

 <div id="app">
    <!-- 使用  .stop  阻止冒泡 -->
   <div class="inner" @click="div1_out">
      <input type="button" value="stop" @click.stop="stop_thing">
	  <!-- 使用 .prevent 阻止默认行为 -->
	  <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
	  <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
	  <input type="button" value="self" @click.self="self_thing">
	  <!-- 使用  .capture 实现捕获触发事件的机制 -->
	  <input type="button" value="capture" @click.capture="capture_thing">
	  <!-- 使用 .once 只触发一次事件处理函数 -->
	   <a href="http://www.baidu.com" @click.once="once_thing">once。有问题，先去百度</a>
    </div>
  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        div1_out() {
          console.log('这是触发了 input父亲 inner div 的点击事件')
        },
        stop_thing() {
          console.log('这是触发了 stop 按钮 的点击事件')
        },
		self_thing() {
		  console.log('这是触发了 self 按钮 的点击事件')
		},
		capture_thing() {
		  console.log('这是触发了 capture 按钮 的点击事件')
		},
       once_thing() {
          console.log('触发了 once 的点击事件')
        }
      }
    });
  </script>

二、v-model：数据的双向数据绑定指令

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定，而 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定，但 v-model 只能运用在 表单元素中，例如：input(radio, text, address, email…)、 select 、 checkbox 、 textarea等等。

  <div id="app">
	  <!--用插值表达式 获取msg的值 -->
    <h4>{{ msg }}</h4>
    <!-- 使用  v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 v-model 只能运用在表单元素中-->
    <input type="text" style="width:100%;" v-model="msg">
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是v-model，当页面数据变动时，我也会随着改变，不信你可以试试'
      },
      methods: {
      }
    });
  </script>

三、vue中的样式-class

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

官方文档介绍： https://cn.vuejs.org/v2/guide/class-and-style.html

1. 内嵌式、外联式

  <div id="app">
  <!--正常的添加类样式-->
   <h1 class="red thin">你好，我是h1</h1>

    <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定 -->
    <h1 :class="['thin', 'italic']">你好，我是h1</h1>

    <!-- 在数组中使用三元表达式 -->
    <h1 :class="['thin', 'italic', flag?'active':'']">你好，我是h1！！！</h1>

    <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
    <h1 :class="['thin', 'italic', {'active':flag} ]">你好，我是h1！！！</h1>

    <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->
    <h1 :class="classObj">你好，我是h1！！！</h1>


  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true,
        classObj: { red: true, thin: true, italic: false, active: false }
      },
      methods: {}
    });
  </script>

2. 行内式

   <div id="app">

    <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        styleObj1: { color: 'red', 'font-weight': 200 },
        styleObj2: { 'font-style': 'italic' }
      },
      methods: {}
    });
  </script>