vue-生命周期+工程化开发(三)

生命周期

Vue 生命周期 和 生命周期的四个阶段

思考：

• 什么时候可以发送初始化渲染请求？（越早越好）
• 什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期：一个Vue实例从 创建 到 销毁 的整个过程。

生命周期四个阶段：① 创建 （初始化动态数据）② 挂载 （渲染模板）③ 更新 ④ 销毁

Vue 生命周期函数（钩子函数） 

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码。

 

 

  
  
  
  



  

    
{{ title }}
    

      -
      {{ count }}
      +
    
  
  
  

 小黑记账清单

功能需求：

1. 基本渲染

2. 添加功能

3. 删除功能

4. 饼图渲染

  
    
    
    
    
    
    
  
  
    

      

        
        


          
          

            
            
            添加账单
          

          

            

              

                
编号
                
消费名称
                
消费价格
                
操作
              
            
            

              

                
{{index+1}}
                
{{item.name}}
                
{{item.price}}
                
删除
              
              
            
            

              

                
消费总计： {{totalPrice.toFixed(2)}}
              
            
          
        
        
        
        

      
    
    
    
    
    
  

案例总结：

 

工程化开发入门

开发 Vue 的两种方式：

1. 核心包传统开发模式：基于 html / css / js 文件，直接引入核心包，开发 Vue。

2. 工程化开发模式：基于构建工具（例如：webpack ) 的环境中开发 Vue。

工程化开发 & 脚手架 Vue CLI 

基本介绍：

Vue CLI 是 Vue 官方提供的一个全局命令工具。

可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】

好处：

1. 开箱即用，零配置
2. 内置 babel 等工具
3. 标准化

使用步骤：

1. 全局安装 (一次) ：yarn global add @vue/cli 或 npm i @vue/cli -g
2. 查看 Vue 版本：vue --version
3. 创建项目架子：vue create project-name（项目名-不能用中文）
4. 启动项目： yarn serve 或 npm run serve（找package.json）

脚手架目录文件介绍 & 项目运行流程

 

 

组件化开发 & 根组件 

① 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。 好处：便于维护，利于复用 → 提升开发效率。

组件分类：普通组件、根组件。

② 根组件：整个应用最上层的组件，包裹所有普通小组件。

 

App.vue 文件（单文件组件）的三个组成部分 

 普通组件的注册使用

组件注册的两种方式：
1. 局部注册：只能在注册的组件内使用
    ① 创建 .vue 文件 (三个组成部分)
    ② 在使用的组件内导入并注册
2. 全局注册：所有组件内都能使用

局部注册

 全局注册

小结：

(1) 组件化：
页面可拆分成一个个组件，每个组件有着独立的结构、样式、行为
     ① 好处：便于维护，利于复用 → 提升开发效率。
     ② 组件分类：普通组件、根组件。
(2) 根组件：
整个应用最上层的组件，包裹所有普通小组件。
一个根组件App.vue，包含的三个部分：
        ① template 结构 (只能有一个根节点)
        ② style 样式 (可以支持less，需要装包 less 和 less-loader )
        ③ script 行为 

 两种注册方式：
         ① 局部注册：
                (1) 创建.vue组件 (单文件组件)
                (2) 使用的组件内导入，并局部注册 components: { 组件名：组件对象 }
        ② 全局注册：
                (1) 创建.vue组件 (单文件组件)
                (2) main.js内导入，并全局注册 Vue.component(组件名, 组件对象)
 使用：
<组件名>
技巧：
一般都用局部注册，如果发现确实是通用组件，再抽离到全局。

综合案例：小兔鲜首页

 

页面开发思路：

1. 分析页面，按模块拆分组件，搭架子 (局部或全局注册)

2. 根据设计图，编写组件 html 结构 css 样式 (已准备好)

3. 拆分封装通用小组件 (局部或全局注册)

将来 → 通过 js 动态渲染，实现功能