Vue基础（一）--事件和属性

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Hello World！

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，如下：

  {{ message }}

var app = new Vue({
  el: '#content',
  data: {
    message: 'Hello World!'
  }
})

运行结果：Hello World!

事件和属性

1、事件

1.1 事件简写

v-on:click="" 的简写方式：@click
v-slot 可以缩写为：#

1.2 事件对象$event

包含事件相关信息、如事件源、事件类型、偏移量（target、type、offset）

1.3 事件冒泡

阻止事件冒泡：
① 原生js方式，依赖于事件对象（e.stopPropagation()）

    
        
        
        
        
    

    
        

            
事件冒泡
        
        

            

                

                    
click me
                
            
        
        
        
        
    

② Vue方式，不依赖于事件对象
@click.stop

    
        
        
        
        
    

    
        

            
事件冒泡
        
        

            

                

                    
click me
                
            
        
        
        
        
    

1.4 事件默认行为

阻止事件默认行为
a)原生js方式（e.preventDefault()）

    
        
        
        
        
    

    
        

            
阻止默认事件
        
        

            我是一个链接，点我
        
        
        
        
    

b)Vue方式
@click.prevent

    
        
        
        
        
    

    
        

            
阻止默认事件
        
        

            我是一个链接，点我
        
        
        
        
    

1.5 键盘事件

• 回车：@keydown.13 或 @keydown.enter
• 上：@keydown.38 或 @keydown.up

1.6 事件修饰符

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

...



...





...

2. 属性

2.1 属性绑定和属性简写

v-bind 用于属性绑定， v-bind:属性=""
属性的简写：
v-bind:属性="" 简写为 :属性=""

2.2 class和style属性

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
如下demo所示：

    
        
        
        
        
        
    

    
        

            
            
            
            
            
hello vue
            
            
            
hello vue
            
            
            
hello vue
            
            
            
hello vue
            
hello vue
        
        
        
        
    

---

原创不易，转载请注明出处：https://www.jianshu.com/p/429191c4d9ca