倩mys
倩mys

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

文章目录

  • 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 }}