vue第二篇

2.7 冒泡和默认行为

<!-- 事件的冒泡，子元素冒泡到父元素-->
<!-- 事件的捕获，父元素会捕获到子元素-->
<!-- 对元素有移入移出时，用onmouseover和onmouseout事件会导致闪烁的bug,改为用onmouseenter与mouseleave-->

<!--阻止冒泡：-->
        JS
            1.var e=window.event||e;  //考虑ie8
            e.cancelBubble = true;  // 完全兼容阻止冒泡的办法
            2.e.stopPropagation(); //不考虑ie8
        jquery:
            1.e.stopPropagation()
            2.return false;
        vue:
           e.stopPropagation();
 <!-- 阻止默认行为：-->
            点击a链接跳转
            点击表单提交按钮
            点击鼠标右键，出现右键菜单
            拖动图片到浏览器，浏览器默认自动打开图片
        JS:
            e.preventDefault(); 后面的代码继续执行
            return false;   后面的代码不执行
        jquery:
            e.preventDefault();
            return false;
        vue:
            e.preventDefault();   

<!-- 阻止事件冒泡的简写 -->
<div class="small" @click.stop="small($event)"></div>
<!-- 阻止默认行为的简写 -->
<a href="http://www.baidu.com" @click.prevent="prevent($event)">点击跳转到百度</a>

2.8 v-on 特殊事件

// v-on 表单事件
<input type="text" v-model="username" @blur="blur()" @focus="focus()" @change="change()">

//使用的是 键盘按键值对应的ASCII
//键盘事件(具体用法看vue2中4v-on键盘事件)
<input type="text" v-model="username" @keyup="up()" @keydown="down()" @keypress="press()">

//当按下a按键的时候，触发downA函数
<input type="text" @keydown.65="downA()"><br><br>
//按回车按键，触发
<input type="text" @keydown.left="downLeft()"><br><br>

// 键盘事件特殊用法
@keyup.13="show()"
@keyup.enter/tab/delete/esc/space="show()"
@keyup.left/up/right/down="show()"

space:空格
esc:退出
delete:删除
enter:回车
tab：Q左边的Tab制表符

2.9 自定义指令

// 为什么用自定义指令(举例子)
Vue2.0中，代码复用的主要形式和抽象是组件，然后，有的情况下，你仍然需要对纯DOM元素进行底层操作，这就需要自定义指令

// 注册一个全局自定义指令 v-demo="color"
// el：绑定的元素,binding.value：绑定的值
Vue.directive('bg', function(el, binding) {
       el.style.backgroundColor = binding.value;
});
<h3 v-bg="color">自定义的指令22</h3> //背景颜色为黄色

// 实例化Vue对象
new Vue({
    el: '#box',
    data: {
        color: "yellow"
    }
})

3.计算属性(看vue02节demo)

任何复杂的逻辑运算，使用计算属性,
计算属性不能出现在data数据中

<div id="box">
    <input type="text" v-model="num1">
    价格：<input type="text" v-model="price"><br><br>
    数量：<input type="text" v-model="num">    <br><br>
    <h3>乘积：{{price*num}}</h3>

   <h3>total的计算属性：{{total}}</h3>
   <h3>getTotal()方法的结果：{{getTotal()}}</h3> <br>
</div>

var Vue({
    el: '#box',
    data: {
        price: 0,
        num: 0,
        message: "hello world"
    },
    <!--计算属性-->
    computed:{
            total:function(){
               return this.price * this.num;
            },
    <!--方法-->
    methods:{
        getTotal:function(){
            return this.price*this.num;
        }
    },
 })
注意：
1.计算属性（computed）和方法（methods）都可以修改数据，但是计算属性依赖缓存提升效率，方法调用不会依赖缓存
2.观察对象watchers：当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的。

4.过滤器

//过滤器
    Vue.filter('number', function(value) {
        // 转换为浮点数
        var num = parseFloat(value);
        // 保留两位小数点
        return num.toFixed(2);
    });

    // 格式化日期，日期过滤器
    Vue.filter('date', function(input) {
        // 将个位数加前置0
        function toZero(value) {
            console.log(value);
            if (value <= 9) return '0' + value;
            else return value;
        }

        var oDate = new Date(input);
        return oDate.getFullYear() + '-' + toZero((oDate.getMonth() + 1)) + '-' + toZero(oDate.getDate()) + ' ' + toZero(oDate.getHours()) + ':' + toZero(oDate.getMinutes()) + ':' + toZero(oDate.getSeconds());
    });