vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

#课程目标

1. 掌握安装 vue-cli 命令行工具的方法，掌握使用命令行在本地搭建开发环境，使用命令行在本地运行项目。
2. 精通项目结构，以及各文件和文件夹的作用。
3. 精通单文件组件的文件组织形式，模板、js、样式的书写位置。
4. 精通单文件组件的开发规则。
5. 精通 vue 组件生命周期的使用。
6. 了解 .vue 文件的加载原理。

#知识点

1. 安装命令行工具

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

 

2. 创建一个项目

    vue create my-project

 

3. 理解项目目录的结构的构成：

4. .vue组件结构, 理解 vue 组件化的封装思想。

    <template>
        <div class="hello">
        <!-- 组件模板 -->

        </div>
    </template>

    <script>
        // 组件 js
        export default {

        };
    </script>

    <style scoped>
    /* 组件 css */

    </style>

 

5. export default 导出对象中的选项的介绍：

    export default {
	data: function() {
		return { a: 1 };
	},
	props: {
		// 检测类型
		height: Number
	},
	computed: {
		// 计算属性
		aDouble: vm => vm.a * 2
	},
	methods: {
		plus: function() {
			this.a++;
		}
	},
	watch: { 
        // 属性监听
		a: function(val, oldVal) {
			console.log(val, oldVal);
		}
	},
    //生命周期钩子
    created() {
        // 实例创建完成
    },
    mounted() {
        // dom 挂载完成
    }
};

 

5. vue 的生命周期： 每个 vue 实例从创建到最终被销的整个生命周期中要经过一系列的过程，在每个过程中都有相应的钩子函数被调用，这些函数被称为 vue 的生命周期函数。整个生命周期如下图所示：

#生命周期钩子函数详解：

• beforeCreate： 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

• create：☆☆ 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见，也无法获取到页面中的 DOM 节点。

• beforeMount： 在挂载开始之前被调用：相关的 render 函数首次被调用。

• mounted ☆☆ el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

• beforeUpdate updated： 数据更新时调用，beforeUpdate在数据更新前调用 updated在数据更新后调用。

• beforeDestroy： 实例销毁之前调用。在这一步，实例仍然完全可用。如果组件中有定时器，要在这里清除掉。

• destroyed： vue 实例销毁后调用。调用后，vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

• activated deactivated： keep-alive 组件在激活或停用时调用。

6. .vue 文件被 webpack 的 vue-loader 编译过程：

• template 模板被编译成一个字符串，在执行 Vue.component() 时被当做template属性的值被传入。
• 模板字符串 转换成 element ASTs（解析器）
• 对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）
• 使用 element ASTs 生成 render 函数代码字符串（代码生成器）

#授课思路

#案例和作业

1. 实现 QQ 音乐推荐页面的布局和排版（使用 .vue 组件开发）

   

2. 实现 QQ 音乐排行榜页面的布局和排版 （使用 .vue 组件）