一、事件监听：v-on指令
监听用户发生的事件，比如点击、拖拽、键盘事件等等，以便和用户交互。使用v-on指令
v-on介绍
- 作用：绑定事件监听器
- 缩写：@
- 预期： Function Inline Statement Object
- 参数：event
v-on的基本使用
<div id="app">
<h2>{{counter}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 1
},
methods: {
increment: function () {
return this.counter++
},
decrement: function () {
return this.counter--
}
}
})
</script>
v-on的参数传递问题
-
第一种 无参数 正常输出字符串
<button @click="btn1Click">按钮1</button> btn1Click () { console.log("btn1Click"); }, -
第二种 需要参数时 会有三种情况
<!--正常传入参数--> <button @click="btn2Click(123)">按钮2</button> <!--没有传参数--> <button @click="btn2Click()">按钮2</button> <!--省略了小括号 但是方法本身需要一个参数，这个时候，Vue会默认 将浏览器产生的event事件对象作为参数传入到方法--> <button @click="btn2Click">按钮2</button> btn2Click (event) { console.log('......', event); }, -
第三种 有参数，还需event对象
<!--在事件定义时，我们需要event对象，同时有需要其他参数--> <!--手动获取浏览器参数的event对象:$event--> <button @click="btn3Click(abc, $event)">按钮3</button> btn3Click (abc,event) { console.log('++++++', abc, event); }
v-on的修饰符使用
在某些情况下，我们拿到event事件的目的可能是进行一些事件处理
Vue提供了修饰符来帮助我们方便处理一些事件
- stop：调用event.stopPropagation()
- prevent：调用event.preventDefault()
- {keyCode|keyAlias}：只当事件是从特定键触发时才触发回调
- native：监听组件根元素的原生事件
- once：只触发一次回调
1.stop修饰符的使用
在不加.stop的时候，点击按钮时divClick事件也会触发，为了点击按钮时不触发div的事件，只触发按钮自己的事件，这时用.stop修饰符
<div @click="divClick">
click
<button @click.stop="btnClick">按钮</button>
</div>
divClick(){
console.log("divClick");
},
btnClick(){
console.log("btnClick");
}
2. .prevent修饰符的使用（阻止默认事件）
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
submitClick(){
console.log("submitClick");
}
3. 监听键盘某个按键按钮的点击
<!--3. 监听某个键盘的键帽 enter 只监听输入键-->
<input type="text" @keyup.enter="keyUp">
keyUp(){
console.log("keyUp");
}
4. .once修饰符的使用
<!--使按钮只能触发一次，例如：投票 只能投一张-->
<button @click.once="btn2Click">按钮2</button>
btn2Click(){
console.log("btn2Click");
}
二、条件判断
v-if的使用
<div id="app">
<h2 v-if="isShow">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊！",
isShow: true
}
})
</script>
v-if和v-else的结合使用
<div id="app">
<h2 v-if="isShow">{{message}}</h2>
<h1 v-else>false时，显示我</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊！",
isShow: true
}
})
</script>
v-if、v-else-if和v-else的结合使用
<div id="app">
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else="score<90">补考</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 95
}
})
</script>
不推荐上面这种写法，最好使用计算属性
<div>
<h1>{{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 95
},
computed: {
result(){
let showMessage = "";
if (this.score>=90){
showMessage = "优秀"
}else if (this.score>=80){
showMessage = "良好"
}else if (this.score>=60){
showMessage = "及格"
}else {
showMessage = "补考"
}
return showMessage
}
}
})
</script>
注：vue的input存在的小问题
当我们在输入框中输入后，再切换登陆方式时，输入的内容还保存着
因为vue底层有虚拟DOM会把即将显示的东西放到内存中，会优先复用已存在的input
如果不想在切换后仍然显示，那么可以给input加key,起到标识的作用
key是vue内置属性
v-show的使用以及和v-if的区别
<!--v-if：当条件为false时，包含v-if指令的元素，根本不会存在dom中-->
<h2 v-if="isShow">{{message}}</h2>
<!--v-show：当条件为false时，v-show只是给元素添加一个行内样式：display：none-->
<h2 v-show="isShow">{{message}}</h2>
三、循环遍历
-v-for遍历数组 语法：v-for="items in item"
<div id="app">
<!--1.在遍历的过程汇总，没有使用索引值（下标值）-->
<ul>
<li v-for="name in names">{{name}}</li>
</ul>
<!--2.在遍历的过程中，显示索引值-->
<ui>
<li v-for="(name,index) in names">
{{index+1}}.{{name}}
</li>
</ui>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
names: ["why","james","kobe","curry"]
}
})
</script>
v-for遍历对象
<div id="app">
<!--1.在遍历对象时，如果只是获取一个值，那么得到的就是value-->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!--2.获取key和value 格式：(value,key)-->
<ui>
<li v-for="(value,key) in info">
{{value}}-{{key}}
</li>
</ui>
<!--3.获取value，key，index 格式：(value,key,index)-->
<ul>
<li v-for="(value,key,index) in info">
{{index}}.{{value}}-{{key}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
info: {
name: "hello",
age: 38,
height: 1.69
}
}
})
</script>
v-for绑定和非绑定key的区别
<ul>
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
官网推荐我们在使用v-for时，给对应的元素或组件添加一个key属性，为了更好的复用
splice：在数组中插入数据 splice（2，0，'1'） 在第二位 后一位加入1 性能低
使用key：可以有效插入元素
https://www.bilibili.com/video/BV15741177Eh?p=37
扩展：哪些数组的方法是响应式的
数组方法展示：
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
letters: ['A','B','C','D','E']
},
methods: {
btnClick () {
1.push()：在数组最后面添加元素 可以添加一个或多个
this.letters.push('m','n','l')
2.pop()：删除数组中的最后一位元素
this.letters.pop();
3.shift()：删除数组中的第一个元素
this.letters.shift();
4.unshift()：在数组最前面添加元素 可以添加一个或多个
this.letters.unshift('aa','bb','cc');
5.splice()：删除元素/插入元素/替换元素
//第一个参数是你要从第几位开始操作数组
删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后面所有的元素）
this.letters.splice(1,2)
替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素（也可以理解为删除几个元素后，再插入元素）
this.letters.splice(1, 4,'m','n','l')
插入元素：第二个参数，或者不写第二个参数,后面跟上要插入的元素
this.letters.splice(1,0,'m','n','l')
6.sort()：排序
this.letters.sort();
7.reverse()：内容反转
this.letters.reverse();
注意：通过索引值改变数组中的元素是非响应式的，上面的方法都是响应式的
this.letters[0] = 'a'
//而想要达到上面的效果，有以下两种方式
1.this.letters.splice(0,1,'a')
2.set(要修改的对象，索引值，修改后的值) vue内部方法，是响应式的
vue.set(this.letters, 0, 'a')
}
}
})
</script>
非响应式.png
四、过滤器
可以对数据进行预处理 85——￥85.00
td>{{item.price | showPrice}}</td>
filters: {
showPrice(price) {
return '￥' + price.toFixed(2)
}
}
五、表单绑定 v-model（双向绑定）
1.v-mdoel的基本使用：实现双向绑定
双向绑定：即输入框和message信息改变其中任意一个，另一个就会随之改变
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊！"
}
})
</script>
2.v-model的原理
v-model其实是一个语法糖，它的背后本质上包含两个操作
-
①.v-bind绑定一个value元素
<input type="text" v-bind:value="message"> -
②.v-on指令给当前元素绑定input事件
<input type="text" @input="message = $event.target.value"> 上面是简单写法，下面为详细写法 <input type="text" v-on:input="valueChange"> methods: { valueChange(event) { this.message = event.target.value; console.log("..."); } }
总结
<input type="text" v-model="message">
等同于
<input type="text" :value="message" @input="message = $event.target.value">
3.v-model：radio
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h1>您选择的性别是：{{sex}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
sex: "男"
}
})
</script>
其中sex和radio通过v-model实现了双向绑定
4.v-model：checkbox
单选框：协议选择 v-model是布尔值
label好处：块级作用域，点击文字即可选择
<div id="app">
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>您选择的是：{{isAgree}}</h2>
<button :disabled="!isAgree" @click="btnClick">下一步</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isAgree: false
},
methods: {
btnClick(){
console.log("您已同意协议");
}
}
})
</script>
复选框：复选框与数组绑定
<div id="app">
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="网球" v-model="hobbies">网球
<input type="checkbox" value="排球" v-model="hobbies">排球
<h2>您选择的是:{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
hobbies: []
},
})
</script>
5.v-model：select（不常用）
-
单选
注意：v-model的位置
<div id="app">
<select name="" id="" v-model="fruit">
<option value="香蕉">香蕉</option>
<option value="苹果">苹果</option>
<option value="橘子">橘子</option>
<option value="西瓜">西瓜</option>
<option value="鸭梨">鸭梨</option>
</select>
<h2>您选择的水果是：{{fruit}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
fruit: '香蕉'
}
})
</script>
-
多选
使用multiple就可以多选了
<div id="app">
<select name="" id="" v-model="fruits" multiple>
<option value="香蕉">香蕉</option>
<option value="苹果">苹果</option>
<option value="橘子">橘子</option>
<option value="西瓜">西瓜</option>
<option value="鸭梨">鸭梨</option>
</select>
<h2>您选择的水果是：{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
fruit: '香蕉',
fruits: []
}
})
</script>
六、值绑定
所谓的值绑定，本质就是v-bind的应用
<div id="app">
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
<h2>您选择的是:{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
hobbies: [],
originHobbies: ['篮球','足球','网球','排球']
}
})
</script>
七、修饰符
1.lazy修饰符：
-
默认情况下：v-model是在input事件中同步输入框的数据，也就是说，一旦数据发生改变对应的data中的数据就会自动发生改变
<div id="app"> <input type="text" v-model.lazy="message"> <h2>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message: "你好啊！" } }) </script> -
lazy修饰符可以让数据在失去焦点或者回车时才会更新
2.numbei修饰符
-
默认情况下，输入框中无论输入的是字母还是数字，v-model都会将其当作字符串进行处理，但是如果希望处理的是数字类型，那么最好直接将内容当作数字处理
-
number修饰符可以让在输入框中输入的内容自动转成数字类型
<input type="number" v-model.number="age"> <h2>{{age}}-{{typeof age}}</h2>
3.trim修饰符
-
trim修饰符可以过滤内容左右两边的空格
mustache语法会自动去除左右空格
<input type="text" v-model.trim="name">
<h2>您输入的名字：{{name}}</h2>
网友评论