Vue实例-1

对于vue如果只是学习知识点，完全掌握它是不太现实的，所以说写一些小实例很有必要，和大家分享一下。。。

1.事件处理 v-on及修饰符

这是一个点击按钮事件和一个鼠标移动事件的案例

<div id="app">
        <h1>Event</h1>
        <input v-on:click="add" type="button" value="加一岁" />
        <input v-on:click="subtract" type="button" value="减一岁" />
        <p>我今年{{age}}</p>
        <div id="canvas" v-on:mouseover="update">
                {{x}},{{y}}
        </div>
</div>
<script src="vue.js"></script>
<script>
  new Vue({
    el:'#app',
    data:{
    age:18,
    x:0,
    y:0
    },
    methods:{
        add: function(){
        this.age++;
        },
        subtract: function(){
        this.age--;
        },  
        update: function(event){
        this.x = event.offsetX;
        this.y = event.offsetY;
        }
    }
</script>

对于事件而言，它还有事件修饰符

<!--阻止事件冒泡-->
<a v-on:click.stop = "doSome"></a>
<!--提交事件不再重载页面-->
<form v-on:submit.prevent="onSubmit"></form>
<!--添加事件倾听时使用捕捉模式-->
<div v-on:click.capture="dothis"></div>
<!--只有事件在该元素本身时发生触发回调-->
<div v-on:click.self="dothis"></div>
<!--表示该事件只触发一次-->
<div v-on:click.once="dothis"></div>
<!--修饰符可以串联-->
<div v-on:click.self.stop="dothis"></div>

举个修饰符的栗子
这个例子中修饰符prevent阻止重载页面，只会弹出Hello,不会跳转到百度

<div id="app">
   <a v-on:click.prvent="alert()"href="http://www.baidu.com">
       NEW PAGE
   </a>
<div>
new Vue({
   el:'#app',
   data:{},
   methods:{
    alert:function(){                   
      alert('Hello!');
            }
    }
  });
</script>

使用修饰符，顺序很重要

2.键盘事件及键值修饰符

<div id="app">
   <h1>键盘Event</h1>
   <label>姓名：</label>
   <!--enter键值修饰符，在键盘上按下enter键时才会调用函数logName-->
   <input type="text" v-on:keyup.enter="logName"/>
   <label>职业：</label>
   <!--alt.enter键值修饰符，在键盘上同时按下alt键和enter键时才会调用
     函数logName-->
   <input type="text" v-on:keyup.alt.enter="logJob"/>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{},
        methods:{
            logName:function(){
            console.log('输入名字');
            },
            logJob:function(){
            console.log('输入职业');
            }
        }
    })
</script>

键值修饰符都有：
enter,alt,tab,esc,delete(捕获’删除’和’退格’键),space,up,down,left,right

3. 数据双向绑定v-model

在vue中给我们提供了v-model指令专门来实现数据的双向绑定，这就很大程度上减少了我们的代码量，它一般用在input,select,textarea

<div id="app">
    <p>{{message}}</p>
    <input v-model="message" />
</div>
<script src="vue.js"></script>
<script>
   new Vue({
    el:'#app',
    data:{
       message:'我们都很优秀'
    }
  })
</script>

4.计算属性computed

计算属性关键字是computed，我们可以使用 methods 来替computed，效果上两个都是一样的， 但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

下面是一个比较计算属性computed和methods方法的栗子

<div id="app">
   <p>原始字符串: {{message}}</p>
   <p>计算后反转字符串: {{reverseMessage}}</p>
   <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>
<script src="vue.js"></script>
<script>
/*声明了一个计算属性 reversedMessage,提供的函数将用作属性vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。*/
  var vm = new Vue({
    el:'#app',
    data:{
     message:'IMPORTANT'
    },
    computed:{
      reverseMessage: function(){
        return this.message.split('').reverse().join('')
        }
    },
      methods: {
         reversedMessage2: function () {
             return this.message.split('').reverse().join('')
                 }
    }
})
</script>

5.v-bind:class动态改变CSS

在vue中我们可以通过v-bind:class来动态改变一些样式
我们可以传给 v-bind:class 一个对象，以动态地切换 class
下面给大家一个改变样式的简单小栗子：

<div id="app">
 <button v-on:click="changeColor = !changeColor">改变颜色</button>
 <button v-on:click="changeLength = !changeLength">改变长度</button>
 <div v-bind:class="changeClass">
    <span>我们很优秀</span>
 </div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
    el:'#app',
    data:{
       changeColor:false,
       changeLength:false
        },
    methods:{},
    computed:{
       changeClass:function(){
       return {               
          changeColor:this.changeColor, 
          changeLength:this.changeLength
         }
          }
      }
    })
</script>