Vue 2.X 基础篇 第2章 快速入门

目录

第2章 快速入门

课时1：vue初体验

课时2：Vue-v-model

课时3：Vue常用指令-v-once

课时4：Vue常用指令-v-if

课时5：Vue常用指令-v-show

课时6：Vue常用指令-v-else

课时7：Vue常用指令-v-else-if

课时8：Vue常用指令-v-for

课时9：Vue常用指令-v-for练习

课时10：Vue常用指令-v-text,  v-html

课时11：Vue常用指令-v-bind

课时12：Vue常用指令-v-bind补充

课时13：Vue常用指令-v-on

课时14：Vue常用指令-综合练习

课时15：Vue计算属性（computed properties）

---

 

 

第2章 快速入门

课时1：vue初体验

Vue.js主要负责的是上图绿色正方体ViewModel的部分，其在View层（即DOM层）与Model层（即JS逻辑层）之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。

当View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。相反，当Model层的数据发生改变时，其也会通过Data Bingings来监听并改变View层的展示。这样便实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在。

以上参考：https://www.jianshu.com/p/78c9e5342990

    
    
    


    

        
{{message}}
        
{{msg}}
    
    

    

课时2：Vue-v-model

        
{{message}}
        
    
    

    


    
    

        
原始值：{{msg}}
        
后面值：{{msg}}
        
    
    

 

课时4：Vue常用指令-v-if

v-if: 用于根据表达式的值的真假条件渲染元素，如果上图P3为false则不会渲染P标签

    
要显示出来
    
不要显示出来
    
性别：1 女生
    
小明的身高：{{height}}
    
小明的身高：{{height1}}

 

课时5：Vue常用指令-v-show

v-show: 也是条件渲染指令，不同的是V-show的元素会始终渲染并保持在DOM中，和v-if指令不同点在于：v-show是根据表达式的真假值，切换元素的 display CSS 属性

    
    
    



    
要显示出来
    
不要显示出来
    
性别：1 女生
    
小明的身高：{{height}}
    
小明的身高：{{height1}}

应用场景：

频繁切换  v-show

不频繁切换： v-if

课时6：Vue常用指令-v-else

v-else : 可以用v-else指令为v-if或者v-show添加一个‘else块’

注意：v-else前一个兄弟必须为v-if或v-else-if

    
小明的身高是：{{height}}m
    
小明的身高不足1.70m

• v-if和v-else之间 添加其他元素时，会报错

    
小明的身高是：{{height}}m
    
xiiwiuiu
    
小明的身高不足1.70m

 

 

 

• 只有v-else时

 

    
小明的身高不足1.70m

课时7：Vue常用指令-v-else-if

判断多种情况时使用：

v-if

v-else-if

v-else-if

v-else

    
    
    



    
输入的成绩对应的等级为：
    
优秀
    
良好
    
及格
    
不及格
    

      

课时8：Vue常用指令-v-for

v-for: 用于遍历数据渲染元素或模板

语法：（item,index）in items  或者  item in items  (不需要索引时）

    
    
    


    

        

            {{index+":"+score}}
        
        

            {{d}}
        
        

            {{str}}
        

            {{num}}
        
    
    

 

课时9：Vue常用指令-v-for练习

    
    
    
    


    

        

            

                

                    
姓名
                    
年龄
                    
性别
                
            
            

                

                    
{{p.name}}
                    
{{p.age}}
                    
{{p.sex}}
                
            
        
    
    

课时10：Vue常用指令-v-text,  v-html

v-text: 用于更新绑定元素中的内容

        
{{msg}}哈哈哈哈
        
哈哈哈哈
    
    

v-text会更新覆盖p标签中内容

课时11：Vue常用指令-v-bind

 

课时12：Vue常用指令-v-bind补充

    
    
    
    


    

       

           {{college}}
    
    

    

        
{{msg}}
    
    

 

 

课时13：Vue常用指令-v-on

• 监听事件

v-on:click =" " 等价于  @click=" "

    

        
{{msg}}
        改变内容
    
    

 

点击按钮后： 

• 通过钩子选项添加函数，改变内容 

    

        
{{msg}}
        改变内容
        改变内容
    
    

 

• 改变颜色

changeColor(){
                    this.fontColor='blue'
                }

  改变颜色

课时14：Vue常用指令-综合练习

    
    
    
    


    

        
        

            
拇指哥学生录入系统
            

                姓名：
                
            
            

                年龄：
                
            
            

                性别：
                
                    男
                    女
                
            
            

                手机：
                
            
            创建新用户
        
        
        

            

            

                
姓名
                
性别
                
年龄
                
手机
                
删除
            
            
            

                

                    
{{p.name}}
                    
{{p.age}}
                    
{{p.sex}}
                    
{{p.phone}}
                    

                        删除
                    
                
            
        
    
    

 

可添加，删除元素（本地实现）

 

课时15：Vue计算属性（computed properties）

翻转字符串：

    

        
原始值：{{name}}
        
翻转值：{{name.split('').reverse().join('')}}
        
调用函数：{{reverseStr()}}
    
    

      虽然在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。这样，模板不再简单和清晰。在实现反向显示 message 之前，你应该通过一个函数确认它。所以，Vue.js提供了计算属性来让我们去处理实例中的复杂逻辑。

     计算属性 (computed properties) 就是不存在于原始数据中，而是在运行时实时计算出来的属性。

    

        
原始值：{{name}}
        
翻转值：{{name.split('').reverse().join('')}}
        
调用函数：{{reverseStr()}}
        
计算属性：{{reverse}}
    
    

 

• 计算属性 和 Methods的区别？

       当页面重新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用，适合较大量的计算和改变频率较低的属性；而method，就是当页面重新渲染的时候（页面元素的data变化，页面就会重新渲染），都会重新调用method。

        如果不希望有缓存，我们可以用method取代computed。

疑惑：为什么需要缓存？

假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！

• 计算属性的setter方法

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

    

        
{{fullName}}
        调用计算属性的setter方法