vue学习日记

vue学习笔记

前言 我以前也学习过vue，之所以现在又学是因为现在有点新东西要玩，但是我基本上忘得差不多了，所以现在学一下。

认识vue

很简单我不会讲的太明白 因为变成语言都差不多的

```js

{{age}}
<input type="text" v-model="age" @keydown="test">
##指令修饰符

• 
  {{i}}
  {{item}}
  {{item}}
  
  
  {{item}}
  

const { createApp } = Vue
createApp({
data(){
return{
age:'10',
arr:[10,20,30]
}
},
methods:{
test(e){
console.log(e)
}
}
}).mount("#app")

```

你要知道new vue({}) 这种语法是为什么 举个例子就是

js let arr = new Array() let arr = [] // 这是相同的效果 就是如此

常用指令

1. v-if 直接删除标签 , v-show display 控制显示和隐藏

   js <button @click="()=>this.ctlif = !ctlif">改变if</button> <button @click="()=>this.ctlshow = !ctlshow">改变show</button>

2. v-on 简写成@ 也就是上诉例子

   • @keydown.esc 退出
   • @keydown.enter 进入

3. v-bind 简写成 : 经常运用在 href,src,style,class

4. v-text 纯文本 ,v-html 有标签的

5. Vue.directive自定指令

   ```js
   Vue.directive('red',(el,data)=>{
   el.style.color= 'red'
   })
   # 用就是 v-red

   放在vue里就是局部

   directives:{
   color:(el,data)=>{
   el.style.color= data.value
   }
   }
   ```

6. v-cloak 在vue还没有加载出来的使用

   js <style> [v-cloak]{ display:none; } </style>

生命周期函数

1. beforeCreate 在挂载之前
2. created 挂载完成 用来ajax请求
3. beforeMount 页面渲染前
4. mounted 页面渲染完成 页面渲染 引用dom插件swiper
5. beforeDestory 销毁前
6. destoryed 销毁完成
7. beforeUpdate 更新前
8. updated 更新后

计算属性

计算属性的优势可以查询百度

js // 在data中我们有一个userList computed: { maleList(){ return this.userList.filter(e => e.gender === '男') } }

过滤器属性 -- filters 但是vue3已经把这个取消掉了

js filters:{ fmtGender(value){ let arr = ['男','女'] return arr[value] } }