Vue3的学习记录

helloworld！

参考技术胖的blog：http://jspang.com/detailed?id=68

要引入Vue3的地址：

<script src="https://unpkg.com/vue@next"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
     
      //创建Vue实例
        template: '<div>Hello World</div>' // template是模板的意思，就是在JS里写html代码
    }).mount("#app") //这个模板需要放一个位置，也就是说挂载，挂载到`id=app`的DOM上
</script>
</html>

计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>counter</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                counter: 1
            }
        },
        mounted() {
    
    
            console.log('页面加载完成后-自动执行')
            setInterval(() => {
    
     //lambda
                this.counter += 1   //这个this.counter指向的就是data中的counter
                //this.$data.counter +=1   //效果相同
            }, 1000)
        },
        template: '<div>{
    
    {counter}}</div>'
    }).mount("#app");

</script>
</html>

按钮点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
     
     
        data() {
     
     
            return {
     
     
                counter: "欢迎光临，贵宾一位"
            }
        },
        methods: {
     
     
            welcomeBtnClick() {
     
     
                this.counter = "欢迎你的光临，贵宾一位！"
            },
            byeBtnClick() {
     
     
                this.counter = "欢迎下次光临"
            },
        },
        template: `
            <div>
                <div>{
      
      {counter}}</div>
                <button v-on:click="welcomeBtnClick">有顾客来</button>&nbsp;
                <button v-on:click="byeBtnClick">顾客离开</button>
            </div>`
    }).mount("#app");

</script>
</html>

if判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
     
     
        data() {
     
     
            return {
     
     
                counter: "欢迎光临，贵宾一位",
                setMeal: '真空套餐  帝王套餐  夏日套餐 学生套餐',
                isShowMeal: false
            }
        },
        methods: {
     
     
            welcomeBtnClick() {
     
     
                this.counter = "欢迎你的光临，贵宾一位！"
            },
            byeBtnClick() {
     
     
                this.counter = "欢迎下次光临"
            },
            showOrHideBtnClick() {
     
     //改变判断值
                this.isShowMeal = !this.isShowMeal
            },
        },
        template: `
            <div>
                <div>{
      
      {counter}}</div>
                <button v-on:click="welcomeBtnClick">有顾客来</button>&nbsp;
                <button v-on:click="byeBtnClick">顾客离开</button>
                <div>
                    <div v-if="isShowMeal">{
      
      {setMeal}}</div> //进行if判断
                    <button v-on:click="showOrHideBtnClick">显示/隐藏套餐</button>
                </div>
            </div>`
    }).mount("#app");

</script>
</html>

循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
     
     
        data() {
     
     
            return {
     
     
                list: ['1-大脚', '2-刘英', '3-晓红']
            }
        },
        methods: {
     
     
        },
        template: `
            <ul>
                <li v-for="item of list">{
      
      {item}}</li>
            </ul>`//对list进行循环，item就是里面的循环对象
    }).mount("#app");

</script>
</html>

显示下标

<li v-for="(item,index) of list">[{
   
   {index}}]{
   
   {item}}</li>

注意index的位置，是第二个！

数据双向绑定（v-model）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
     
     
        data() {
     
     
            return {
     
     
                inputValue: '',
                list: []
            }
        },
        methods: {
     
     
            handleAddItem() {
     
     
                this.list.push(this.inputValue)
                this.inputValue = '' //输入完以后就将inputValue的值清空
            }
        },
        template: `
            <ul>
                <input v-model="inputValue" />
                <button v-on:click="handleAddItem">增加佳丽</button>
                <li v-for="(item,index) of list">[{
      
      {index}}]{
      
      {item}}</li>
            </ul>`//对list进行循环，item就是里面的循环对象
    }).mount("#app");

</script>
</html>

组件化开发

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>佳丽列表</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
<div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
     
     
        data() {
     
     
            return {
     
     
                inputValue: '',
                list: []
            }
        },
        methods: {
     
     
            handleAddItem() {
     
     
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        },
        template: `
            <div>
                <my-title/>
                <input v-model="inputValue"/>
                <button v-on:click="handleAddItem">增加佳丽</button>
                <ul>
                    <my-jiali
                            v-for="(item,index) of list"
                            v-bind:item="item"
                            v-bind:index="index"
                    />
                </ul>
            </div>

        `
    })

    //这里定义了俩组件，一个是my-title，一个是my-jiali，这些组件可以用在template中，降低耦合
    app.component('my-title', {
     
     
        template: '<h1 style="text-align:center">象牙山洗脚城</h1>'
    })//标题组件

    app.component('my-jiali', {
     
     
        //props 是用于接收父组件的参数的，通过v-bind将父组件的值传递给子组件中，props来获取值
        props: ['item', 'index'],
        template: `
            <li>[{
      
      {index}}]-{
      
      {item}}</li>`
    })//循环的组件
    //最后挂载到id=app的 div标签上
    app.mount("#app")
</script>

</html>

mvvm设计模式

Vue的编程设计模式应该叫做mvvm的设计模式。什么叫做mvvm哪？它首先是面向数据的编程，程序中定义了数据，然后定义了模板，Vue就可以把数据和模板自动进行关联。最后挂载到真实的DOM上，展示给用户。

mvvm解释: 第一个m代表model数据，第一个v代表view视图，最后两个字幕vm代表viewModel视图数据连接层。

<script>
    const app = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                message: 'jspang.com'   //1.在这里定义了数据，也就是`model`数据
            }
        },
        template: "<h2>{
    
    {message}}</h2>" //2.在这里定义了模板，也就是`view`，
        //定义后的自动关联，就叫做`vm`，viewModel数据视图连接层。
    })
    app.mount("#app")  
</script>

Vue3.x生命周期函数

官方图

beforeCreate( ) ：在实例生成之前会自动执行的函数
created( ) : 在实例生成之后会自动执行的函数
beforeMount( ) : 在模板渲染完成之前执行的函数
mounted( ) : 在模板渲染完成之后执行的函数

js代码

<script>
    Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                counter: "欢迎光临，贵宾一位",
                setMeal: '真空套餐  帝王套餐  夏日套餐 学生套餐',
                isShowMeal: false
            }
        },
        methods: {
    
    
            welcomeBtnClick() {
    
    
                this.counter = "欢迎你的光临，贵宾一位！"
            },
            byeBtnClick() {
    
    
                this.counter = "欢迎下次光临"
            },
            showOrHideBtnClick() {
    
    
                this.isShowMeal = !this.isShowMeal
            },
        },
        beforeCreate() {
    
    
            console.log('beforeCreate')
        },
        created() {
    
    
            console.log('created')
        },
        beforeMount() {
    
    
            console.log('beforeMount')
        },
        mounted() {
    
    
            console.log('mounted')
        },
        template: `
            <div>
                <div>{
     
     {counter}}</div>
                <button v-on:click="welcomeBtnClick">有顾客来</button>&nbsp;
                <button v-on:click="byeBtnClick">顾客离开</button>
                <div>
                    <div v-if="isShowMeal">{
     
     {setMeal}}</div>
                    <button v-on:click="showOrHideBtnClick">显示/隐藏套餐</button>
                </div>
            </div>`
    }).mount("#app");

</script>

beforeUpdate和updated的区别

在beforeUpdate时，DOM的内容并没有渲染更新，而到了updated中DOM的内容已经进行了更新。这就是两个生命周期函数的区别

<script>
    Vue.createApp({
        data() {
            return {
                message: 'jspang.com'
            }
        },
        methods: {
            handleItemClick() {
                this.message = this.message == 'jspang.com' ? "技术胖" : "jspang.com"
            }
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        mounted() {
            console.log('mounted')
        },
        template: `
            <h2 v-on:click='handleItemClick'>{
   
   {message}}</h2>`
    }).mount("#app");

</script>

beforUnmount和unmounted生命周期函数

这两个生命周期函数是在Vue销毁时自动执行的函数，一个是销毁前执行，一个是销毁后执行。

beforeUnmount( ) :当Vue应用失效时，会自动执行的函数
unmounted() : 当Vue应用失效时，且DOM完全销毁之后，会自动执行

关键js代码

<script>
    const app = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                message: 'jspang.com'
            }
        },
        methods: {
    
    
            handleItemClick() {
    
    
                this.message = this.message == 'jspang.com' ? "技术胖" : "jspang.com"
            }
        },
        beforeUpdate() {
    
    
            console.log('beforeUpdate')
        },
        updated() {
    
    
            console.log('updated')
        },
        beforeUnmount() {
    
    
            console.log('beforeUnmount')
        },
        unmounted() {
    
    
            console.log('unmounted')
            console.log(document.getElementById('app').innerHTML)
        },
        mounted() {
    
    
            console.log('mounted')
            console.log(document.getElementById('app').innerHTML)
        },
        template: `
            <h2 v-on:click='handleItemClick'>{
     
     {message}}</h2>`
    })
    app.mount("#app");

在浏览器上输入

app.unmount()

即可看到效果

在浏览器执行app.unmount(),会看到，在beforeUnmount方法中还是有DOM内容的，然后到了unmounted方法中，就已经没有任何的DOM内容了

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

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

这些生命周期虽然多，但总共就四个关键节点：创建、渲染、更新、销毁。最主要的理解是他们是自动执行的函数。