Vue小白入门

目录

简介

入门案例

常用指令

使用案例 

v-bind、v-model 案例

v-on 案例

v-if、v-show 案例

v-for案例

vue生命周期

---

简介

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

基于MNVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上

官网: https://v2.cn.vuejs.orgl

入门案例

    
    
    
    



    

        
        {{ message }}
    

常用指令

 

使用案例 

v-bind、v-model 案例

    

        百度链接01
        百度链接01
        
    

v-on 案例

    

        按钮1
        按钮2
    

v-if、v-show 案例

    

        
        年龄经判定，为:
        年轻人(35及以下)
        中年人(35-60)
        老年人(60及以上)
        



        
        年龄经判定，为:
        年轻人(35及以下)
        中年人(35-60)
        老年人(60及以上)
    

v-for案例

案例1

    

        
{{index + 1}} : {{addr}}
    

案例2

    

        

            

                
编号
                
姓名
                
年龄
                
性别
                
成绩
                
等级
            
            

                
{{index + 1}}
                
{{user.name}}
                
{{user.age}}
                

                    男
                    女
                
                
{{user.score}}
                

                    优秀
                    及格
                    不及格
                
            
        
    

vue生命周期

• 生命周期:指一个对象从创建到销毁的整个过程。
• 生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。