Vue快速入门

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定

双向数据绑定

一、vue快速入门

1. 新建 HTML 页面，引入 Vue.js文件

2. 在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({
el:"#app",
data(){
return {username:""}
}


})

3. 编写视图 在HTML里面

{{username}}

4.完整代码 （简单入门小例子）

    
    



134156456

    
    {{username}}

二、常用指令

1.v-bind:

百度一下



百度一下

2.v-model: 双向数据绑定

3.v-on： 事件响应

  被点击了1
    被点击了2

4.v-if v-else-if v-show

  
div1
    
div2
    
div3
    

    
div v-show
    


    

5.v-for

    
{{a}}
 
    
{{i+1}}0000{{a}}

完整演示代码：

    
    



134156456

    

    {{username}}

  点击一下1
    点击一下2

    被点击了1
    被点击了2

                                   


    
div1
    
div2
    
div4
    

    
div v-show
    


    

    
{{a}}
 
    
{{i+1}}0000{{a}}

 三、Vue生命周期

 

mounted 加载完成自动会调用（跟methods同级）

 mounted(){
            alert("加载完成...")
        }