1、挂载点、模板、实例之间的关系

2、数据、事件和方法

  
    
    
    
    
    
  
  
    

        
hello {{msg}}

        

        

        
{{content}}

        
{{content}}

    
    
    
  

3、属性绑定、双向数据绑定和样式绑定

  
    
    
    
    
    
  
  
    

        
hello world

        
hello world

        
        
        

        
        
{{content}}
    
    
    
  

样式绑定：

4、计算属性和侦听器

（1）为何需要计算属性？

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁。

 （2）计算属性与方法的区别

计算属性是基于它们的依赖进行缓存的；方法不存在缓存。

（3）侦听器

数据一旦发生变化就通知侦听器所绑定方法。

（4）侦听器的应用场景

数据变化时执行异步或开销较大的操作。

  
    
    
    
    
    
  
  
    
        
        姓：
        名：
        
{{fullName}}
        
{{count}}
    
    
    
  

5、过滤器

 （1）过滤器的作用是什么？

 格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等。

（2）自定义过滤器

全局过滤器：

Vue.filter('过滤器名称',function (val) {
    //过滤器逻辑
})

局部过滤器：

filters:{
            capitalize:function () {   
            }
        }

（3）过滤器使用

{{msg|upper}}

例子：

    
    
    
    
    



    
    
{{msg|upper}}
    
测试数据
    
{{msg|lower}}




 

6、v-if，v-show与v-for指令

  
    
    
    
    
    
  
  
    

        
hello world

        
hello world

        toggle
        

            
{{item,index}}
            
        
    
    
    
  

 7、案例：to-do-list开发

输入的内容可以在下面实时显示：

  
    
    
    
    
    
  
  
    

        

            
            提交
        
        

            
{{item}}