我是帅气的石头
我是帅气的石头

Vue3.X学习笔记

引用

 




    
    
    
    demo1

创建应用app和挂载

//创建
 const app=Vue.createApp({})
//挂载到DOM
 const vm = app.mount("#app")

或者

 Vue.createApp({  
     ...
    }).mount('#app')

生命周期函数

生命周期函数，生命周期函数你可以这样理解，就是在** 在某一时刻会自动执行的函数 **，这句话你可以注意两个关键词:
(1)某一时刻
(2)自动执行

Vue3中有八个生命周期函数，

beforeCreate( ) ：在实例生成之前会自动执行的函数
created( ) : 在实例生成之后会自动执行的函数
beforeMount( ) : 在模板渲染完成之前执行的函数
mounted( ) : 在模板渲染完成之后执行的函数
beforeUpdate ：当data中的数据变化时， 会立即自动执行的函数
updated：当data中的数据发生变化，页面重新渲染完后，会自动执行的函数
beforeUnmount( ) :当Vue应用失效时，会自动执行的函数
unmounted() : 当Vue应用失效时，且DOM完全销毁之后，会自动执行

这样就有四个关键节点了：创建、渲染、更新、销毁。最主要的理解是他们是自动执行的函数




    
    
    
    demo7

插值表达式和v-bind绑定数据

插值表达式就是经常看到的{{xxxx}}这样的东西

插值表达式输出html标签：v-html

return {
    message: 'jspang.com'
}
...

template: `
 
`

[ 插值表达式只作一次渲染-v-once]

只有在第一次渲染去data中的值，而以后不再跟随data变化，这时候就要用到v-once指令。

插值表达式中是可以使用JS表达式的，最常用的表达式是三元运算符

{{count>2?'大':'小'}}

也可以这样：

{{'jspang'+'.com'}}


{{1+2}}

v-bind使用

现在我们给h2标签加入一个title属性，属性的值也想使用message

 
`

这时候浏览器中鼠标放上时显示的确实message这个单词，而并没有出现我们想要的结果。这时候就可以使用v-bind标签了。写成下面的样式就可以了

v-bind:title="message"

v-bind的简写方式：

{{message}}


{{message}}

v-on基本用法

methods:{
    hanldClick(){
        alert('欢迎光临红浪漫')
    }
},
template:`

{{message}}

`

v-on还有一个简写方法，就是可以不屑v-on:用@代替，

template:`

{{message}}

`

模板动态参数

这里v-bind:title中的title是来自data中的，就可以这样写。

const app=Vue.createApp({ 
    data(){
        return{
            message:'jspang.com' ,
            name:'title'
        }
    },
    //.........
    template:`
        

        {{message}}
        

    `

})

可以看到我们在data中，定义了一个name的变量，值是一个字符串，然后在绑定属性时我们使用了[]方括号加上data中变量名的形式。这时候绑定的属性就变的灵活了，这种形式就是模板动态参数，也称为动态属性。

可以在浏览器中使用检查的方式，查看此时绑定属性的名称，如果进行修改，比如改成title1,浏览器中也会跟随改变，形成动态效果，这就是动态属性了

return{
    message:'jspang.com' ,
    name:'title',
    event:'click'
}

template:`
    

    {{message}}
    

`

这时候就实现了动态绑定方法，可以打开浏览器，看一下效果。当点击

标签时，也会弹出对应的alert效果。当然你还可以帮click改成其他相应事件，比如改成event:'mouseenter'，这样，当鼠标滑入时就可以相应弹出效果了。

阻止默认事件

最常见的默认事件就是表单的默认提交事件，比如我们这里写一个表单，然后写一个属性为submit的按钮，当点击按钮时，表单就会默认提交到对应的网址。

这时候在浏览器中预览，点击“默认提交”按钮，就会立即跳转到百度上去，这就是默认响应事件。但是在开发中我们经常需要阻止这种默认响应事件。比如写出下面的代码。

methods:{
    hanldeClick(){
        alert('欢迎光临红浪漫')
    },
    hanldeButton(e){
        e.preventDefault()   //阻止默认事件
    }
},
//...
template:`
      //....


    


`

或者 使用prevent修饰符


    


`

methods中的写法

hanldeButton(){
    alert('jspang.com') 
}

这样就可以阻止默认事件，直接响应对应事件的内容了。prevent就是阻止默认事件的修饰符。修饰符可以见简化一些代码的编写，也是比较常用的一个操作。

v-if判断

 {{message}} 


template: `

 {{message}} 


 {{message}} 

    `

计算属性computed

计算属性的特性是：当计算属性依赖的内容发生变更时，才会重新执行计算

data(){
    return{
        message:'jspang.com' , 
        price:10,
        count:2
    }
},

template:` 
 {{price * count}}
`

写一个getTotal的方法。

methods:{
        getTotal(){
            return this.price * (this.count++);
        }
    },
    template:` 
 {{getTotal()}}
`

methods无法满足计算需求
比如：

methods:{
    getTotal(){
        return Date.now()
    }
},

这时候打开浏览器的控制台console，然后在里边通过手都的方式修改message的值vm.message='1111'。这时候问题产生了，你会发现getTotal( )方法被重新执行了。这就是这个问题的所在，这个问题其实可以用今天的主角coumputed计算属性来解决。

编写计算属性

computed:{
    total(){
        return Date.now()
    }
},

template:` 
    
{{message}}

    
 {{total}}

`

这时候到浏览器中，用手动的方法，修改message的值，total的值就不会进行改变了。

vm.message='1111'

通过这个例子，你会对普通方法和计算属性的区别有所了解。这时候我们作一下总结：
(1)方法methods：只要页面重新渲染，就会重新执行方法
(2)计算属性computed: 当计算属性依赖的内容发生变更时，才会重新执行计算

完整例子




    
    
    Demo12-Vue中的计算属性

watch侦听器

watch侦听器的作用就是侦听一个data中的值的变化，变化后可以写一个方法，让其进行一些操作（业务逻辑的编写）。


data(){
            return{
                ...
                count:2
            }
        }
...
watch:{
    count(){  //监听data中的count值变化
            console.log('count changed')
    }
},

侦听器中的方法还可以接收两个参数，一个是现在的值（current），一个是变化之前的值（prev）。我们分别接收这两个值，并打印在控制台，看一下效果。

watch:{
    count(current,prev){
        console.log('watch changed')
        console.log('现在的值：',current)
        console.log('变化前的值：',prev)
    }
}
监听器watch和计算属性computed的区别

计算属性computed必须要返回一个值，而且在页面渲染的同时就会执行里边的业务逻辑，也就是会先执行一遍你写的业务逻辑，而watch只有发生变化时才会执行，也就是说值没有变化，它是不执行里边业务逻辑的。

method,watch,computed三者优先级

现在总结一下method、watch和computed三者如果都能实现相同的功能，它们之间的取舍和使用优先级。
（1）computed 和 method都能实现的功能，建议使用computed,因为有缓存，不用渲染页面就刷新。
（2）computed 和 watch 都能实现的功能，建议使用 computed，因为更加简洁。

模板样式绑定

         data(){
            return {
                classString:'red',
            }
        },
        template:`
            
JSPang.com
   //绑定同样使用v-bind，你也可以使用简写:
        ` 
....
//定义三个样式
对象的绑定方式
data(){
    return {
        classString:'red',
        classObject:{red:true,background:true}
    }
},
...
template:`
    
JSPang.com
  
`

这时候再到浏览器中查看效果，就会有两个样式被绑定了red和background。如果你这首把red改为false，那效果就是只有背景颜色，没有字体颜色了。

数组的绑定方式
data(){
    return {
        classString:'red',
        classObject:{red:true,background:true},
        classArray:['green','background'],
    }
},

...
template:`
    
JSPang.com
  
`
行内样式绑定
 const app=Vue.createApp({ 

        data(){
            return {
                styleString:'color:orange;',   
                styleObject:{
                    color:'red',
                    background:'yellow'
                }
            }
        },
        template:`
            
JSPang.com
  
        ` 
    }) 
    const vm=app.mount("#app")

v-if和v-show区别

data(){
    return{
        show:true,
    }
},

template:`
    
JSPang.com
  
`

这时候打开浏览器进行预览，是可以看到JSPang.com这个h2的DOM元素的。如果把数据项show改成false就看不到了。

v-if更加灵活，可以增加多个判断，比如v-else-iif和else，而v-show不具备这样的灵活性。

v-show控制DOM元素显示，其实控制的是css样式，也就是display:noe。现在你可以把data的值修改为false，然后刷新浏览器，打开浏览器调试器的Elements选项卡，就可以清楚的看到，这时候

标签上的style样式就是display:none。

v-for循环

v-for循环数组方法
 const app=Vue.createApp({ 
        data(){
            return{   
                listArray:['谢大脚','刘英','晓红']
            }
        },
        methods:{
        },
        template:`
            
    
                
  • [{{index}}]{{item}}
    • 
            

        `

    }) 
    const vm=app.mount("#app")

关于循环是key值
为了提高循环时性能，在数组其中一项变化后，整个数组不进行全部重新渲染，Vue提供了绑定key值的使用方法，目的就是增加渲染性能，避免重复渲染。
加唯一性key值，增加后vue就会辨认出哪些内容被渲染后并没有变化，而只渲染新变化的内容。

:key="index+item"

官方不建议使用索引index为key值，但此时又为了保持唯一性，所以这里使用了index+item进行绑定key值

v-for 循环对象
data(){
    return{  
        //......
        listObject:{
            GirlOne:'谢大脚',
            GirlTwo:'刘英',
            GirlThree:'晓红'
        }
    }
},

在模板中进行循环的时候，为了更好的语义化，我们把参数改为了value,key和index。然后进行循环。

    
    
  • 
        [{{index}}]{{value}}-{{key}}
    
    •
v-for循环数字
 {{count}}|
v-for循环中使用判断v-if

Vue给我们提供了