Day 9-note_Vue基础

1. 讲项目

1. 缩略图
2. 闪烁效果
3. 轮播图
4. 可拖拽元素
5. 房屋信息(前一天作业)

2. Vue基础

Vue主要包含两个部分：Vue对象和指令

1. Vue对象

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

• 设置标签内容
  实例一：

        

        {{name}}
    
    

案例二：

    

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

• 设置标签属性值
  v-bind:属性='Vue属性名'

• if语句：
  v-if='条件语句' -- 如果条件语句的结果是true,标签就显示，否则不显示

    

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

• 循环结构:
  v-for="变量 in 数组属性"

    

        

            
{{mesage.name}}
        
    
    

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

    

        
{{num}}
        加1
    
    

• input标签内容和属性双向绑定:
  v-model="Vue对象属性名"

    

        
{{message}}