本文介绍了Vue.js的基础知识，包括模板语法、数据绑定、MVVM模型、事件处理、计算属性和数据代理。详细讲解了v-bind、v-model、v-on、对象属性代理以及计算属性的getter和setter。同时，提到了事件修饰符的使用，如.prevent、.stop等，并对比了计算属性和watch的区别。文章还涵盖了条件渲染的v-if和v-show的使用场景及其特点。
文章目录
1. 基础知识
1.1 模板语法
- 插值语法：
- 功能：用于解析标签体内容
- 写法：
{{XXX}},XXX是js表达式，而且可以直接读取到data上的所有属性
- 指令语法：
- 功能： 用于解析标签（包括，标签属性，标签体内容，绑定事件）
- 举例：
v-bing:href="xxx"简写为 ：href="xxx", xxx同样要写成js表达式的形式，且可以直接读取到data中的所有属性
1. 2 数据绑定
Vue 数据绑定的方式：
- 单项数据绑定
(v-bind): 数据只能从data流向页面。 - 双向绑定
(v-model)：数据不仅能从data流向页面，还可以从页面流向data
备注：
- 双向绑定一般都应用于表单类上 （如：
input，select等） v-model:value可以简写称v-model，因为v-model默认收集的就是value的值
1.3 data 与 el 的两种写法
el 的两种写法：
new Vue时候配置el属性- 先创建
Vue实例，随后在通过vm.$mount("#root")指定el的值
data 的两种写法
- 对象式
- 函数式
如何选择：目前那种写法都可以，以后学习到了组件时候，data 必须使用函数式，否则会出现错误
一个重要的原则： 由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数， this 就不再是 Vue 实例了
案例：
el 的两种写法：
<!-- el 的两种写法： -->
const v= new Vue({
// el:"#root", // 第一种
data:{
name:"尚硅谷"
}
})
setTimeout(()=>{
v.$mount("#root") // 第二种
},1000)
**data 的两种写法： **
<!-- data 的两种写法： -->
new Vue({
el:"#root",
// data 的第一种写法，对象式
// data:{
// name:"尚硅谷"
// }
// data 的第二种写法，函数式：
data:function(){
console.log(this) // 此处的 this 是 vue 实例对象
return {
name:"尚硅谷"
}
}
})
1.4 MVVM 模型
M: 模型(Model) data中数据。V: 视图(View)模板代码。VM：视图模型中的（viewModel) Vue实例
观察发现：
data中的所有属性，最后都能在VM身上出现。VM身上的所有属性，以及Vue原型上的所有属性，在Vue的模板中都可以直接使用
1.5 数据代理
回顾 Object.defineProperty() 方法
栗子：
let num =19
let per={
name:"张三",
sex:"男",
// age:num
}
// 参数一：给那个对象添加属性，参数二：参加的参数名，参数三：配置项
// 如下这种方式添加的属性是不可枚举的，无法遍历获取
Object.defineProperty(per,'age',{
// value:18,
// enumerable:true, // 控制属性是否可以被枚举，默认值是 false
// writable:true, // 控制属性是否可以被修改，默认值是 false
// configurable:true // 控制属性是否被删除，默认值是 false
// 当有人读取 per 中的 age 时候，get 函数(getter)就会被调用，且返回值就是 age 的值
get(){
console.log("有人读取 get 属性了")
return num
},
// 当有人修改 per 中的 age 时，set 函数(setter)就会被调用，且回收到具体修改的值
set(val){
console.log("有人修改了 age，且数值是："+val)
num=val
}
})
console.log(Object.keys(per))
console.log(per)
数据代理：
通过一个对象代理另一个对象属性的操作(读/写)
栗子：
let obj={x:100}
let obj2={y:100}
Object.defineProperty(obj2,"x",{
get(){
return obj.x
},
set(val){
obj.x=val
}
})
vue 的数据代理：
vue的数据代理：通过vm对象来代理data对象中的属性的操作(读/写)vue中数据代理的好处： 更加方便的操作data的数据- 基本原理：通过
object.defineProperty()把data中的对象所有的属性添加到vm中，为每一个添加到vm的属性，都指定一个getter和setter， 在每一个getter/setter内部去操作(读/写)data中对应的属性
1.6 事件处理
事件的基本使用：
- 使用
v-on:XXX或者@XXX绑定事件，其中的XXX是事件名称。 - 事件的回调需要配置在
method对象中，最终会在vm上。 method中的配置的函数，不要使用箭头函数，否则this就不是vm了method中的配置函数，都是被vue所管理的函数，this的指向是vm或 组件实例对象@click="demo"和@click=demo($event)效果一致，但是后者可以传参数
Vue中的事件修饰符：
5. prevent：阻止默认事件（常用）；
6. stop：阻止事件冒泡（常用）；
7. once：事件只触发一次（常用）；
8. capture：使用事件的捕获模式；
9. self：只有 event.target 是当前操作的元素时才触发事件；
10. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
键盘事件：
-
vue 中常用的按键别名：
回车 =>enter
删除 =>delete(捕获 ‘删除’ 和 ‘退格’ 键)
退出 =>esc
空格 =>space
换行 =>tab(必须配合keydown去使用)
上 =>up
下 =>down
左 =>left
右 =>right -
vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名) -
系统修饰键(用法特殊)：
ctl，atl，shift，meta
1). 配合keyup使用：按下修饰符的同时，在按下其他键，随后释放其他键，事件才会被触发
2). 配合keydown使用：正常触发事件 -
也可以使用
keyCode去指定具体的按键（不推荐. -
Vue.config.keyCodes.自定义键名=简码可以去定制键的别名.
1.7 计算属性 method
定义： 要用的属性不存在，要通过已有的属性计算得来
原理： 底层借助了 object.defineProperty 方法来提供 getter 和 setter
get 函数什么时候执行：
- 初次读取时候，会执行一次.
- 当依赖的数据发生改变的时候会被再次调用
优势： 与 method 实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注：
- 计算属性最终会出现在
vm身上，直接读取即可。 - 如果计算要被修改，那必须写
set函数去响应修改，且set中要引起计算时候依赖的数据发生改变。
简写形式栗子：
const vm=new Vue({
el:"#root",
data:{
first:"张",
last:"三"
},
computed:{
// 完成写法
// full:{
// // get 的作用：当有人读取了 full 时候，get 就会被调用，且返回值就是 full 的值
// // get 什么时候被调用：1. 初次读取 fullName 的时候。2. 所依赖的数据发生改变的时候
// get(){
// console.log("小猪佩奇!")
// // console.log(this) 这里的 this 是 vm
// return this.first+"-"+this.last
// },
// // set 什么时候使用：当 full 被修改的时候
// set(value){
// debugger
// console.log(value)
// const arr=value.split('-')
// console.log(arr)
// this.first=arr[0]
// this.last=arr[1]
// }
// }
// 简写，只有 get 方法没有 set 方法的时候才适用
// full:function(){
// return this.first+"-"+this.last
// }
// 最终简写
full(){
return this.first+"-"+this.last
}
}
1.8 监视属性 watch
- 当监视属性发生变化的时候，回调函数自动调用，进行相关操作
- 监视属性必须存在，才能进行监视，监视不存在的属性不会出错，但是值都是
undefined - 监视属性的两种写法：
new Vue的时候传入watch配置- 通过
vm.$watch监视
栗子：
// 完整写法
// watch:{
// isHot:{
// // 初始化时候，让handler函数调用，默认值是false
// immediate:true,
// // handler 什么时候被调用：当 isHost 发生改变的时候
// handler(newVal,oldVal){
// console.log(" isHot 被修改了",newVal,oldVal)
// }
// }
// }
// 简写
vm.$watch("isHot",{
// 初始化时候，让handler函数调用，默认值是false
immediate:true,
// handler 什么时候被调用：当 isHost 发生改变的时候
handler(newVal,oldVal){
console.log(" isHot 被修改了",newVal,oldVal)
}
})
深度监视：
Vue中的watch默认不监测对象内部值的改变 (默认只监视第一层)- 配置
deep:true可以监测对象内部值的改变 (多层)
备注：
Vue自身可以监视对象内部值的改变，但是Vue提供的watch默认是不可以的！- 使用
watch时候根据数据的具体结构，决定是否采用深度监视。
简写栗子：
// 方式一：
// 完整写法
// watch:{
// isHot:{
// // 初始化时候，让handler函数调用，默认值是false
// immediate:true,
// deep:true,
// // handler 什么时候被调用：当 isHost 发生改变的时候
// handler(newVal,oldVal){
// console.log(" isHot 被修改了",newVal,oldVal)
// }
// }
// }
// 简写
// watch:{
// isHot(newVal,oldVal){
// console.log(" isHot 被修改了",newVal,oldVal)
// }
// }
// 方式二：
// 完整写法
// watch:{
// isHot:{
// // 初始化时候，让handler函数调用，默认值是false
// immediate:true,
// // handler 什么时候被调用：当 isHost 发生改变的时候
// handler(newVal,oldVal){
// console.log(" isHot 被修改了",newVal,oldVal)
// }
// }
// }
})
vm.$watch("isHot",{
// 初始化时候，让handler函数调用，默认值是false
immediate:true,
// handler 什么时候被调用：当 isHost 发生改变的时候
handler(newVal,oldVal){
console.log(" isHot 被修改了",newVal,oldVal)
}
})
** computed 和 watch 的区别：**
computed能完成的功能,watch都可以完成watch能完成的功能，computed不一定能完成，例如：watch进行异步操作
两个重要的原则：
3. 所有被 vue 管理的函数，最好写成普通的函数，这样的 this 指向才是 vm 或者组件的实例对象。
- 所有不被
Vue所管理的对象，如： 定时器的回调函数，ajax的回调函数等，Promise的回调函数，最好写成箭头函数，这样this的指向才是vm或者 组件的实例对象。
1.9 绑定样式
class 样式：
写法：:class=‘xxx’ xxx 可以是字符串，数组，对象。
- 字符串写法适用于：类名不确定，要动态获取的。
- 数组写法适用于：绑定个数不确定，名字也不确定。
- 对象写法适用于：绑定样式个数不确定，名字也不确定，但是要动态决定用不用。
style 样式：
:style='{fontSize:xxx}'其中xxx是动态值。:style="[a,b]"其中a,b是样式对象
2.0 条件渲染
v-if：
写法：
v-if=“表达式”v-else-if=“表达式”v-else=“表达式”
适用于：切换频率较低的场景
特点：不展示 DOM 元素
注意：v-if可以和 v-else-if 以及 v-else 一起使用，但是要求结构不能被打断。
v-show：
写法：v-show=‘表达式’
适用于：切换频率较高的场景。
特点：不展示的 DOM 元素未被移除，仅仅是使用的样式被移除。
备注：
使用 v-if 的时候，元素可能无法被获取到，但是使用 v-show 一定可以获取到
扫一扫
881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
