Vue起步

第二章 Vue起步

一、 课程学习方法

Vue官网：https://cn.vuejs.org/

二、 hello world

1. 输出Hello World

(1). 原生JS

(2). Vue

    
    
  
    


  
    
{{content}}
    

2. 定时修改内容

(1). 原生JS

var dom = document.getElementById('app');
dom.innerHTML = "hello world"
setTimeout(function() {
  dom.innerHTML = "bye world"
}, 2000)

(2). Vue.js

var app = new Vue({
    el: '#app',
    data: {
        content: 'hello world'
    }
})
setTimeout(function() {
    app.$data.content = 'bye world'
}, 2000)

三、开发TodoList(v-model、v-for、v-on)

1. 一个网址

www.todolist.cn

2.我的TodoList

    
    
    


    

        
        
        
        提交
        

            
            
{{item}}
        
    
    

四、MVVM模式

五、前端组件化

组件就是页面的一部分

方便维护

六、使用组件改造TodoList

    
    
    


    

        
        
        
        提交
        

            
            
        
    
    

七、简单的组件间传值

    
    
    


    

        
        
        
        提交