提交md

vue搭建.md

@@ -0,0 +1,478 @@
+# vue知识分享
+
+## 创建一个包含babel和eslint工程化项目
+
+### 环境准备
+1. 安装node(自带npm,node版本14以上)
+2. 在任意文件夹中打开终端(便捷打开终端方式：在文件夹地址中输入cmd+ener键即可)
+3. 安装脚手架(vue-cli 5.0.8版本为例)   
+    1. npm i -g @vue/cli 5.0.8 (-g 全局安装)
+    2. vue -V (查看脚手架版本，检测是否安装成功)
+
+### 操作步骤
+1. 利用脚手架搭建项目:目前提供了两种方式,
+        <details>
+        <summary>1. vue ui (界面化选配搭建)</summary>
+        1. 进入要搭建项目的目录打开终端输入：vue ui 将自动打开一个创建页面  
+        2.![ui创建过程](./img/ui-1.png)
+        ![ui创建过程](./img/ui-2.png)
+        ![ui创建过程](./img/ui-3.png)
+        </details>
+        <details>
+        <summary>2. 使用vue create <projectName> 命令方式搭建</summary>
+        1. 进入要搭建项目的目录打开终端输入：vue create  vue-cli-project  
+        2. 选中默认模板 Default([Vue 2] babel, eslint)
+        </details>
+
+
+### 项目目录结构
+```bash
+|-- HELLO_WORLD                          项目名称
+    |-- node_modules                     依赖文件
+    |-- public                           静态资源
+    |   |-- favicon.ico                  页面tab图标
+    |   |-- index.html                   挂载的页面
+|-- src                              主要开发的源码
+        |-- App.vue                      根组件   
+        |-- main.js                      整个项目的入口,引入依赖包、默认页面样式等
+        |-- assets                       资源文件
+        |   |-- logo.png
+        |-- components                   公共组件
+            |-- HelloWorld.vue
+    |-- .browserslistrc                  浏览器约定(可写到package.json中去)
+    |-- .eslintrc.js                     eslint配置(可写到package.json中去)
+    |-- .gitignore                       提交忽略文件配置
+    |-- babel.config.js                  babel配置文件(使es6+向后兼容适配浏览器的js环境)      
+    |-- jsconfig.json                    文件提示配置
+    |-- package-lock.json                版本锁定文件
+    |-- package.json                     版本信息
+    |-- README.md           
+    |-- vue.config.js                    webpack相关配置(vue.config.js: https://cli.vuejs.org/zh/config/#vue-config-js)
+```
+
+## 二:初步应用vue  
+
+### vue生命周期 
+> **vue生命周期是什么?**
+>  
+    vue生命周期是指vue对象从创建到销毁的过程。也就是vue对象从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载这一系列过程。其作用是在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。  
+
+<!-- <details>
+
+<summary>生命周期图</summary>
+
+    ![生命周期图](./img/life.png)
+
+</details> -->
+
+
+> **生命周期钩子有那些?**  
+>       
+    1. beforeCreate（创建前）  
+    2. created （创建后,该时间能拿到data中数据了）  
+    3. beforeMount (载入前)  
+    4. mounted （载入后,该时间能拿到dom元素）  
+    5. beforeUpdate （更新前）  
+    6. updated   （更新后）  
+    7. beforeDestroy（ 销毁前）  
+    8. destroyed （销毁后）  
+
+生命周期钩子使用  
+
+应用场景:初次加载组件触发了beforeCreate、created、beforeMount、mounted四个钩子函数,我们可以在created函数中操作数据，在mounted中操作dom元素。  
+1. 在App.vue中添加beforeCreate、created、beforeMount、mounted四个钩子函数。
+2. 启动项目，打开网页F12查看console控制台信息。  
+    <details>
+    <summary>应用代码</summary>  
+
+     ```bash  
+        <template>
+        <div id="app">
+                <img id='img-test' alt="Vue logo" src="./assets/logo.png">
+        </div>
+        </template>
+
+        <script>
+        export default {
+            name: 'App',
+            beforeCreate(){
+                console.log('这是初始化空的vue')
+                console.log(this.title)
+                console.log(document.querySelector('#img-test'))
+            },
+            Created(){
+                console.loh('初始化data,method等方法')
+                console.log(this.title)
+                console.log(document.querySelector('#img-test'))
+            },
+            beforeMount(){
+                console.log('页面模板数据已经组装完成，尚未挂载到元素上')
+                console.log(this.title)
+                console.log(document.querySelector('#img-test'))
+            }
+            mounted(){
+                console.log('页面模板已经挂载完成，可以使用dom元素了')
+                console.log(this.title)
+                console.log(document.querySelector('#img-test'))
+            },
+            data(){
+                return{
+                    test:'1111'
+                }
+            },
+            method:{
+            }
+        }
+     ```
+    </details>  
+
+
+### vue组件
+
+1. vue中什么是组件？  
+    在vue中，组件是可复用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。组件可大大提高了代码的复用率。 
+
+2. 新建一个组件，并且引用  
+    <details>
+    <summary>应用代码</summary>
+
+    ```bash
+    #在src/components文件夹下新加一个GetValue.vue文件内容如下
+        <template>
+        <div>{{title}}</div>
+        </template>
+
+        <script>
+
+        export default {
+            name:'GetValue',
+            data(){
+                return{
+                    title:'这是GetValue组件'
+                }
+            }
+        }
+        </script>
+    #在src/App.vue中引用GetValue.vue。App.vue中引用代码
+        <template>
+        <div>
+            <GetValue></GetValue>
+        </div>
+        </template>
+
+        <script>
+        import GetValue from './components/GetValue'
+        export default {
+            name:'App',
+            components:{
+                GetValue
+            }
+            data(){
+                return{
+                }
+            }
+        }
+        </script>
+
+    ```
+    </details>
+
+### vue中属性绑定、事件绑定及v-model
+- 属性绑定(v-bind: 简写：):主要是将data中的数据绑定到对应标签上，实现data中数据->标签数据上的传递。
+
+    <details>
+
+    <summary>具体案例代码</summary>
+
+    ```bash  
+    #在src/components中新建DataTest.vue内容如下,在App.vue中引入。项目启动后input中数据初始为'这是data中定义的数据'
+    <template>
+    <div>
+        <input v-bind:value="input" />
+    </div>
+    </template>
+
+    <script>
+    export default {
+        data(){
+            return {
+                input:'这是data中定义的数据'
+            }
+        }
+    }
+    </script>
+    ```
+    </details>
+
+- 事件绑定(v-on: 简写@):主要是将methods中的函数绑定到对应标签上，可实现标签中数据->data数据上的传递。
+    <details>
+
+    <summary>具体案例代码</summary>
+
+    ```bash  
+    #在src/components/DataTest.vue继续添加代码如下，项目启动后打开页面,在input中输入的数据会传递到data中input中，然后在h1体现
+    <template>
+    <div>
+        <h1>显示的是data中input的数据:{{input}}</h1>
+        <input v-bind:value="input" v-on:input='change' />
+    </div>
+    </template>
+
+    <script>
+    export default {
+        data(){
+            return {
+                input:'这是data中定义的数据'
+            }
+        },
+        methods:{
+            change(e){
+                e.target.value
+            }
+        }
+    }
+    </script>
+    ```
+    </details>
+
+- v-model是属性绑定和函数绑定的语法糖
+    ```bash
+        #下面两行代码在input标签下是等价的
+        <input v-bind:value="input" v-on:input='change' />
+        <input v-model="input"  />
+    ```
+
+
+### 取值方式
+1. 原生方式取值方式主要是通过document上的方法进行取值的。例如
+
+    ```bash
+        document.querySelector()
+        document.getElementById()
+        document.getElementsByClassName()
+    ```
+
+2. vue中取值方式
+
+    vue中普遍的取值两种方式:
+    - 通过$refs和ref，注册引用信息（主要用来获取子组件信息）
+    - data中定义,绑定标签,组件实列中通过this.xx引用
+
+        <details>
+        <summary>两种方式取值的具体案例代码</summary>
+
+        ```bash  
+        #通过getVaule触发在F12 console控制台能发现输出的值是一样的
+            <template>
+            <div>
+                <h1>{{title}}</h1>
+                <input ref="input" v-model="input" type="text">
+                <button @click="getVaule">获取值</button>
+            </div>
+            </template>
+
+            <script>
+
+            export default {
+                name:'GetValue',
+                data(){
+                    return{
+                        title:'这是GetValue组件',
+                        input:'绑定的值'
+                    }
+                },
+                methods:{
+                    getVaule(){
+                        console.log('这是ref获取的值：'+this.$refs.input.value)
+                        console.log('通过this去定义好的值：'+this.input)
+                    }
+                }
+            }
+            </script>
+        ```
+        </details>
+
+
+### 父子组件中的传值
+
+应用场景：子组件需要父组件传递数据进行数据的展示,而子组件功能又要对接受的数据进行处理更新，这个时候就需要父子组件传值。
+
+1. 父传子数据  
+    <details>
+    <summary>父传子数据代码</summary>
+
+    ```bash  
+    #在src/components新建Parent.vue,child.vue两个父子组件
+    #Parent.vue  
+    <template>
+        <div style="background:gold;margin: 20px;">
+                #1.挂载title
+            <Child :title="title"></Child>
+        </div>
+    </template>
+
+    <script>
+    import Child from './Child.vue';
+    export default {
+        name:'Parent',
+        components:{
+            Child
+        },
+        data(){
+            return{
+                title:'这是父组件传递过去的'
+            }
+        },
+        methods:{
+        }
+
+    }
+    </script>
+
+    #child.vue  
+    <template>
+                                #3.使用传递的数据
+        <h2 style="cursor:pointer">{{title}}</h2>
+    </template>
+
+    <script>
+    export default {
+        name:'child',
+        #2.接受挂载的数据
+        props:{ 
+            title:{
+                type:String,
+            }
+        },
+        data(){
+            return{}
+        },
+    }
+    </script>
+
+    ```
+    </details>
+
+2. 子传父数据 
+
+    <details>
+    <summary>子传父数据代码</summary>
+
+    ```bash  
+    #在src/components新建Parent.vue,child.vue两个父子组件
+    #Parent.vue  
+    <template>
+        <div style="background:gold;margin: 20px;">
+                #2.挂载函数
+            <Child @updateTiTle="updateTiTle"></Child>
+        </div>
+    </template>
+
+    <script>
+    import Child from './Child.vue';
+    export default {
+        name:'Parent',
+        components:{
+            Child
+        },
+        data(){
+            return{
+                title:'这是父组件传递过去的'
+            }
+        },
+        methods:{
+            #1.定义一个需要传递的函数，用于回调
+            updateTiTle(title){
+                this.title = title
+            }
+        }
+
+    }
+    </script>
+    #child.vue  
+    <template>
+        <h2 @click="hanldTitle" style="cursor:pointer">点击子组件修改数据：{{title}}</h2>
+    </template>
+
+    <script>
+    export default {
+    name:'child',
+    data(){
+        return{}
+    },
+    methods:{
+        hanldTitle(){
+            #3.子组件中通过this.$emit 回调Parent.vue中的函数
+            this.$emit('updateTiTle','这是子组件修改的数据')
+        }
+    }
+    }
+    </script>
+
+    ```
+    </details>
+2. 父子传值整合
+
+    <details>
+    <summary>父子传值整合代码</summary>
+
+    ```bash  
+    #在src/components新建Parent.vue,child.vue两个父子组件
+    #Parent.vue  
+    <template>
+        <div style="background:gold;margin: 20px;">
+            <div style="cursor:pointer" @click="title='这是父组件传递过去的'">点击重置父组件title:{{title}}</div>
+            #1. 绑定title,updateTiTle
+            <Child :title="title" @updateTiTle="updateTiTle"></Child>
+        </div>
+    </template>
+
+    <script>
+    import Child from './Child.vue';
+    export default {
+        name:'Parent',
+        components:{
+            Child
+        },
+        data(){
+            return{
+                title:'这是父组件传递过去的'
+            }
+        },
+        methods:{
+            #5.修改数据
+            updateTiTle(title){
+                this.title = title
+            }
+        }
+
+    }
+    </script>
+    #child.vue  
+    <template>
+                                                                #3.使用title
+        <h2 @click="hanldTitle" style="cursor:pointer">点击子组件修改数据：{{title}}</h2>
+    </template>
+
+    <script>
+    export default {
+        name:'child',
+        #2.接受title
+        props:{
+            title:{
+                type:String,
+            }
+        },
+        data(){
+            return{}
+        },
+        methods:{
+            #4.触发回调
+            hanldTitle(){
+                this.$emit('updateTiTle','这是子组件修改的数据')
+            }
+        }
+    }
+    </script>
+    ```
+    </details>