本文共 2674 字，大约阅读时间需要 8 分钟。

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中的列表渲染

转载地址：http://zpnmb.baihongyu.com/