day27总结：Vue基础（2019-05-23）

Vue基础

• Vue主要包含两个部分：Vue对象和指令
• 导入标签
  

1. Vue对象

            var 对象名 = new Vue({
                el:关联对象的选择器,
                data: 数据对象(属性和值自己决定),
                methods:方法对象(属性对应的值是方法)
            })

2. 设置标签内容

• {{Vue属性名}}

        

            
{{pText}}
            {{aTitle}}
            
{{title}}
        
        
        

3. 设置标签属性值

• v-bind:属性='Vue属性名'

4. if语句

• v-if='条件语句（Vue属性名）'：如果条件语句的结果是true，标签就显示，否则不显示（条件语句需要是与Vue属性相关联的语句）

        

            
            
内容是:{{message}}
            
            
            
内容是:{{message}}
        
        

5. 循环结构

• v-for="变量 in 数组属性"

        

            

                
{{mesage.name}}
            
        
        

6. 事件绑定

• v-on:事件名='函数名'

        

            
{{num}}
            加1
        
        

7. input标签内容和属性双向绑定

• v-model="Vue对象属性名"

        

            
{{message}}
            
        
        

8. stop修饰符

• v-on：事件名.stop：捕获指定标签上的指定事件（阻止事件传递给父标签）

9. 表单提交阻止页面重载

• 在form标签中设置：v-on:submit.prevent='方法属性名'

        

            
            
            男
            女
            
        
        

10. Vue加载异步数据

    
        
        
        
        
    
    
        

            
{{name}}
            
{{data.title}}