vue指令
v-bind
属性绑定
<标签名 v-bind:属性名=“属性值” /> <标签名 :属性名=“属性值” />
v-html/v-text
<标签名 v-html=“数据变量” /> <标签名 v-text=“数据变量” />
v-on
给标签绑定事件
语法
- v-on:事件名=“要执行的少量的代码”
- v-on:事件名=“methods中的函数”
- v-on:事件名=“methods中的函数(实参)”
简写 @事件名=“methods中的函数(实参)”
v-on事件对象
vue处理函数中,拿到事件对象
语法:
- 无传参: 通过形参直接接收
- 传参: 通过$event指定事件对象传给事件处理函数
<body>
<div id="app">
<a @click="fn" href="http://www.baidu.com">阻止百度</a>
<hr />
<a @click="eveFn(10,$event)" href="http://www.baidu.com"
>阻止跳转到百度</a
>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
fn(e) {
// 阻止默认行为
e.preventDefault()
},
eveFn(num, e) {
e.preventDefault()
},
},
})
</script>
v-on修饰符
在事件后面.修饰符名,给事件带来更强大的功能
修饰符是由点开头的指令后缀来表示的
语法:
- @事件名.修饰符 =“methods函数”
- .stop 阻止事件冒泡
- .prevent 阻止默认行为
- .once 程序运行期间,只触发一次事件处理函数
- .self 只当在 event.target 是当前元素自身时触发处理函数
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.main {
width: 400px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div @click="fn1">
<button @click.stop="btnFn">stop阻止事件冒泡</button>
<a @click.prevent.stop="aFn" href="http://www.baidu.com"
>prevent阻止默认行为</a
>
<button @click.once="onceFn">once触发一次</button>
</div>
<!--.self 只当在 event.target 是当前元素自身时触发处理函数 -->
<div @click.self="fn1" class="main">
<button @click="btnFn">stop阻止事件冒泡</button>
<a @click.prevent="aFn" href="http://www.baidu.com"
>prevent阻止默认行为</a
>
<button @click.once="onceFn">once触发一次</button>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
fn1() {
alert('fn1')
},
btnFn() {
alert('btnFn')
},
aFn() {
alert('aFn')
},
onceFn() {
alert('onceFn')
},
},
})
</script>
v-on按键修饰符
给键盘事件添加修饰符
语法
- @keyup.enter 监听回车按键
- @keyup.esc 监听返回按键
<body>
<div id="app">
<input type="text" @keyup.enter="enterFn" />
<br />
<input type="text" @keyup.esc="escFn" />
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
enterFn() {
alert('enterFn')
},
escFn() {
alert('escFn')
},
},
})
</script>
v-model
主要用于表单元素,把value属性和vue数据变量,双向绑定到一起
语法:
v-model=“vue数据变量”
- 双向数据绑定(vue内部采用MVVM设计模式)
- 数据变化–>视图自动同步
- 视图变化–>数据自动同步
<body>
<div id="app">
<!-- v-model:实现vue变量和表单标签value属性,双向绑定的指令 -->
<div>
<span>用户名</span>
<input type="text" v-model="username" />
</div>
<div>
<span>密码</span>
<input type="password" v-model="pass" />
</div>
<div>
<span> 来自于</span>
<!-- 下拉菜单要绑定在select上 -->
<select v-model="city">
<option value="北京市">北京</option>
<option value="南京市">南京</option>
<option value="天津市">天津</option>
</select>
</div>
<div>
<span>性别</span>
<input type="radio" value="男" v-model="gender" />男
<input type="radio" value="女" v-model="gender" />女
</div>
<!--
遇到复选框 v-model的变量值
数组 关联的是复选框的value值
非数组 关联的是复选框的checked属性
-->
<div>
<span>爱好</span>
<input type="checkbox" v-model="hobby" value="抽烟" />抽烟
<input type="checkbox" v-model="hobby" value="喝酒" />喝酒
<input type="checkbox" v-model="hobby" value="打游戏" />打游戏
</div>
<div>
<span>全选</span>
<input type="checkbox" v-model="checkall" />
</div>
<div>
<span>自我评价</span>
<textarea v-model="content"></textarea>
</div>
<hr />
<div>{{username}}</div>
<div>{{pass}}</div>
<div>{{city}}</div>
<div>{{gender}}</div>
<div>{{hobby}}</div>
<div>{{checkall}}</div>
<div>{{content}}</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: '用户名',
pass: '',
city: '南京市',
gender: '男',
hobby: ['打游戏'],
checkall: true,
content: '',
},
methods: {},
})
</script>
v-model修饰符
让v-model拥有更强大的功能
语法:
-
v-model.修饰符=“vue数据变量”
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy change时触发而非input
<body>
<div id="app">
<div>
<span>年龄</span>
<input type="text" v-model.number="age" />
</div>
<div>
<span>人生格言</span>
<input type="text" v-model.trim="motto" />
</div>
<div>
<span>自我介绍</span>
<textarea v-model.lazy="content"></textarea>
</div>
{{content}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
age: 0,
motto: '',
content: '',
},
methods: {},
})
</script>
v-show和v-if
控制标签的显示隐藏
语法:
- v-show=“vue变量”
- v-if=“vue变量”
原理:
-
v-show用的是display:none控制标签的显示隐藏 (频繁切换)
-
v-if 用的是插入和删除节点来控制标签的显示隐藏
-
v-else
<body>
<div id="app">
<h1 v-show="isOk">v-show的盒子</h1>
<h1 v-if="isOk">v-if的盒子</h1>
<div>
<!-- v-if和v-else的两个标签必须紧挨着 -->
<p v-if="age>15">我成年了</p>
<p v-else>未成年</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
isOk: true,
age: 15,
},
methods: {},
})
</script>
</html>
v-for
列表渲染,所在标签结构,按照数据数量 循环生成
语法:
-
v-for=“(值,索引) in 目标结构”
-
v-for=“值 in 目标结构”
目标结构
- 可以遍历数组/对象/数字/字符串
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr">{{index}} ---{{item}}</li>
</ul>
<hr />
<ul>
<li v-for="obj in stuArr">
{{obj.name}}---{{obj.sex}}---{{obj.hobby}}
</li>
</ul>
<hr />
<div v-for="(value,key) in tObj">{{key}}---{{value}}</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: ['aaa', 'bbb', 'ccc', 'ddd'],
stuArr: [
{
id: 1001,
name: '孙悟空',
sex: '男',
hobby: '唱歌',
},
{
id: 1002,
name: '猪八戒',
sex: '男',
hobby: '背媳妇',
},
],
tObj: {
name: '小妞',
age: 12,
class: '1班',
},
},
methods: {},
})
</script>
</html>