第一章：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" />