##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的功能，而且视图的修改也能影响模型了