步骤概要

设计步骤

• 拆分组件 （可以先准备好完整的bootstrap美化页面，然后切分）
• 静态组件
• 动态组件

软件编写步骤

• 准备静态文件  （含bootstrap等）
• 编写 vue webpacke

 

案例1：comment

1. 静态页面 与拆分

 静态页面

先设计html  如 bootstrap css美化过的页面

 

      
          
          
                  
      
      
       
      
        
        
         
          
          
            
           
 
            
请发表对Vue的评论
 
           
          
          
        
         
      
        
      
        
          
         
              
          
                
           
 
            用户名 
             
           
                
           
 
            评论内容 
             
           
                
           
 
            
 
             提交 
            
 
           
              
          
            
         
 
                   
         
            
          
评论回复：
            
          
暂无评论，点击左侧添加评论吧！
            
          
                
           
 
            
 
             删除 
            
 
Tom说:
 
jerry是猫
 
            
          
          
         
  
               
        
      
       
    
      
 
        

 

页面拆分

 

 红框含app，内部黄框为整体App.vue

绿框分割

 

 其中header标记是html5 新标记

 

2.代码过程

2.1代码静态分割

main.js

/** * Created by infaa on 2018/9/18. */import Vue from 'vue'import App from './App'/* eslint-disable no-new */new Vue({  el: '#app',  template: '
      ',  components: {App}})

App.uve

./components/Add.vue   

components 实际复杂情况下为目录，每个目录为完整一组功能，含图片等元素。

./components/List.vue

 

2.2 代码动态传递（父组件->子组件->子组件）

app.vue 

数据共享放于父组件

list.uve    

components引入子组件，props申明父组件变量，：comment通过属性向子组件传递 。 以上过程可以多次传递

item.vue

测试再向内传递comment值

item2.vue

 

 2.3 动态修改 增加与删除评论功能添加  (完整代码)

子组件中操作父组件的数据，通过父组件提供的方法完成（传递到子组件）。

数据在哪里，直接操作数据的方法写在哪里。 子组件中通过传递进来的方法再处理。

app.vue

list.vue

item.vue

删除评论

add.vue

 index.html

main.js

/** * Created by infaa on 2018/9/18. */import Vue from 'vue'import App from './App'/* eslint-disable no-new */new Vue({  el: '#app',  template: '
      ',  components: {App}})

 

 

 参考

https://github.com/sunny-sky/VueDemo