Vue基础知识

1) 前端技术发展历程#

• 纯原生 JavaScript (原生js)
• jQuery（仅仅是提高了 DOM 操作的效率）
• 框架时代
• 框架发展: 纯原生js -> prototype.js -> jQuery.js -> backbone.js+knockout.js -> angular.js -> vue.js+react.js

(2) Vue介绍#

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 ​

• 一款非常优秀的前端渐进式 JavaScript 框架
  • Vue 本身只是一个用于数据驱动视图更新的库
  • 随着生态的慢慢发展，如今已经有了 Vue Router、Vuex、Vue CLI、Vue Server Renderer 等功能库，所以当 Vue 和这些核心功能库结合到一起的时候，我们称之为一个框架
  • 这些技术一般也称之为 Vue 全家桶，所以学习 Vue 实际上就是要学习 Vue 全家桶才能发挥出 Vue 的威力
• 由尤雨溪开发并于 2014 年 2 月开源于 Github(14w+ ⭐️)
• 可以轻松构建 SPA(单页应用) 应用程序
• 通过 指令 扩展了 HTML，通过 表达式 绑定数据到 HTML,通过组件化开发极大的提高了开发的效率和可维护性
• 最大程度上解放了 DOM 操作

(3) Vue核心思想#

vue是一个mvvm框架

Vue 是为了克服 HTML 在构建应用上的不足而设计的。Vue 有着诸多特性，最为核心的是：

• 数据驱动
  • DOM 是数据的一种自然映射
  • 数据改变自动驱动视图更新
• 组件化

(4) 相关资料#

1. Vue.js 官网
2. 介绍 | Vue CLI vue脚手架

(一) hello world#

1. el 实例挂载元素节点
2. data 可以在模板上展示的数据
3. 插值表达式, 用来展示data里的数据
4. v-text和v-html指令可以展示文本和标签

(二) 双向数据绑定#

使用v-model指令对数据进行双向数据绑定 指令: 我们给计算机的命令

1. 修改了data里的username的值, 页面的username会跟着变化
2. 在页面上修改username的值, data里的username也会跟着变化

(三) 修改css#

绑定css: 通过修改变量来决定添加或者删除css

• v-bind:calss
• 简写 :class

    
    
    
    
    
    

  
    
   
        
所谓天才,其实是99%的汗水+1%的运气
    
 

     




// 使用三目运算符绑定class



    
    
    
    
    
    

  
    
   
        
{{username}}
    
 

     

(四) 修改样式#

修改样式 v-bind:style, 缩写为:

    
    
    
    
     

  
    
   
        
        
必你聪明的人比你还努力, 你怎么办
    
 

     

(五) 绑定事件#

1. 绑定事件(不传参)
   • v-on:事件类型
   • 简写: @事件类型

 
    
    

  
    
  
        点我 
        点我
    
 

     

1. 绑定事件(传参)

 
     

  
    
  
        
请选择省份
        广东
        湖南
        江西
        北京
    
 

     

1. 绑定事件之表达式

 
     

  
    
  
       
隐藏
 
       

           
ppppppppppppppppppppppppp
           
ppppppppppppppppppppppppp
           
ppppppppppppppppppppppppp
           
ppppppppppppppppppppppppp
           
ppppppppppppppppppppppppp
       
    
 

     



// 简化以上例子


 
     

  
    
    
  
       
隐藏

       

           
ppppppppppppppppppppppppp
           
ppppppppppppppppppppppppp
           
ppppppppppppppppppppppppp
           
ppppppppppppppppppppppppp
           
ppppppppppppppppppppppppp
       
    
 

     

1. 绑定事件(事件修饰符)
   1. 阻止事件冒泡event.stopPropagation() vue使用.stop
   2. 阻止默认事件event.preventDefault() vue使用.prevent

 
     
    

   
    
  
        
 
            button
        
 
    
 

     

(六) 生命周期(背诵)#

1. 创建实例
   • beforeCreate() 实例创建之前调用
   • created() 实例创建之后调用
2. 挂载节点
   • beforeMount() 节点挂载之前调用
   • mounted() 节点挂载之后调用
3. 更新状态
   • beforeUpdate() 状态更新之前调用
   • updeted() 状态更新之后调用
4. 实例销毁
   • beforeDestroy() 实例销毁之前
   • destroyed() 实例销毁之后

实例从创建到挂载分析

1. 创建实例
2. 处理data里的数据, 让数据具备"响应式"的特性
3. 解析模板, 用来data里的变量替代模板里的指定符号
4. 把解析后的模板挂载到指定节点

    



    
    

        
{{msg}}
    
    

(七) 条件渲染#

使用v-if和v-show执行实现条件渲染

v-if和v-show的区别**(背诵)**

1. 使用v-if, 取值为false时, 元素会被删除
2. 使用v-show, 取值为false时, 元素不会被删除, 只是被隐藏

    
    
    
    
     

  
    
  
       
ppppppppppppppppp
       
qqqqqqqqqqqqqqqqq
    
 

     




// v-if和v-show的区别


 
     

  
    
  
       
ppppppppppppppppp
       
ppppppppppppppppp
 
    
  
     

(八) 渲染列表#

1. v-for指令渲染列表
2. :key="index" 添加key可以优化渲染效率(速度)

 
     
    

  
    
  
       

           

            1. 姓名:张某某 年龄:18
           
 
           

            2. 姓名:张某某 年龄:18
           
  	       

            3. 姓名:张某某 年龄:18
           
       
    
  
     

(九) couputed 计算属性#

根据已知的属性 (1个或多个) 得到一个新的属性

 

    
 
 
    

        

            单价20  
            
        
        
合计:100元
    
    
    
 

(十) watch 监听器#

监听已知状态(属性), 状态发生改变, 根据需求做响应操作

总结：

1. 同一个功能 computed 和 watch 都能实现，能用 computed 的时候一般都用 computed，更简洁
2. computed擅长根据一个或多个属性得到一个新的属性, watch擅长监听某个属性, 然后去修改一个或者多个属性

 

    
 
 
    

        
单价20  
        
合计:100元