day04 Vue.js初步学习

一、了解Vue.js

简单小巧的渐进式技术栈，可以一步一步、有阶段性地来使用Vue.js，不必一开始就使用所有的东西。使用Vue.js使得Web开发变得简单，同时也颠覆了传统的前端开发模式。
Vue.js官网

• MVVM模式

MVVM即：Model-View-View-Model模式。它由经典的软件架构MVC衍生而来。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系。

• 引入

引入CDN，只需要在创建的html文件中引入下图中的script代码，这样就成功地将Vue.js引入到我们的项目中并可以使用了。

• 简单练习

    
        
        
        
        
    
        
        

            
            
{{message}}
        
        
    

二、数据绑定

• 双向绑定

    
        
        
        
        
        
    
    
        
        

            
            
你好，{{name}}
        
        
    

day04-1.png

• 使用v-bind绑定data中的属性

    
        
        
        
    
    
        

            
姓名：{{name}}
            
            {{website}}
            
        
        
    

三、条件与循环

条件渲染指令： v-if、v-else-if、v-else：可以根据表达式的值在DOM中渲染或销毁元素/组件,与v-show不同的是，v-if是真正的条件渲染，适合条件不经常变更的场景；而v-show只是简单的CSS属性切换，使用于频繁切换条件。

• 列表渲染指令：v-for：当需要将一个数组遍历或枚举一个对象循环显示时，会用到列表渲染指令v-for，结合in来使用
• 仿蓝慕云实例

    
        
        
        
        
        
        
    
    
        
        

            
进行中的班课
            

                

                    
                    

                        
{{course.cnumber}}
                        
{{course.name}}
                        
{{course.teacher}}                  {{course.cno}}
                        
                        
{{course.teacher}}
                    
                    
                
            
        
        
    

day04-2.png

• 作业练习

    
        
        
        
        
        
        
    
    
        
        

            
推荐作者       
                         
                      
                换一批
            

                

                    

                        
                    
                    

                        
{{author.name}}
                        
{{author.info}}
                    
                    

                        
√ 已关注
                        
+ 关注
                    
                
            
        
        
    

day04-3.png