VUE笔记

目录

第一天

1.vue实例

2.插值表达式

3.VUE响应式特性

4.安装VUE开发者工具

5.VUE指令

5.1v-html

5.2 v-show 和 v-if

5.3 v-else 和 v-else-if

5.4 v-on（@事件名）

 5.5 v-bind （：属性名=“表达式”）

 5.6图片切换案例

5.7 v-for

5.8 渲染图书列表并删除指定图书

5.9v-for中的key

 5.10 v-model

 6.案例-小黑记事本

6.1渲染和删除

6.2添加

6.3底部统计和清空

二、第二天

1.指令修饰符

 点击回车添加记事本项目

 2.v-bind 对于样式控制的增强-操作class

 案例：京东tab导航高亮

  3.v-bind 对于样式控制的增强-操作style

4.v-model应用于其他表单元素

 5.计算属性

 5.1 computed计算机属性 VS 方法methods

 5.2 计算属性完整写法​编辑

6.综合案例-成绩（渲染、删除、添加、统计）

7.watch侦听器（监视器）

7.1 watch侦听器完整写法（防抖）

7.2 综合案例-水果购物车

第一步：v-if 和 v-else

 第二步：循环fruit list 和 ：key

第三步：用v-model 绑定复选框​编辑

第四步：绑定照片、单价、个数、小计

​编辑 第四步：修改高亮部分

第五步：删除

 第六步：添加个数和减少个数按钮

 第七步：全选反选(计算属性）

第八步：统计选中的总价和总数量

 第九步：持久化到本地

 8.生命周期

 8.1生命周期两个例子-初始化渲染和获取焦点

created应用

（1）向接口发送请求

（2）将数据更新给data中的list

​编辑 （3）渲染列表

mounted应用

8.2小黑记账清单

---

第一天

1.vue实例

2.插值表达式

  


  
{{ nickname }}
  
{{ nickname.toUpperCase() }}
  
{{ nickname + '你好' }}
  
{{ age >= 18 ? '成年' : '未成年' }}
  
{{ friend.name }}
  
{{ friend.desc }}

  
  
  
  

3.VUE响应式特性

4.安装VUE开发者工具

5.VUE指令

5.1v-html

5.2 v-show 和 v-if

  
  



  

  

    
我是v-show控制的盒子
    
我是v-if控制的盒子
  
  
  
  

5.3 v-else 和 v-else-if

  
  

    
性别：♂ 男
    
性别：♀ 女
    

    
成绩评定A：奖励电脑一台
    
成绩评定B：奖励周末郊游
    
成绩评定C：奖励零食礼包
    
成绩评定D：惩罚一周不能玩手机
  
  
  
  

5.4 v-on（@事件名）

  

    -
    {{ count }}
    +
  
  
  

  

    切换显示隐藏
    
黑马程序员
  
  
  

  



  

    

      
小黑自动售货机
      可乐5元
      咖啡10元
      牛奶8元
    
    
银行卡余额：{{ money }}元
  

  
  

 5.5 v-bind （：属性名=“表达式”）

 5.6图片切换案例

  

    上一页
    

      
    
    下一页
  
  
  

5.7 v-for

  

    
小黑水果店
    

      

        {{ item }} - {{ index }}
      
    

    

      

        {{ item }}
      
    
  

  
  

5.8 渲染图书列表并删除指定图书

  

    
小黑的书架
    

      

        {{ item.name }}
        {{ item.author }}
        
        删除
      
    
  
  
  

5.9v-for中的key

加key

不加key

 

 5.10 v-model

  

    
    账户： 


    密码： 


    登录
    重置
  
  
  

 6.案例-小黑记事本

6.1渲染和删除

  
  
  
  
  




  
  

    
    

      
小黑记事本
      
      添加任务
    
    
    

      

        

          

            {{item.id +1 }} {{item.name}}
            
          
        
      
    
    
    

      
      合 计: 1 
      
      
        清空任务
      
    
  

  
  
  

6.2添加

  
  

    
    

      
小黑记事本
      
      
      添加任务
    
    
    

      

        

          

            {{item.id +1 }} {{item.name}}
            
          
        
      
    
    
    

      
      合 计: 1 
      
      
        清空任务
      
    
  

  
  
  

6.3底部统计和清空

  
  

      
      

          
小黑记事本
          
          
          添加任务
      
      
      

          

              

                  

                      {{ item.id + 1 }} {{ item.name }}
                      
                  
              
          
      
      
      

          
          合 计: {{ list.length }}
          
          
              清空任务
          
      
  

  
  
  

二、第二天

1.指令修饰符

 点击回车添加记事本项目

 2.v-bind 对于样式控制的增强-操作class

 

  




  

    
黑马程序员
    
黑马程序员
  
  
  

 案例：京东tab导航高亮

  
    
  



  

    

      

        京东秒杀
      
    
  
  
  
  
  
  

  3.v-bind 对于样式控制的增强-操作style

  
  
  
  
  


  

    
    

      
      

        {{ percent }}%
      
    
    设置25%
    设置50%
    设置75%
    设置100%
  
  
  

4.v-model应用于其他表单元素

  
  
  
  
  



  

    
小黑学习网

    姓名：
       
      



    是否单身：
       
      



    
    性别: 
      男
      女
      



    
    所在城市:
      
        北京
        上海
        成都
        南京
      
      



    自我描述：
       

    立即注册
  
  
  

 5.计算属性

  



  

    
小黑的礼物清单
    

      

        
名字
        
数量
      
      

        
{{ item.name }}
        
{{ item.num }}个
      
    

    
    
礼物总数：{{ totalCount }} 个
  
  
  

 5.1 computed计算机属性 VS 方法methods

  
  
  
  
  



  

    
小黑的礼物清单{{ totalCountFn() }}
    
小黑的礼物清单{{ totalCountFn() }}
    
小黑的礼物清单{{ totalCountFn() }}
    
小黑的礼物清单{{ totalCountFn() }}
    

      

        
名字
        
数量
      
      

        
{{ item.name }}
        
{{ item.num }}个
      
    

    
礼物总数：{{ totalCountFn() }} 个
  
  
  

 5.2 计算属性完整写法

  
  
  
  
  



  

    姓： +
    名： =
    {{ fullName }}


    
    改名卡
  
  
  

6.综合案例-成绩（渲染、删除、添加、统计）

  
  
  
  
  




  

    

      

        

          

            
编号
            
科目
            
成绩
            
操作
          
        
        

          

            
{{index + 1}}
            
{{item.subject}}
            
            
{{item.score}}
            
            
删除
          
        
        

          

            

              暂无数据
            
          
        

        

          

            

              总分：{{sum}}
              平均分：{{averageScore}}
            
          
        
      
    
    

      

        
科目：
        

          
        
      
      

        
分数：
        

          
        
      
      

        

        

          添加
        
      
    
  
  

  

7.watch侦听器（监视器）

  
    
    
    
    
    
  
  
    

      
      

        翻译成的语言：
        
          意大利
          英语
          德语
        
      

      
      

        

          
          ⌨️文档翻译
        
        

          
{{ result }}
        
      
    
    
    
    
  

7.1 watch侦听器完整写法（防抖）

  
    
    
    
    
    
  
  
    

      
      

        翻译成的语言：
        
          意大利
          英语
          德语
        
      

      
      

        

          
          ⌨️文档翻译
        
        

          
{{ result }}
        
      
    
    
    
    
  

7.2 综合案例-水果购物车

第一步：v-if 和 v-else

 第二步：循环fruit list 和 ：key

第三步：用v-model 绑定复选框

第四步：绑定照片、单价、个数、小计

 第四步：修改高亮部分

第五步：删除

 methods中写删除函数

 第六步：添加个数和减少个数按钮

根据id找到数组中的对应项>>find 

操作num数量

 当个数小于1时，禁用减少按钮

 第七步：全选反选(计算属性）

当前v-model=“true“时，复选框被选中

 

 

第八步：统计选中的总价和总数量

 第九步：持久化到本地

 

 8.生命周期

 8.1生命周期两个例子-初始化渲染和获取焦点

created应用

（1）向接口发送请求

（2）将数据更新给data中的list

 （3）渲染列表

  
  
  
  
  



  

    

      

        

          
{{ item.title }}
          

            {{ item.source }}
            {{ item.time }}
          
        
        

          
        
      
    
  
  
  
  

mounted应用

  
  
  
  
  
  
  
  




  

    
    

      
      搜索一下
    
  

8.2小黑记账清单

  
    
    
    
    
    
    
  
  
    

      

        
        


          
          

            
            
            添加账单
          

          

            

              

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

              

                
{{ index + 1 }}
                
{{ item.name }}
                
{{ item.price.toFixed(2) }}
                
删除
              
            
            

              

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