第一章：vue2中常见的指令

一、关于vue中指令的介绍

二、关于属性绑定的指令

• 1、v-bind的使用(绑定html属性的标签)

  <div id="app">
      <p>关于v-bind的使用</p>
      <p v-bind:title="title">我是标签</p>
      <a v-bind:href="baidu">百度</a>
      <img v-bind:src="src" alt="">
      <div v-bind:class="className"></div>
      <div :class="[className,{classB:isB,classC:isC}]"></div>
      <div v-bind:class="className" v-bind:style="boxStyle"></div>
  </div>

  var app = new Vue({
      el: '#app',
      data: {
          title: '我是tite标签',
          baidu: 'https://www.baidu.com',
          src: 'https://cn.vuejs.org/images/logo.png',
          className: 'red',
          isB: true,
          isC: false,
          boxStyle: {
              'border': '1px solid #f00'
          }
      }
  })

二、关于操作DOM元素的指令

• 1、v-if判断是否显示(直接将DOM元素移除与添加)

  <div id="app">
      <p v-if="isShow">我是v-if标签的使用</p>
  </div>

  var app = new Vue({
      el: '#app',
      data: {
          isShow: false
      }
  })

• 2、v-if的扩展使用(v-else-if的使用)

  <div v-if="name=='1'">
      <label>用户名:</label>
      <!--使用v-bind:key是唯一区别的-->
      <input type="text" placeholder="请输入用户名" v-bind:key="1" />
  </div>
  <div v-else-if="name=='2'">
      <label>别名:</label>
      <input type="text" placeholder="请输入别名" v-bind:key="2" />
  </div>
  <div>
      <input type="text" v-model="name" />
  </div>

  var app = new Vue({
      el: '#app',
      data: {
          name: '1'
      }
  })

• 3、v-else的使用

  <p v-if="isShow">我是v-if标签的使用</p>
  <p v-else="isShow">我是v-else的</p>

  var app = new Vue({
      el: '#app',
      data: {
          isShow: false
      }
  })

• 4、v-show的使用(与v-if的区别在于这个是加了display:none)

  <div v-show="isShow" v-bind:class="[class1,class2]"></div>

  var app = new Vue({
      el: '#app',
      data: {
          isShow: false,
          class1: 'red',
          class2: 'border'
      }
  })

三、关于内容显示的指令

• 1、v-html显示内容会解析标签

  <div v-html="text1"></div>

• 2、v-text显示内容

  <div v-text="text1"></div>

  var app = new Vue({
      el: '#app',
      data: {
          text1: '<h1>你好</h1>'
      }
  })

四、双向绑定标签v-model的使用

v-model指令用来在input,select,text,checkbox,radio等表单控件元素中创建双向绑定

• 1、在input中实现双向绑定

  <div id="app">
      <input type="text" placeholder="请输入内容" v-model="text" />
      <hr>
      <p>你输入的内容:{{text}}</p>
  </div>

  var app = new Vue({
      el: '#app',
      data: {
          text: ''
      }
  })

• 2、单选框中使用双向绑定

  <div id="app">
      性别:
      <p>
          <input type="radio" id="man" value="0" name="sex" v-model="myform.sex" />
          <label for="man">男</label>
      </p>
      <p>
          <input type="radio" id="male" value="1" name="sex" v-model="myform.sex" />
          <label for="male">女</label>
      </p>
      {{myform}}
  </div>

  var app = new Vue({
      el: '#app',
      data: {
          myform: {
              sex: '0'
          }
      }
  })

• 3、复选框的双向绑定

  <div id="app">
      <p>兴趣爱好:</p>
      <input type="checkbox" name="hobby" value="看书" id="book" v-model="myform.hobby" />
      <label for="book">看书</label>
      <input type="checkbox" name="hobby" value="游泳" id="swin" v-model="myform.hobby" />
      <label for="swin">游泳</label>
      <input type="checkbox" name="hobby" value="游戏" id="game" v-model="myform.hobby" />
      <label for="game">游戏</label>
      <input type="checkbox" name="hobby" value="唱歌" id="song" v-model="myform.hobby" />
      <label for="song">唱歌</label>
      <hr/> {{myform.hobby}}
  </div>

  var app = new Vue({
      el: '#app',
      data: {
          myform: {
              hobby: ['唱歌']
          }
      }
  })

• 4、下拉选择框使用双向绑定

  <div id="app">
      省份:
      <select v-model="myform.province">
          <option value="湖南">湖南</option>
          <option value="广东">广东</option>
          <option value="广西">广西</option>
      </select>
      <hr/> {{myform.province}}
  </div>

  var app = new Vue({
      el: '#app',
      data: {
          myform: {
              province: '湖南'
          }
      }
  })

五、数据展现指令

• 1、v-for遍历数组

  <div id="app">
      <ul>
          <li v-for="book of books">{{book}}</li>
      </ul>
  </div>

• 2、v-for遍历对象

  <ul>
      <li v-for="item of author">{{item}}</li>
  </ul>

  var app = new Vue({
      el: '#app',
      data: {
          books: ['三国演义', '红楼梦', '水浒传', '西游记'],
          author: {
              'name': '张三',
              'age': 20,
              'sex': '男'
          }
      }
  })

• 3、如果要使用数组的序列号获取对象的key

  <div id="app">
      <ul>
          <li v-for="(book,index) of books">{{index}}-{{book}}</li>
      </ul>
      <ul>
          <li v-for="(key,item) of author">{{item}}-{{key}}</li>
      </ul>
  </div>

六、事件指令

• 1、普通的点击事件

  <div id="app">
      <!-- 可以不写() -->
      <div v-bind:class="className" v-on:click="add"></div>
      <!-- 可以写() -->
      <div v-bind:class="className" v-on:click="add()"></div>
      <!-- 直接获取event事件  -->
      <div v-bind:class="className" v-on:click="add1($event)"></div>
      <!-- 可以传递参数并获取event事件属性[参数要放在最前面] -->
      <div v-bind:class="className" v-bind:style="boxStyle" v-on:click="add2('gray',$event)"></div>
  </div>

  var app = new Vue({
      el: '#app',
      data: {
          className: 'box',
          boxStyle: {
              'background': '#630'
          }
      },
      methods: {
          add() {
              this.className = 'box box1';
              console.log('你点击了我');
          },
          add1(e) {
              console.log(e);
          },
          add2(arg, e) {
              console.log(e);
              this.boxStyle.background = arg;
          }
      }
  })

• 2、常用的事件名称

  • 1、@click点击事件
  • 2、@submit提交
  • 3、@keyup 键盘抬起
  • 4、@keydown键盘按下
  • 5、@mousemove移动

• 3、事件的修饰符

  • 1、.stop阻止冒泡事件
  • 2、.prevent阻止默认事件

  • 3、keyCode键盘事件

    <input type="text" placeholder="请输入内容" @keydown.13="submit" />