vue学习笔记 - 模板语法、计算属性

vue学习笔记

官网：https://cn.vuejs.org/v2/guide/

1、vue体验

demo示例：

image.png

示例代码：

  
    
    
    
  
  
    

      
系统名称：{{title}}
      

        

          名称：{{item.name}}，库存：{{item.stock}}
          删除
        
      
    
    // 引入vue
    
    
  

vue实例中data介绍：https://cn.vuejs.org/v2/api/#data

模板语法

官网介绍：https://cn.vuejs.org/v2/guide/syntax.html
demo示例：

image.png

示例代码：

  
    
    
    
  
  
    

    
系统名称：{{title}}

    
    message: {{ msg }}
    

    once message: {{ msg }}
    
    

    
Using mustaches: {{ rawHtml }}
    Using v-html directive:
    


    
    
v-bind
    
    
缩写v-bind
    
    Button

    
    
if 现在你看到我了
    
else 现在你看到我了

    
    Add 1
    
    缩写 Add 1
    
The button above has been clicked {{ counter }} times.
    
    Greet

    
    

    
    
Message is: {{ message }}

    
    
firstName: {{ firstName }}
    
lastName: {{ lastName }}
    
计算属性 fullName: {{ fullName }}
    
方法 fullName: {{ getFullName() }}

    

    
    
  

tips 计算属性和方法的区别

• 计算属性可以赋值，方法不行
• 计算属性会进行缓存，如果依赖属性不变，会直接使用缓存结果，不会进行重新计算

特殊属性：key

官网链接：https://cn.vuejs.org/v2/guide/conditional.html#%E7%94%A8-key-%E7%AE%A1%E7%90%86%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84%E5%85%83%E7%B4%A0

示例代码：

  
    
    
    
  
  
    

      
登录
      

        手机号
        
      
      

        邮箱
        
      
      

        切换登录方式