vue指令
指令是vue为开发者提供的模板语法 用于辅助开发者渲染页面的基本结构
内容渲染指令
用来辅助开发者渲染DOM元素的文本内容 常用的内容渲染指令有三个
- v-text 会覆盖元素内部原有的内容
- {{}} 插值表达式 解决v-text 内容覆盖问题 实际开发中用的最多 只是内容的占位符
- v-html 把包含HTML标签的字符串渲染为页面的HTML元素
属性绑定指令
注意： 插值表达式只能用在元素的内容节点中 不能用在元素的属性节点中！
1.在vue中 可以使用v-bind:指令为元素的属性值动态绑定值；
vue规定 v-bind: 指令可以简写为 :
2.在使用v-bind属性绑定期间 如果绑定内容需要进行动态拼接 则字符串的外面应该包裹单引号
<div :title="'box'+index">这是一个div</div>
事件绑定指令
1.v-on:就是事件绑定指令 简写形式 @
2.注：vm===this 在methods里面
3.事件绑定指令 需要在vue实例对象里面添加一个 methods事件对象
注意：原生DOM对象有 onclick oninput onkeyup 等原生事件 替换为vue的事件绑定形式后 分别为：v-on:click v-on:input v-on:keyup
//在绑定事件处理函数的时候可以使用()传递参数
<p>count的值是 {{count}} </p>
<button @click="add(2)">+1</button>
<button @click="sub">-1</button>
// methods的作用 就是定义事件的处理函数 与el 和 data 平级
methods: {
//简写形式 也可以写成add:function(){}
add(n) {
// console.log(vm === this);
// vm.count += 1;
this.count += n;
},
sub(){
// console.log('触发了sub处理函数');
this.count -= 1;
}
}
4.事件对象 $event 当需要传参时 而又需要 DOM事件对象 e 时 可以用$event代替
<!-- vue提供了内置变量 名字叫做$event 它就是原生DOM事件对象 e -->
<button @click="add(1,$event)">+N</button>
methods: {
add(n, e) {
this.count += n
console.log(e);
}
事件修饰符
事件修饰符 在事件的后面加 来辅助程序员更方便的对事件的触发进行控制 常用的五个
- .prevent 阻止默认行为 例如链接的跳转 阻止表单的提交
- .stop 阻止事件冒泡
- .capture 以捕获模式触发当前的事件处理函数
- .once 绑定事件只触发一次
- .self 只有在 event.tarhet是当前元素自身时触发事件处理函数
//阻止链接跳转
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>
<hr>
//阻止事件冒泡
<div style="height: 150px;background-color: orange;padding-left: 100px;line-height: 150px;" @click="divHandler">
<button @click.stop="btnHandler">按钮</button>
按键修饰符
@keyup
//按下esc键清空文本框中内容
<input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">
methods: {
clearInput(e) {
console.log('触发了 clearInput');
e.target.value = ''
},
commitAjax() {
console.log('触发了commitAjax方法');
}
}
双向绑定指令
只有表单元素才能使用v-model 指令 可以改变数据源信息 直接渲染出来
- input 输入框
- textarea 文本域
- select 下拉菜单
<p>用户的名字是：{{ username }} </p>
<input type="text" v-model="username">
<hr>
<input type="text" :value="username">
<hr>
<div v-model="username"></div>
<hr>
//返回的value值
<select name="" id="" v-model="city">
<option value="">请选择城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
v-model专用修饰符
.number自动将用户输入值转为数值类型.trim自动过滤用户输入的首尾空白字符.lazy在change时而非input时更新
//数字
<input type="text" v-model.number="n1">+<input type="text" v-model.numder="n2">=<span> {{n1+n2}} </span>
<hr>
//过滤首尾空白字符
<input type="text" v-model.trim="username">
<button @click="showName">获取用户名</button>
<hr>
//延时同步
<input type="text" v-model.lazy="username">
条件渲染指令
用来辅助开发者按需控制DOM的显示与隐藏 条件渲染指令有两个
v-if动态的创建或移除元素 实现元素的显示和隐藏
- 如果刚进入页面的时候 某些元素不需要被展示 而且后期这个元素很可能也不要被展示出来 此时v-if性能更好
v-show动态给元素添加或者移除style 样式'dispaly:none'隐藏元素
- 如果要频繁的切换元素的显示状态 用v-show性能会更好 3.在实际开发中绝大多数情况不用考虑性能问题 直接使用 v-if即可
<p v-if="flag">这是v-if控制的元素</p>
<p v-show="flag">这是v-show控制的元素</p>
<hr>
<div v-if="type==='A'">优秀</div>
<div v-else-if="type==='B'">良好</div>
<div v-else-if="type==='C'">一般</div>
<div v-else>差</div>
data: {
// 如果flag为true 则显示被控制的元素 如果为false则隐藏被控制的元素
flag: false,
type: 'A'
}
列表渲染指令
v-for="(item,index) in list"
list数组名称index索引- 不需要索引可以直接写
item即可 1.官方建议 - 只要用到了v-for指令 那么一定要绑定一个 :key 属性
- 而且 尽量把id作为 key 的值
- 官方对key的值类型是有要求的 字符串或数字类型
- key的值是千万不能重复的 否则会终端报错：Duplicate keys detected
<table class="table table-bordered table-hover table-striped">
<thead>
<th>索引</th>
<th>ID</th>
<th>姓名</th>
</thead>
<tbody>
<!-- 官方建议 只要用到了v-for指令 那么一定要绑定一个 :key 属性 -->
<!-- 而且 尽量把id作为 key 的值 -->
<!-- 官方对key的值类型是有要求的 字符串或数字类型 -->
<!-- key的值是千万不能重复的 否则会终端报错：Duplicate keys detected -->
<tr v-for="item in list" :key="item.id">
<td>0</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
data: {
list: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
}
