Vuejs

Vue开发去哪网App

用到的了Vue中的知识点

Axios–Ajax数据的获取
Vue Router–做多页面之间的路由
Vuex–各个组件之间的数据共享
异步组件—代码上线，性能更优
Stylus–编写前端的样式
递归组件–实现组件自身调用自己
slider插件实现轮播图

---

开始！

Hello Vue

    
    
    
    
    


    

    

    

        {{content}}
    
    

---

TodoList

    
    
    

    


    

        
        
        
        提交
        

            
            
{{item}}
        
    
    

---

数据的双向绑定扩展： v-model="inputValue"

---

使用组件化的思想修改TodoList 全局组件

    
    
    

    


    

        
        
        
        提交
        

            
            
            
            
        
    
    

---

使用组件化的思想修改TodoList 局部组件

    
    
    

    


    

        
        
        
        提交
        

            
            
            
            
        
    
    

---

字组件向父组件传值 TodoList点击删除案例

    
    
    

    


    

        
        
        
        提交
        

            
            
            
            
            
            
            

        
    
    

---

---

Vue实例理解

    
    
    




    

        

            {{message}}
        
        
    

    

---

Vue实例生命周期函数

到了Init Event & Lifecycle结束之后的时间点，beforeCreate就会自动的被执行

调用完beforeCreate函数，Vue会继续处理外部的注入包括双向的绑定的内容，在这部分初始化完成的时候，Vue实例的初始化基本完成

在这个时间点，created函数自动执行

判断Vue实例中是否有el:选项

判断Vue实例中是否有template:选项,
如果有 使用模板进行渲染，
如果没有 把el外层的HTML当做模板进行渲染

在页面渲染之前自动执行beforeMount生命周期函数，（模板和数据相结合，挂载到页面之前执行）

页面挂载之后，mounted函数被执行,mounted函数执行之后，页面被渲染完毕（用console.log(this.$el)验证）

当数据发生改变时，页面还没重新渲染之前，会执行beforeUpdate函数，渲染之后updated函数会被执行

---

---

beforeUpdate updated函数，数据发生改变时执行

---

Vue模板语法

    
    
    


    

        
{{name + '----后面可以加js语法'}}
        

        

    
    

    

---

---

Vue中的计算属性，方法和侦听器

    
    
    


    

        {{fullName}}
        {{fullName1()}}
        {{fullName2}}
        {{age}}

    
    

---

计算属性的setter和getter

    
    
    


    

        {{fullName}}
    

    

---

---

Vue中样式的绑定 class的对象绑定 点击切换颜色

    
    
    
    


    
    
    

        

            Hello World
        

    

    

---

Vue中样式的绑定 class和数组绑定

    
    
    
    


    
    

        

            Hello World
        

    

    

---

Vue中样式的绑定 class和style绑定

    
    
    



    

        

            Hello World
        
    

    

:style=“styleObj” 对象方式绑定
:style="[styleObj]" 数组方式绑定

---

Vue中的条件渲染

    
    
    





    
{{message}}
    
{{message}}

---

Vue中的列表渲染