vue学习日记

vue学习笔记

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

认识vue

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

```js

 <div id="app">
    {{age}}
    <input type="text" v-model="age" @keydown="test">
    ##指令修饰符
    <input type="text" v-model.number.trim="age">
     <!-- 失去焦点的时候触发 -->
    <input type="text" v-model.number.lazy="age">
    <ul>
        <li v-for="(item,i) in arr" :style="{color: (item %2===0?'red':'blue')}">
        {{i}}
            {{item}}
             <a :href="'detail.html?id'+ item">{{item}}</a>
             </br>
             <a v-bind:href="`detail.html?id=${item}`">{{item}}</a>
        </li>
    </ul>
</div>

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]
        }
    }
```