前端借助 console.log来定位BUG
1. 双向绑定 v-model是只能应用在表单元素(输入类元素), 说白了就是 都要有value值
v-on 可以简写成 @
reactive 可以翻译为"响应式"的意思
steInterval(() => {
}, 时间单位毫秒) //定时器函数
读取对象中的属性值 如果没有这个属性应该是 undefined 而不会报错
v-model:value ==> 可以简写成: v-model
2. el和data的两种写法
el写法两种都可以
但是在组件库中, data只能用第二种函数式, 并且只能是普通函数
由Vue管理的函数, 一定不要写箭头函数, 一旦写了箭头函数, this就不再是Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue -->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<h1>Hello, {{name}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root', //el的第一种写法
// data: { //第一种写法 : 对象式
// name:'加油'
// }
// setTimeout(() => {
// x.$mount('#root')
// }, 1000);
// x.$mount('#root'); //el的第二种写法
data:function() { //data的第二种写法
return {
name:'加油'
}
}
})
</script>
</html>3. 箭头函数没有自己的this, 它的this指向的是 window
4.Vue 借鉴了 MVVM模型
5.回顾 object.defineProperty
Invoke(映射) property(属性) getter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<script type="text/javascript">
Vue.config.productionTip = false;
let number = 18;
let person = {
name:'张三',
sex:'男'
}
Object.defineProperty(person, 'age', {
// value:18,
// enumerable:true, //控制属性是否可以枚举, 默认值是false
// writable:true, // 控制属性是否可以被修改, 默认值是false
// configurable:true // 控制属性是否可以被删除, 默认值是false
// console.log(person);
// 当有人读取person的age属性时, get函数(getter)就会被调用, 且返回值就是age的值
get(){
console.log('读取age属性')
return number
},
// 当有人修改person的age属性时, set函数(setter)就会被调用, 且会受到修改的具体值
set(value){
console.log('有人修改了age属性, 且值是', value)
number = value
}
})
</script>
</body>
</html>6. 数据代理:通过一个对象代理 对另一个对象中属性的操作（读或者写）
简单的数据代理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- 简单的数据代理 -->
<script type="text/javascript">
Vue.config.productionTip = false;
let obj = {x:100};
let obj2 = {y:200};
Object.defineProperty(obj2, 'x', {
get() {
return obj.x
},
set(value) {
obj.x = value
}
})
</script>
</body>
</html>7. 事件回调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<button @click="showInfo(888, $event)">点我提示信息</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el:'#root',
data: {
name:'不屈的世界'
},
methods: {
showInfo(number, event) {
console.log(number, event);
}
}
})
</script>
</html>8.事件修饰符
其中的前三个要牢记
9.计算属性: 是一个全新的属性
10.计算属性是自动被调用了
11.data中配置的数据 methods中配置的方法 computed配置的计算属性
12.监视属性:
13. 深度监视
14. watch(侦听属性) 与 computed 二者使用时的区别:
15. 条件渲染:
v-show="false"底层实现是 display:none;
data中的值被改变, 模板则需要重新解析
16.列表渲染
17. key
18.什么叫做响应式?
就是数据改变, 页面也跟着改变 叫做响应式
19.回顾对数组处理的方法(影响原数组):
push (向一个数组的后面新增元素用)
pop(删除最后一个元素)
shift(删除第一个元素)
unshift(向前面加一个元素)
splice(在数组的指定位置删除或者插入和修改一个元素)
sort(对数组进行一个排序)
reverse(反转一个数组)
20.Vue对数组的监测:
其实是依靠包装数组身上的,常用的修改数组的方法实现的
本文含有隐藏内容，请 开通VIP 后查看