Vue(day1)

开始从下面的几个Vue的使用场景中熟悉Vue：

• 声明式渲染

    
    
    
        {{ message }}    

看起来就像是简单的模板渲染，但其实Vue已经做了大量工作，这个时候的数据和DOM已经是“响应式”

的了。可以打开浏览器控制台修改app实例，如app.message = 'Hello World!'，然后你可以发现html页面也会随之变化。

• 条件与循环

  使用Vue的指令v-if来决定是否创建该元素。

    现在你能看到我
  

  var app = new Vue({  el: '#app',  data: {      seen: true
    }
  });

  使用v-for指令来实现循环：

    
  
        
            {{ list.text }}      
    

  var app = new Vue({  el: '#app',  data: {      lists:[
            {text: '学习js'},
            {text: '学习vue'},
            {text: '学习...'}
        ]
    }
  });

• 处理用户输入

  使用v-on指令为元素绑定指定事件：

    
   {{message}} 
    翻转字符串

  var app = new Vue({  el: '#app',  data: {      message: '双向绑定'
    },  methods: {      reverseMessage: function(){          this.message = this.message.split('').reverse().join('');
        }
    }
  });

  使用v-model表单输入和应用状态之间的双向绑定：

    
   {{message}} 
    

  var app = new Vue({  el: '#app',  data: {      message: '双向绑定'
    }
  });

• 组件化应用的构建

  具体请参考：组件化应用的构建

Vue.js提供了一些指令来方便我们操作页面，而不用我们再去操作Dom，具体详情可移步官网：指令

更新元素的textContent。如果要更新部分的textContent，需要使用 {{ Mustache }} 插值。

更新元素的innerHtml。注意内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。

根据表达式的真假切换元素的display:none。

根据表达式的真假决定是否创建（渲染）元素。

注意：当和 v-for 一起使用时，v-for 的优先级比 v-if 更高。

结合v-if使用。

使用特定语法alias in expression，多次渲染元素或模块。

可使用的表达式：Array | Object | number | string

• 限制

  • 表单控件：input | texteara | selecte

  • 组件

• 修饰符

  • .lazy：取代input监听change事件。

  • .number：将输入的字符串转化为数字。

  • .trim：将输入的字符串过滤掉首位空格。

• 作用
  在表单控件或组件上创建双向绑定。

无表达式，v-cloak指令保持到元素结束编译，与css规则如：[cloak]:{display: none;}一起使用，使元素在编译完成前保持“影藏”状态。这样做的目的是，元素编译结束后再显示出来，可以解决页面编译渲染时出现的闪烁情况。

无表达式，使用v-pre可跳过元素及其子元素的编译过程，加快渲染速度。

无表达式，使用v-once指令后元素只会编译渲染一次。这样可以在某些场景下提升性能。

• 作用

  为元素动态地绑定一个或多个特性（attributes + properties）；或绑定一个组件的prop到表达式中。

• 缩写：:

• 修饰符

  • .prop：被用来绑定DOM的property。（与attribute是有区别的）

  • .camel：(2.1.0+) 将 kebab-case 特性名转换为 camelCase。

  • .sync： (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

• 特殊

  在绑定class或style属性时支持数组或对象等特殊类型。

• 作用

  为元素绑定事件监听。

• 缩写：@

• 期望

  Function | Inline Statement | Object

• 修饰符

  • .stop - 调用 event.stopPropagation()。

  • .prevent - 调用 event.preventDefault()。

  • .capture - 添加事件侦听器时使用 capture 模式。

  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

  • .native - 监听组件根元素的原生事件。

  • .once - 只触发一次回调。

  • .left - (2.2.0) 只当点击鼠标左键时触发。

  • .right - (2.2.0) 只当点击鼠标右键时触发。

  • .middle - (2.2.0) 只当点击鼠标中键时触发。

  • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

我们可以通过一些实际的例子来熟悉一下Vue指令的相关用法。

• 需求：让文字滚动起来。

• 分析：要让文字达到滚动效果，就是随时间变化将字符串的末尾字符移动到头部，或是反过来。总结起来就是每隔一段时间操作一次字符串。另外需要一个按钮来控制文字的滚动效果。

• 实现：

    
  {{ message }} 
     {{ btn }} 

  var app = new Vue({  el: '#app',  data: {      message: '0123456789',      btn: '开始',      status: true,      intervalId: undefined
    },  methods: {      changeMessage: function(){          var THIS = this;
            THIS.status = !THIS.status;          if(!THIS.intervalId){
                THIS.intervalId = window.setInterval(function(){
                    THIS.message = THIS.message.toString();//防止纯数字报错
                    var len = THIS.message.length;
                    THIS.message =  THIS.message.charAt(len-1) + THIS.message.slice(0, len - 1);
                }, 1000);
            }          if(THIS.status){
                THIS.intervalId = clearInterval(THIS.intervalId);
                THIS.btn = '开始';
            }else{
                THIS.btn = '暂停';
            }
        }
    }
  })

• 利用表单双向绑定实现简单的计算器

    
    
        +
        -
        *
        /
    
    
    
    

  var app = new Vue({  el: '#app',  data: {      x: 0,      y: 0,      value: 0,      smybol: "+"
    },  methods: {      calculate: function(){          var THIS = this;          var x = window.parseFloat(THIS.x);          var y = window.parseFloat(THIS.y);          var S = x + THIS.smybol + y;
            THIS.value = window.parseFloat(eval(S));
        }
    }
  })

• 使用v-bind动态修改元素class或style

  • class

    
        
        
        
            .red{            color: #abc;
            }        .italic{            font-style: italic;
            }        .larg{            font-size: 30px;
            }    
        
            
    规则，就是用来打破的
            
            规则，就是用来打破的
    
            
            规则，就是用来打破的
    
            
            规则，就是用来打破的
    
            
            规则，就是用来打破的
    
            
            规则，就是用来打破的
    
            
            规则，就是用来打破的
    
        

  • style

    
        
        
        
        
            
            Jinx的含义就是Jinx.
            
            Jinx的含义就是Jinx.
            
            Jinx的含义就是Jinx.
            
            Jinx的含义就是Jinx.
        
    
        

作者：风之之

原文出处：https://www.cnblogs.com/fzz9/p/10256913.html