内置指令
内置指令:vue官方代码包中提供的已经写好的指令,可以直接使用
-
v-cloak :昙花一现,当数据渲染前,该指令在标签上,数据渲染后,指令自动消失,解决闪现问题
-
v-bind(重点):绑定动态属性 src class id 也可以自定义属性;简写 冒号 :属性名=变量
-
v-on(重点): - 定义:用来绑定事件 - 语法: v-on:事件名='事件处理函数 - 简写: @事件名 = 事件执行函数 - 事件对象--在vue 中没有参数, 那么事件对象 e - 事件执行函数的传值----$event vue 提供的一个内置一个变量 表示事件对象 - 事件修饰符:.stop-.prevent-.capture-.self-.once-.left-.right - 按键修饰符--主要用来修饰键盘事件的:.enter, ,esc, .up, .delete .....;在vue3语法中 键码的修饰符没有了, 在vue2中有
-
v-pre:绑定该指令的标签不渲染
-
v-once:只渲染一次
-
v-text:将文本内容填充在标签之间
-
v-html:将标签或文本内容添加在标签之间;xss跨站基本攻击 解决方法可以使用正则过滤用户的非法输入
-
v-for:可以用来遍历 数组,对象,字符串,数字;key属性:唯一索引值,可以提高虚拟dom diff(同层比较)算法的速度
-
v-if-else-if:条件判断语句
-
v-model:数据的双向绑定;MVVM架构思想 M-虚拟dom,V-view视图,VM-视图dom
-
v-memo:这个指令是vue3 新增的指令 , 用于优化性能, 决定是否有重新创建虚拟dom, 进行较少dom 更新渲染;语法:v-memo = [依赖值] ,当依赖值发生变化, 则绑定该指令的标签需要重新创建虚拟dom,. 并更新渲染,否则不更新渲染.注意📢:注意: 依赖项为空数组, 则相当于v-once
自定义指令
- 开发者自定义的指令,根据自己的需求去定义
- 本质 使用自定义指令来操作原生DOM节点
- 语法:v-自定义指令名称='参数'
局部自定义指令
directives:{
created() {}//创建完成
beforeMount() {}//挂载前,挂载到父节点前 不能获取父节点
mounted(){}//挂载完毕 可以获取到父节点
beforeUpdate(){}//数据更新之前
updated(){}//数据更新后
beforeUnmount(){}//卸载前
unmounted(){}//卸载后
}
全局自定义指令
app.directive( 指令名称 ,{
// 生命周期 钩子函数
})
//简写
app.directive( 指令名称, (el,binding)=>{
})
自定义指令的参数
- el===元素节点
- binding===参数对象
- vNode===虚拟DOM描述对象
- preVnode===上一次虚拟DOM描述对象
Object.defineProperty
//定义: 可以给对象新增或修改对象的现有 =属性
//语法
Object.defineProperty( 操作的对象.属性{
value: 给属性赋值使用
writeable: 决定该属性是否可以写
configable: 该属性是否可以被删除
enumerable: 决定该是否可以被遍历
get() { 当访问该属性的时候触发, return 该值就是该属性的值}
set( val ) { 当修改该属性的时候触发 val就是修改的值}
计算属性 computed
- 定义:计算属性,是一个属性,不是一个函数;计算属性依赖于data中的数据,然后创建一个新的值,当依赖属性发生变化,计算属性会重新计算
- 特点:计算属性一上来就会执行一遍,并且有缓存,计算属性必须有return值,多个值影响一个值
//语法
//简写方式只有get
computed: {
计算属性(){
return
}
}
//get 和Set
computed:{
计算属性:{
get(){
return 计算属性的值
}
set(val){
val就是修改的就算属性的值
}
}
}
watch 监听器
定义:监听dat中的数据/属性的变化,从而执行对应的操作
- 特点:
- 没有缓存
- 没有return,不能手动调用,因为是一个钩子函数
- 对初始化不执行,默认只有当数据发生变化的时候才触发
- 可以设置一些配置项,deep 深度监听,状态为true;immeditate 初始化监听 状态为true;flush:post 可以获取最新的DOM
- 一般进行异步开销比较大的操作
//简写方式
watch{
dataValue(newValue,oldValue){
执行操作
}
}
//正常书写方式
watch{
newValue:{
handler(newValue,oldValue){
执行操作:当修改整个数据的时候,才有oldValue,否则只有newValue
},
deep: true,
immediate: true,
flush:'post'
}
}
}
生命周期钩子函数
const {createApp} = Vue;
const vm = createApp({
data() {
return {
count:0,
schoolList:[]
}
},
methods: {
addCount(){
this.count++
}
},
computed:{
doubleCount(){
return this.count*2
}
},
setup(){
console.log('setup');
},
beforeCreate() {
//当前状态的是实例的初始化已经完成,但是实力上的属性和方法还没有完成绑定实例,当前的实例并不完整,没有计算属性,data属性 methods方法
console.log('beforeCreate');
},
created() {
//当前是实例创建完成,并且当前实例上的属性方法都已经绑定在实例上
console.log('created');
//特点:使用的比较多可以进行一些数据请求的操作,请求数据的操作,请求数据的一些操作一般伴随修改data的数据的操作,此时获取不到data,所以才在该生命周期进行数据请求操作
// axios({
// method: 'get',
// url: 'https://api.i-lynn.cn/college?page=' + this.currentPage
// }).then(res => {
// console.log('res', res);
// this.schoolList = res.data.data.list1
// console.log(this.schoolList);
// })
},
beforeMount() {
//挂在前
console.log('beforeMount');
},
mounted() {
//挂载后
console.log('mounted');
},
beforeUpdate() {
//更新前
console.log('beforeUpdate');
},
updated() {
//更新后
console.log('updated');
},
beforeUnmount() {
//卸载前
console.log('beforeUnmount');
},
unmounted() {
//卸载后
console.log('unmounted');
},
}).mount('#app')
fetch 数据请求
const {createApp} = Vue;
const vm = createApp({
data() {
return {
count:0,
}
},
created() {
//01进行数据请求(默认get)
// fetch('https://api.i-lynn.cn/college?page=2').then(res=>{
// console.log(res);
// return res.json()
// }).then(data =>{
// console.log(data);
// })
//02 post请求 json格式提交参数
fetch('https://api.i-lynn.cn/college',{
method:'POST',
headers:{
'Content-Type': 'application/json'
},
body:JSON.stringify({username:'小绿',age:18})
}).then(res =>
res.json()
).then(res => {
console.log('post',res);
})
//03:post 请求,表单编码格式提交参数
fetch('https://api.i-lynn.cn/college', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: JSON.stringify({ username: '小绿', age: 18 })
}).then(res =>
res.json()
).then(res => {
console.log('post', res);
})
},
}).mount('#app')
