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
 
  1. 创建一个项目
    vue create my-project
 
  1. 理解项目目录的结构的构成:

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

  1. .vue组件结构, 理解 vue 组件化的封装思想。
    <template>
<div class="hello">
<!-- 组件模板 --> </div>
</template> <script>
// 组件 js
export default { };
</script> <style scoped>
/* 组件 css */ </style>
 
  1. 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 挂载完成
}
};
 
  1. vue 的生命周期: 每个 vue 实例从创建到最终被销的整个生命周期中要经过一系列的过程,在每个过程中都有相应的钩子函数被调用,这些函数被称为 vue 的生命周期函数。整个生命周期如下图所示:

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

#生命周期钩子函数详解:
  • 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 组件在激活或停用时调用。

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

#授课思路

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

#案例和作业

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

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

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

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

上一篇:解决“只能通过Chrome网上应用商店安装该程序”的方法


下一篇:Python 二分查找