目录
11.键盘事件
Vue中常用的按键别名:
回车=》enter
删除=》delete(捕获“删除”和退格键)
退出=》esc
空格=》space
换行=》tab
上=》up
下=》down
左=》left
右=》right
2.Vue未提供别名的按键。可以 使用按键原始的key值去绑定,但是要注意转为kebab-case(短横线命名法)
如:CapsLock要改写为caps-lock
3.系统修饰符(用法特殊):ctrl,atl,shift,meta(win键)
(1)配合keyup使用:按下修饰键的同时,再按下其他键,事件才被触发
(2)配合keydown使用,正常触发事件
4.也可以使用keycode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名,可以去定义按键别名
<body>
<div id="root">
<h1>前端框架——{{msg}}</h1>
<input
type="text"
placeholder="按下ctrl+加任意键获得输入值"
@keyup.ctrl="showinfo"
/>
<input
type="text"
placeholder="按下回车获得输入值"
@keyup.enter="showinfo"
/>
</div>
<!--创建vue实例 -->
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
msg: "VUE",
},
methods: {
showinfo(e) {
console.log(e.target.value);
},
},
});
</script>
</body>
12.事件小技巧
1.事件修饰符可以结合使用
如:@click.prevnt.stop——————>先停止默认事件再停止冒泡
2.键盘事件名称也是可以结合使用的
如:@keyup.ctrl.y————————>同时按下ctrl和y才触发事件
13.姓名案例
<body>
<div id="root">
<h1>前端框架——{{msg}}</h1>
称号:<input
type="text"
v-model="first_name"/><br>
姓名:<input
type="text"
v-model="last_name"/><br>
<span>全称:{{fullname()}}</span>
</div>
<!--创建vue实例 -->
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
msg: "VUE",
first_name:'篮球王子',
last_name:'菜虚鲲'
},
methods: {
fullname() {
return this.first_name+'·'+this.last_name;
},
},
});
</script>
</body>
14.计算属性
计算属性
1.定义:要用的属性不存在,要通过已有属性计算得来
2.原理:底层借助了Object.defineproperty方法提供的getter和setter
3.get函数什么时候执行?
(1)初次读取时会执行一次
(2)当依赖的数据发生改变时会被再次调用
4.优势:与methods实现出现在vm上,直接读取使用即可
5.备注:
1.计算属性最终会出现在vm上,直接读取即可
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要计算时依赖的数据发生改变
<body>
<div id="root">
<h1>前端框架——{{msg}}</h1>
称号:<input
type="text"
v-model="first_name"/><br>
姓名:<input
type="text"
v-model="last_name"/><br>
<span>全称:{{fullname}}</span>
</div>
<!--创建vue实例 -->
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
msg: "VUE",
first_name:'篮球王子',
last_name:'菜虚鲲'
},
computed: {
fullname:{
get(){
console.log('get被调用了')
return this.first_name+'——'+this.last_name;
},
set(value){
console.log('set被调用了')
var arr = value.split("——")
this.first_name=arr[0]
this.last_name=arr[1];
}
}
}
})
</script>
</body>
15.计算属性的简写
computed: {
//简写形式,只用get,不用set时使用
fullname(){
console.log('get被调用了')
return this.first_name+'——'+this.last_name;
}
}
16.监视属性
监视属性:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视
3.监视的两种写法
(1)new Vue时传入watch配置
(2)通过vm.$watch监视
<body>
<div id="root">
<h1>前端框架——{{msg}}</h1><br>
<h2>流量巨星——{{info}}</h2>
<button @click="changec">点我切换</button>
</div>
<!--创建vue实例 -->
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
msg: "VUE",
ishoot:true
},
computed: {
//简写形式,只用get,不用set时使用
info(){
return this.ishoot?"菜虚鲲":"顶真"
}
},
methods:{
changec(){
this.ishoot=!this.ishoot;
}
},
//第一种写法
watch:{
ishoot:{
immediate:true,//初始化时让handler调用一下
//handler什么时候调用,当ishoot发生改变时
handler(newvalue,oldvalue){
console.log("ishoot被修改了",newvalue,oldvalue)
}
}
}
})
//第二种写法
/* vm.$watch('ishoot',{
immediate:true,//初始化时让handler调用一下
//handler什么时候调用,当ishoot发生改变时
handler(newvalue,oldvalue){
console.log("ishoot被修改了",newvalue,oldvalue)
}
})*/
</script>
</body>
17.深度监视
深度监视:
1.Vue中的watch默认不监测对象内部值的改变(一层)
2.配置deep:true可以监测对象内部值改变(多层)
备注
(1).vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以
(2)使用watch时根据数据的具体结构,决定是否采用深度监视
<body>
<div id="root">
<h2>a的值是:{{numbers.a}}</h2>
<button @click="numbers.a++">点我让a+1</button>
</div>
<!--创建vue实例 -->
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
numbers: {
a: 1,
b: 1,
},
},
watch: {
numbers: {
//深度监视
deep: true,
handler() {
console.log("number改变了");
},
},
},
});
</script>
</body>
18.监视的简写
watch:{
// 简写形式1
ishoot(newvalue,oldvalue){
console.log("ishot被修改了",newvalue,oldvalue)
}
},
})
// 简写形式2
vm.$watch('ishoot',function(newvalue,oldvalue){
console.log("ishot被修改了",newvalue,oldvalue)
})
watch:{
first_name(val){
//修改姓后3秒钟后修改全名
// 这里的延时器必须写成箭头函数的形式,因为该函数是一个对象的方法,则它的this指针指向这个对象
// 如果写出正常JS函数,那么this就会是window,无法执行修改任务
setTimeout(()=>{
this.fullname=val+'-'+this.last_name
},3000)
},
last_name(val){
this.fullname=this.firstname+'-'+val
}
19.computed和watch之间的对比
两者之间的区别:
1.computed能完成的功能,watch都可以完成
2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作
两个重要的小原则
(1)所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象
(2)所有不被Vue所管理的函数(定时器的回调函数,ajax的回调函数,promise的回调函数),最好写成箭头函数,这样this的指向才是vm或组件实例对象
20.绑定class样式和style样式
绑定样式:
1.class样式
写法 :class='xxx',xxx可以是字符串,对象,数组
字符串写法适用于样式的类名不确定,需要动态指定
数组写法,适用于:要绑定的样式个数不确定,名字也不确定
对象写法,适用于:要绑定的样式个数确定,名字也确定,但要动态决定要不要使用
2.style样式
:style='xxx',其中xxx是动态值组成的对象
:style='[a,b]',其中a,b是样式对象
<style>
.basic {
width: 200px;
height: 90px;
border: 1px solid black;
}
.happy {
background-color: rgb(241, 139, 156);
border: 5px solid red;
}
.sad {
background-color: gray;
border: 5px solid green;
}
.normal {
background-color: rgba(45, 144, 236, 0.836);
}
.a1 {
background-color: #bfa;
}
.a2 {
font-size: 50px;
text-shadow: orange;
}
.a3 {
border-radius: 20px;
}
</style>
<body>
<div id="root">
<!-- 绑定class样式 字符串写法,适用于:样式的类名不确定,需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">字符串写法</div>
<br />
<!-- 绑定class样式,数组写法,适用于:要绑定的样式个数不确定,名字也不确定-->
<div class="basic" :class="classArr">数组写法</div>
<br />
<!-- 绑定class样式,对象写法,适用于:要绑定的样式个数确定,名字也确定,但要动态决定要不要使用 -->
<div class="basic" :class="classobj">对象写法</div>
<br />
<!-- 绑定style样式-对象写法 -->
<div class="basic" :style="styleobj">绑定style样式-对象写法</div>
<br />
<!-- 绑定style样式,数组写法 -->
<div class="basic" :style="[styleobj,styleobj2]">绑定style样式,数组写法</div>
</div>
<!--创建vue实例 -->
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
mood: "normal",
classArr: ["a1", "a2", "a3"],
classobj: {
a1: true,
a2: true,
},
styleobj: {
fontSize: "20px",
color: "red",
},
styleobj2: {
backgroundColor: "orange",
},
},
methods: {
changeMood() {
var arr = ["happy", "normal", "sad"];
var index = Math.floor(Math.random() * 3);
this.mood = arr[index];
},
},
});
</script>
</body>
持续更新中...........