一、关于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
移动
- 1、
-
3、事件的修饰符
- 1、
.stop
阻止冒泡事件 - 2、
.prevent
阻止默认事件 -
3、
keyCode
键盘事件<input type="text" placeholder="请输入内容" @keydown.13="submit" />
- 1、