vue2.0学习

事件深入

v-on

• v-on：click/mouseup...
• 简写： @click:"" （推荐）

事件对象

• @click="show($event)"

事件冒泡

--- 阻止冒泡

• event.cancelBubble=true
• @click.stop="show($event)" （推荐）

默认行为（默认事件）

• ev.preventDefault();
• @contextmenu.prevent；推荐

键盘

• 键盘事件：@keydown，@keyup
• 常用键：
  • 回车：
    • @keyup.13
    • @keyup.enter
  • 上，下，左，右
    • @keyup/keydown.left
    • @keyup/keydown.right
    • @keyup/keydown.up
    • @keyup/keydown.down

属性

• 用v-bind关联属性，如v-bind:src=""，
  简写为：src=""
• 效果能出来，但是会报一个404错误
• 效果可以出来，不会发404请求

 var Box2 = new Vue({
                el: '#box2',
                data: {
                    url: 'http://e.hiphotos.baidu.com/image/w%3D500/sign=f41ccdfef1f2b211e42e854efa816511/e61190ef76c6a7ef2a3f03abf7faaf51f3de6626.jpg'
                }
            })


        }

class和style

• class

1. :class="[a]" a是数据

        文字...

2. :class="[a,b,c]" 可多个class
3. :class="{red:a, blue:false}" a是数据且为布尔值

        文字...

4. :class="json"

        文字...

• style(与class类似)

1. :style="[c]"
2. :style="[c,d]"
3. :style="json"
4. 注意: 复合样式，采用驼峰命名法

模板

• {{msg}} 数据更新模板变化
• {{*msg}} 数据只绑定一次
• {{{msg}}} HTML转意输出

过滤器:-> 过滤模板数据

• 系统提供一些过滤器:uppercase，lowercase，capitalize
• {{msg| filterA}}
• {{msg| filterA | filterB}}
• {{msg| filterA 参数}} 如：currency 钱

        {{12|currency '￥'}}