vue 2

vue快速上手

创建vue实例

 

插值表达式

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

  
  
  
  

Vue核心特征：响应式

Vue指令

v-html 

v-show  vs  v-if

v-else and v-else-if  attach v-if

v-on

v-on调用传参

v-bind

v-for

 案例

v-for 中的 key

v-model

综合案例 - 小黑记事本

  
  

    
    

      
小黑记事本
      
      添加任务
    
    
    

      

        

          

            {{ index + 1 }}. {{ item.name }}
            
          
        
      
    
    
    

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

  
  
  

第二天

指令补充  指令修饰符

 v-bind 对于样式控制的增强

案例：tab栏切换

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

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

  

    
小黑学习网

    姓名：
       
      



    是否单身：
       
      



    
    性别: 
      男
      女
      



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



    自我描述：
       

    立即注册
  
  
  

conmpute计算属性

计算属性 vs 方法

计算属性完整写法

综合案例-成绩案例

watch监视器

防抖，前后端交互

第三天

生命周期

工程化开发入门& 脚手架 Vue CLI

App.vue根组件

普通组件的注册使用

综合案例：小兔鲜首页

第四天

组件的样式冲突 scoped

data 是一个函数

组件通信 父子关系

什么是 prop

props 校验

小黑记事本组件版