Vue3系统入门与项目实战学习笔记

发布时间：2023-04-16 13:30

文章目录

  • 1 Vue 语法初探
    • 1-1 课前须知
    • 1-2 初学编写 HelloWorld 和 Counter
    • 1-3 编写字符串反转和内容隐藏小功能
    • 1-4 编写TodoList 小功能，了解循环和双向绑定
    • 1-5 组件概念初探，对 TodoList 进行组件代码拆分
  • 2 Vue 基础语法
    • 2-1 Vue 中应用和组件的基础概念
    • 2-2 理解 Vue 中的生命周期函数
    • 2-3 常用模版语法讲解
    • 2-4 数据，方法，计算属性和侦听器
    • 2-5 样式绑定语法
    • 2-6 条件渲染
    • 2-7 列表循环渲染
    • 2-8 事件绑定
    • 2-9 表单中双向绑定指令的使用
  • 3 探索组件的理念
    • 3-1 组件的定义及复用性，局部组件和全局组件
    • 3-2 组件间传值及传值校验
    • 3-3 单向数据流的理解
    • 3-4 Non-Props 属性是什么
    • 3-5 父子组件间如何通过事件进行通信
    • 3-6 组件间双向绑定高级内容
    • 3-7 使用插槽和具名插槽解决组件内容传递问题
    • 3-8 作用域插槽
    • 3-9 动态组件和异步组件
    • 3-10 基础语法知识点查缺补漏

1 Vue 语法初探

1-1 课前须知

  • 如何使用vue完成项目的开发

  • 深度理解特性背后的原理

\"Vue3系统入门与项目实战学习笔记_第1张图片\"
\"Vue3系统入门与项目实战学习笔记_第2张图片\"

\"Vue3系统入门与项目实战学习笔记_第3张图片\"
\"Vue3系统入门与项目实战学习笔记_第4张图片\"

\"Vue3系统入门与项目实战学习笔记_第5张图片\"

1-2 初学编写 HelloWorld 和 Counter

DOCTYPE html>
<html lang=\"en\">
<head>
	<meta charset=\"UTF-8\">
	<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
	<title>hello worldtitle>
	<script src=\"https://unpkg.com/vue@next\">script>
head>
<body>
<div id=\"root\">div>
body>
<script>
    // Vue.createApp({ // 创建vue实例
    //     template: \'
hello world
\' // 在root元素里面用此模板展示内容
    // }).mount(\'#root\'); // 在id为root的元素上使用vue

    /**
     * 1.找到root节点，往上面挂一个元素
     * 2.元素的内容就是template里面的内容
     * 3.用{{}}}：表示这是js表达式，是一个变量
     *      

     *          
{{content}}

     *      

     */
    Vue.createApp({
        data() { // 定义数据
            return {
                content: 1
            }
        },
	    // 当页面加载完成，就会执行mounted函数，自动执行函数
	    mounted() { // 自动执行
            // console.log(\'mounted\')
		    setInterval(() => {
                this.content += 1
		    }, 1000)
	    },
        template: \'
{{content}}
\' // 渲染内容
    }).mount(\'#root\'); // 渲染节点
script>
html>

此后的代码省略了html的head、body部分，只写js部分代码

1-3 编写字符串反转和内容隐藏小功能

	// 反转字符串
    // Vue.createApp({
    //     data() {
    //         return {
    //             content: \'hello world\'
    //         }
    //     },
    //     methods: { // 定义函数
    //         handleBtnClick() {
    //             // 将content内容反转
    //             this.content = this.content.split(\'\').reverse().join(\'\')
    //         }
    //     },
    //     template: `
    //       

    //       	{{ content }}
    //       
    //       	
    //       

    // 	`
    // }).mount(\'#root\');

    // 显示/隐藏
    Vue.createApp({
        data() {
            return {show: true}
        },
        methods: {
            handleBtnClick() {
                // 显示/隐藏
                this.show = !this.show
            }
        },
        template: `
          

          
          hello world
          
          

		`
    }).mount(\'#root\');

1-4 编写TodoList 小功能，了解循环和双向绑定

	// 循环list数据
    // Vue.createApp({
    //     data() {
    //         return {
    //             list: [\'hello\', \'world\', \'dell\', \'lee\']
    //         }
    //     },
    //     template: `
    //       
    
    //       	
    //       	
  • {{item}} {{index}}
    • 
    //       

    // 	`
    // }).mount(\'#root\');

    // 增加
    Vue.createApp({
        data() {
            return {
                inputValue: \'\',
                list: []
            }
        },
        methods: {
            handleAddItem() {
                this.list.push(this.inputValue)
                this.inputValue = \'\' // 增加完之后，input框清空
            }
        },
        template: `
          

          
          
          
          
    
            
  • {{ item }}
    • 
          

          

		`
    }).mount(\'#root\');

1-5 组件概念初探，对 TodoList 进行组件代码拆分

const app = Vue.createApp({ // 创建一个vue实例app
        data() {
            return {
                inputValue: \'\',
                list: []
            }
        },
        methods: {
            handleAddItem() {
                this.list.push(this.inputValue)
                this.inputValue = \'\'
            }
        },
        template: `
          

          
          
          
          
    
            
          

          

		`
    })

    // 在app上注册组件:组件是页面的一部分
    app.component(\'todo-item\', {
        props: [\'content\', \'index\'], // 接收外部传递的内容
        template: \'
  • {{index}} -- {{content}}
    • \'    
    })

    // 在app上挂载实例
    app.mount(\'#root\')

    2 Vue 基础语法

    2-1 Vue 中应用和组件的基础概念

    	// createApp：创建一个Vue应用，存储到app变量当中
    // 传入的参数：这个应用最外层的组件该如何展示
    // mvvm设计模式： m->model 数据，v->view 视图，vm->viewModel 视图数据连接层
    const app = Vue.createApp({
        // 以下内容是app的参数
        // model
        data() {
            return {
                message: \'hello world\'
            }
        },
        // view
        template: \"
    {{message}}
    \"    
    })
    // vm:Vue的根组件，viewModel
    const vm = app.mount(\'#root\')
    // 可以通过vm操作数据
    // vm.$data.message = \'bye\'

    2-2 理解 Vue 中的生命周期函数

    /**
     * 生命周期函数：在某一时刻会自动执行的函数  (钩子=生命周期函数)
     * 关键点：某一时刻
     *       自动执行：eg.mounted()
     */
    const app = Vue.createApp({
        data() {
            return {
                message: \'hello world\'
            }
        },
        // 在实例生成之前自动执行的函数
        beforeCreate() {
            console.log(\'beforeCreate\')
        },
        // 在实例生成之后自动执行的函数
        created() {
            console.log(\'created\')
        },
        // 在组件内容被渲染到页面之前自动执行的函数
        beforeMount() {
            console.log(document.getElementById(\'root\').innerHTML, \'beforeMount\') //  beforeMount
        },
        // 在组件内容被渲染到页面之后自动执行的函数
        mounted() {
            console.log(document.getElementById(\'root\').innerHTML, \'mounted\') // 
    hello world
     mounted    
        },
        // 当数据发生变化时，会自动执行的函数
        beforeUpdate() {
            console.log(document.getElementById(\'root\').innerHTML, \'beforeUpdate\') // 
    hello world
     beforeUpdate    
        },
        // 当数据发生变化，页面重新渲染后，会自动执行的函数
        updated() {
            console.log(document.getElementById(\'root\').innerHTML, \'updated\') // 
    bye
     beforeUpdate    
        },
	    // 当vue应用场景失效时，会自动执行的函数
        beforeUnmount() {
            console.log(document.getElementById(\'root\').innerHTML, \'beforeUnmount\') // 
    hello world
     beforeUnmount    
        },
        // 当vue应用场景失效时，且 dom 完全销毁后，会自动执行的函数
        unmounted() {
            console.log(document.getElementById(\'root\').innerHTML, \'unmounted\') // unmounted
        },
	    // 如果没有template属性，内容写在了body下的div root下，生命周期函数也是如此
        template: \"
    {{message}}
    \"     // 先将模板变成函数，再渲染
    })
    const vm = app.mount(\'#root\')

    2-3 常用模版语法讲解

        const app = Vue.createApp({
        data() {
            return {
                message: \'hello world\',
                disabled: false,
                show: true,
                event: \'click\' // 动态参数
            }
        },
        methods: {
            handleClick() {
                alert(\'click\')
            },
            // pd(e) {
            //     e.preventDefault() // 阻止默认行为
            // }
        },
        template: `
          
          
    {{ message }}
    
          
          
    hello world
    
          
          
          
          
    {{ message }}
    
          
          
    {{ message }}
    
          
		
          
    
           
          
    
          `    
    })
    app.mount(\'#root\')

    2-4 数据，方法，计算属性和侦听器

        /**
     * data methods computed watcher
     * computed和methods实现相同的功能时，选computed，因为有缓存
     * computed和watcher实现相同的功能时，选computed，因为更简洁
     */
    const app = Vue.createApp({
        data() {
            return {
                message: \'hello world\',
                count: 2,
                price: 5,
                newTotal: 10,
            }
        },
        methods: {
            // 方法中this指向vue实例
            // 不要使用箭头函数，因为箭头函数的this指向其外层的this
            handleClick() {
                console.log(\'click\', this)
            },
            formatString(string) {
                return string.toUpperCase()
            },
            // 只要页面重新渲染，才会重新计算
            getTotal() {
                return Date.now()
                // return this.count * this.price
            }
        }, computed: {
            total() {
                // 当计算属性依赖的内容发生变更时，才会重新执行计算
                return Date.now()
                // return this.count * this.price
            }
        },
        // 当遇到异步情况的时候，可以使用watch
        // watch可以监听变量的改变，进行异步操作
        watch: {
            // price发生变化时函数会执行
            // price() {
            //     setTimeout(() => {
            //         console.log(\'price change\')
            //     }, 1000)
            // },

            // 也可以实现计算属性的功能，实际上watch就是计算属性的底层实现
            price(cur, pre) {
                console.log(cur, pre)
                this.newTotal = cur * this.count
            }
        },
        template: `
          
          
    {{ formatString(message) }}
    
          
          
    {{ message }} total:{{ total }}   getTotal():{{ getTotal() }}
    
          
          
    newTotal:{{ newTotal }}
    
		    `    
    })
    const vm = app.mount(\'#root\')

    2-5 样式绑定语法

       const app = Vue.createApp({
       data() {
           return {
               classString: \'red\',
               classObject: {red: true, green: true}, // 变量名：展示的样式值，变量值：是否展示
               classArray: [\'red\', \'green\', {brown: true}],
            styleString: \'color: yellow\', // 不建议使用
            styleObject: { // 建议使用对象的形式来写
                   color: \'orange\',
               background: \'skyblue\'
            }
           }
       },
       template: `
         
         
    hello world
    
         
         
    hello world
    
         
         
    hello world
    

         
         
    
          hello world
          
          
         
    
         
         
         
    hello world
    
         
         
    hello world
    
         
         
    hello world
    
       `    
   })

   app.component(\'demo\', {
       template: `
      
    one
    
      
    two
    
    `    
   })
   const vm = app.mount(\'#root\')

    2-6 条件渲染

    const app = Vue.createApp({
    data() {
        return {
            show: true,
         conditionOne: false,
         conditionTwo: true,
        }
    },
 template: `
   
   
  
    hello world
    
   
  
    hello world
    
   

   
      
    if
    
      
    else
    
      
    else
    
     `    
})
const vm = app.mount(\'#root\')

    2-7 列表循环渲染

        const app = Vue.createApp({
        data() {
            return {
                listArray: [\'hello\', \'world\'],
                listObject: {
                    name: \'mys\',
                    job: \'student\'
                },
            }
        },
        methods: {
            handleAddBtnClick() {
                // 1.使用数组的变更函数 push pop shift unshift splice sort reverse
                // this.listArray.push(\'hello\')
                // 2. 直接替换数组
                // this.listArray = [\'bye\', \'world\'].filter(item => item === \'bye\')
                // 3.直接更新数组的内容
                // this.listArray[1] = \'hhhh\'

                // 直接添加对象的内容，也可以自动的展示出来
                this.listObject.age = \'18\'
                this.listObject.sex = \'female\'
            }
        },
        template: `
          
    
          
          
          
    
            {{ item }} -- {{ index }}
          
    
          

          
          
    
            
            
          
    
          

          
    {{ item }}
    
          
          
    
		    `    
    })
    const vm = app.mount(\'#root\')

    2-8 事件绑定

          template: `
        
    
         {{ counter }}
         
         
         
         
         
         
    
           div自身
           
         
    
         
         
         
         
    鼠标修饰符
    
         
         
    精确饰符
    
        
    
    `    
  })

    2-9 表单中双向绑定指令的使用

        const app = Vue.createApp({
        data() {
            return {
                message: \'hello\',
                checkbox: [],
                radio: \'\',
                select: \'\',
                options: [{
                    text: \'A\', value: \'A\',
                }, {
                    text: \'B\', value: \'B\',
                }, {
                    text: \'C\', value: {value: \'C\'},
                }],
                checkboxValue: \'hello\',
	            lazy: \'lazy\',
	            number: 12,
            }
        },
        template: `
          
    
	          
	          {{ message }}