目录
一、数据代理
1.1.数据代理：通过一个对象代理对另外一个对象中属性的操作 (读/写)
1.2.Vue中数据代理的好处：更加方便的操作data中的数据
1.3.基本原理
1).通过object.defineProperty（）把data对象中所有属性添加到vm上。
2).为每一个添加到vm上的属性，都指定一个getter/setter。
3).在getter/setter内部去操作（读/写）data中对应的属性。
1.4.代码
二、事件处理
2.1.事件的基本使用
1).使用v-on：xx或@xxx绑定事件，其中xxx是事件名；
2).事件的回调需要配置在methods对象中，最终会在vm上；
3).methods中配置的函数，不要用箭头函数！否则this就不是vm了;
4).methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组件实例对象
5).@click="demo"和@click="demo（$event）“效果一致，但后者可以传参；
2.2.Vue中的事件修饰符
1).prevent：阻止默认事件（常用）；
2).stop：阻止事件冒泡（常用）；
3).once：事件只触发一次（常用）；
4).capture：使用事件的捕获模式;
5).self：只有event.target是当前操作的元素是才触发事件；
6).passive：事件的默认行为立即执行，无需等待事件回调执行完毕;
2.3.键盘事件
1).Vue中常用的按键别名：
1.1).回车=>enter
1.2).删除=>delete(捕获“删除"和“退格"键)
1.3).退出=>esc
1.4).空格=>space
1.5).换行=>tab(特殊，必须配合keydown去使用)
1.6).上=>up
1.7).下=> down
1.8).左=>left
1.9).右=>right
2).Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名)
3).系统修饰键（用法特殊）：ctrl、alt、shift、meta
3.1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
3.2).配合keydown使用：正常触发事件。
4).也可以使用keyCode去指定具体的按键 (不推荐)
5).Vue.config.keyCodes，自定义键名=键码，可以去定制按键别名
2.4.代码
三、计算属性
3.1.定义：要用的属性不存在，要通过已有属性计算得来。
3.2.原理：底层借助了objcet.defineproperty方法提供的getter和setter。
3.3.get函数什么时候执行？
1).初次读取时会执行一次。
2).当依赖的数据发生改变时会被再次调用。
3.4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
3.5.注意
1).计算属性最终会出现在vm上，直接读取使用即可。
2).如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
四、监控属性
4.1.监视
1).当被监视的属性变化时，回调函数自动调用，进行相关操作
2).监视的属性必须存在，才能进行监视！！
3).监视的两种写法：
3.1).newVue时传入watch配置
3.2).通过vm.$watch监视
4).代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气练习_监控属性</title>
<!---引入vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--
监视属性watch：
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
（1）.newVue时传入watch配置
（2）.通过vm.$watch监视
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>今天天气很{{info}}</h1>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
isHot:true,
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
// isHot:{
// immediate:true,//初始化让handler调用一下
// //handler什么时候调用？当isHot发生改变时
// handler(newValue,oldValue){
// console.log('isHot被修改了',newValue,oldValue)
// }
// },
info:{
immediate:true,//初始化让handler调用一下
//handler什么时候调用？当isHot发生改变时
handler(newValue,oldValue){
console.log('info被修改',newValue,oldValue)
}
}
}
})
vm.$watch('isHot',{
immediate:true,//初始化让handler调用一下
//handler什么时候调用？当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
</script>
</body>
</html>4.2.深度监视
1).Vue中的watch默认不监测对象内部值的改变（一层）。
2).配置deep：true可以监测对象内部值改变（多层）。
3).代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气练习_监控属性</title>
<!---引入vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>今天天气很{{info}}</h1>
<button @click="changeWeather">切换天气</button>
<hr/>
<h3>a的值是:{{number.a}}</h3>
<button @click="number.a++">点我让a+1</button>
<h3>b的值是:{{number.b}}</h3>
<button @click="number.b++">点我让b+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
isHot:true,
number:{
a:1,
b:1
}
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{
immediate:true,//初始化让handler调用一下
//handler什么时候调用？当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
//监视多级结构中某个属性的变化
'number.a':{
handler(){
console.log('a变化')
}
},
number:{
//监视多级结构中所有属性的变化
deep:true,
handler(){
console.log('number被修改了')
}
}
}
})
</script>
</body>
</html>4.3.注意
1).Vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以！
2).使用watch时根据数据的具体结构，决定是否采用深度监视。
4.4.omputed和watch之间的区别
1).computed能完成的功能，watch都可以完成。
2).watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
4.5.两个重要的小原则
1).所被vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2).所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象。
五、绑定样式
5.1.class样式
1).写法:class="xxx"xxx可以是字符串、对象、数组。
1.1).字符串写法适用于：类名不确定，要动态获取。
1.2).对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
1.3).数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
5.2.style样式
1).:style="{fontSize:xxx)"其中xxx是动态值。
2).:style="[a,b]"其中a、b是样式对象。
5.3.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绑定样式</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.Jay1{
background-color: yellowgreen;
}
.Jay2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.Jay3{
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
绑定样式：
1. class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
-->
<!-- 准备好一个容器-->
<div id="root">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'1900',
mood:'normal',
classArr:['Jay1','Jay2','Jay3'],
classObj:{
Jay1:false,
Jay2:false,
},
styleObj:{
fontSize: '40px',
color:'red',
},
styleObj2:{
backgroundColor:'orange'
},
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
]
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</script>
</html>六、今日学习思维导图
扫一扫
2049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
