js框架 vue

##js框架 vue

1. 职责划分-MVVM

Model 模型 - 数据
View 视图 - html 标签，样式
ViewModel 用来结合模型和视图 - 决定数据展示在哪个标签上

2. 入门例子

vue中的数据和页面上标签内容是'绑定'在一起的，模型数据发生了变动，页面视图也会相应变化。这种特性称之为响应式框架。

例如：

    
    
    



{{name}}

注意：

1. 绑定时，要把一个统一的父标签与Vue对象进行绑定
2. 不要把Vue对象和html或body标签绑定，建议和一个div标签绑定

3.计算属性

{{}} 中的表达式可以进行简单的运算，例如：

{{name.split("").reverse().join("")}}
{{age+1}}

为了不要直接在视图执行这些过于复杂的计算，可以把这些计算的逻辑通过计算属性来表示

例如：

    
{{nameReverse}}
    
{{age+1}}
    

        {{sex}}
    

4. v-for 指令

    
    
 {{p.name}} , {{p.price}}, {{p.img}}

5. v-if 指令

条件成立，在视图上就显示此标签，否则视图上不会有这个标签

    
    
 {{p.name}} , {{p.price}}, {{p.img}}

    

        

            
            

                
{{i+1}}
                
{{p.name}}
                
{{p.price}}
                
{{p.img}}
            
        
    
    暂无商品

v-show 指令 根据条件决定表示是否显示，
与v-if的区别在于，条件不成立时，标签根本不会出现
v-show是条件不成立时，隐藏了标签
v-show不能配合v-else 使用

6. v-bind 绑定属性

要实现标签属性的绑定，必须使用v-bind 指令

    

        
        

            
{{i+1}}
            
{{p.name}}
            
{{p.price}}
            
            

            

        
    

7. 事件处理

8. 双向绑定

v-bind:属性名 只能实现单向的绑定：模型的修改能够立刻反应到视图，但视图的修改不能影响模型

v-model:属性名 能够实现双向绑定：不仅有v-bind的功能，而且视图的修改也能影响模型了