Vue基础使用

目录

模板语法传值

插值语法

指令系统之文本指令

指令系统之事件指令

指令系统之属性指令

Style 和 Class

条件渲染

 列表渲染

v-if+v-for+v-else控制购物车商品的显示

v-for遍历数组(列表)、对象(字典)、数字

 key值 的解释

数组的检测与更新

 双向数据绑定

事件处理

 过滤案例

补充：

事件修饰符

 按键修饰符

keycode对应表

表单控制

checkbox多选，radio单选 

购物车结算

购物车数量增减以及全选全不选

FOR循环补充

 v-model进阶用法

---

模板语法传值

插值语法

被vue托管的标签中可以写 {{}}   中可以写：变量，js简单的表达式，函数

    
    
    





    
vue插值语法渲染变量
    
name:{{name}}
    
age:{{age}}
    
hobby:{{hobby}}
    
the 1st hobby:{{hobby[0]}}
    
boyfriend:{{boyfriend}}
    
boyfriend's name:{{boyfriend['name']}}
    
boyfriend's age:{{boyfriend.age}}
    
label:{{a}}

    
vue 插值语法渲染简单表达式
    
{{10 > 9 ? 'bigger' : 'smaller'}}
    
{{10 + 1}}
  // 只有一个+的运算， 没有++

效果

指令系统之文本指令

 写在[任意]标签上 以  v-xx  开头的，都是vue的指令

指令	释义
v-html	让HTML渲染成页面【如果是标签字符串，会把标签渲染到标签内】
v-text	标签内容显示js变量对应的值【    v-text：把变量渲染到标签中，如果之前有数据，覆盖掉】
v-show	放1个布尔值：为真 标签就显示；为假 标签就不显示【控制标签的显示与隐藏，但是它是通过style的display控制的：style="display: none;"】
v-if	放1个布尔值：为真 标签就显示；为假 标签就不显示 【控制标签的显示与隐藏，但是它是通过dom的增加和删除】

v-show与 v-if的区别：

v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入 标签

    
    
    





    
文本指令 v-text
    
yietong
    

    
文本指令 v-html
    

    

    

    
    

    
v-if
    

        click here for beauties
        
pretty girls
    

效果 

指令系统之事件指令

放在标签上：v-on:事件名='函数'
事件名可以写：click,dbclick, input标签:change,blur,input
 

指令	释义
v-on	触发事件（不推荐）
@	触发事件（推荐）
@[event]	触发event事件（可以是其他任意事件）

    
    
    





    
事件指令
    click here to disappear
    

        
        
    

    
事件指令函数带参数
    函数需要参数，但是没有传入，默认会把event事件传入
       

    // 可以传入数字， 字符串，数组，对象等
    函数需要参数，但是传值了
       

    函数需要2个参数，一个事件，一个字符串
       

    函数需要3个参数，但是只传入了一个

小补充：es6 对象写法》》   v-on:事件名='函数'  简写成  @事件名='函数'

   // // es5写法
 var obj = {'name':'yietong','age':22}
 var obj = {name:'yietong',age:22}

  //es6中写法
 var name = 'yietong'
 var age = 22
 var obj = {name:name,age:age}
 //简写为
 var obj = {name,age}
 // 函数写法[简写】
 var obj = {name,age,handleClick () {
 
       }}

指令系统之属性指令

写在标签上的 name，class,href,src,id.....属性
v-bind:属性名='变量'  简写成 》》 v-bind:属性名='变量'         :属性名="变量"

指令	释义
v-bind	直接写js的变量或语法（不推荐）
:	直接写js的变量或语法（推荐）

 v-bind:class=’js变量’可以缩写成：:class=’js变量’

    
    
    





    
属性指令
    click here to check pictures
    

    
    

    click to change pictures
    

    
    

    
    



    

        I am div

    

Style 和 Class

语法

:属性名=js变量/js语法

• :class=’js变量、字符串、js数组’

class：三目运算符、数组、对象{red: true}

• :style=’js变量、字符串、js数组’

style：三目运算符、数组[{backgreound: ‘red’},]、对象{background: ‘red’}

    
    
    
    




    
class的使用
    

        我是class，的div
    

    
style的使用
    
    

        我是style，的div
    

条件渲染

指令	释义
v-if	相当于： if
v-else	相当于：else
v-else-if	相当于：else if

    
    
    





    
条件渲染
    
excellent
    
great
    
good
    
work hard

 展示

 列表渲染

v-if+v-for+v-else控制购物车商品的显示

    
    
    
     
    





    

        

            

                

                    加载购物车

                

                

                    

                        

                        

                            
商品id
                            
商品名称
                            
商品单价
                            
商品数量
                        
                        

                        

                        

                        
{{goods.id}}
                        
{{goods.name}}
                        
{{goods.price}}
                        
{{goods.amount}}
                        
                        
                    

                    

                        购物车空空如也
                    

                

            

        
    

展示

v-for遍历数组(列表)、对象(字典)、数字

    
    
    






    
循环数字
    

        
{{i}}
    

    
循环字符串
    
{{i}}

    
遍历数组
    
{{i}}


         
遍历对象
    
{{i}}


    


      
循环数字
    

        

            元素：{{i}}---索引{{v}}
        
    

    
循环字符串
    

       元素：{{i}}---索引{{v}}
    

    
遍历数组
    

       元素：{{i}}---索引{{v}}
    


         
遍历对象
    

        元素：{{i}}---索引{{v}}
    

展示

注意！在Vue中：

• 数组的index和value是反的
• 对象的key和value也是反的

 key值 的解释

vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）

• 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
• 页面更新之后，会加速DOM的替换（渲染）
• :key="变量"

数组的检测与更新

    
    
    



    

        
数组的检测与更新
        点我追加信息|
        点我追加第一批信息|
        点我修改数组页面变化|
       
{{girl}}

        
对象的检测与更新
        点我追加信息
        点我追加身高信息
        
{{key}}=={{value}}



    

演示

 双向数据绑定

 input标签，v-model：数据双向绑定
    -使用 属性指令绑定 :value='变量'  是数据的单向绑定
    - v-model="name" ：数据双向绑定

    
    
    






    
数据双向绑定
    
name: 
    
password: 
    submit{{err}}

展示

事件处理

事件绑定 v-on:事件名='函数'---》@事件名='函数'
input 也有很多事件
    -blur：失去焦点触发
    -change：发生变化触发
    -input：输入触发

    
    
    




    
input的事件处理
    
blur
    
 ---->{{name1}}
    
change
    
 ---->{{name2}}
    
input
    
 ---->{{name3}}

 过滤案例

    
    
    



    
过滤案例
    


    

        
{{item}}
    

 

补充：

数组的内置过滤方法filter：参数是一个箭头函数，每次从数组中取一个值，函数返回true就保留该值，返回false就丢弃该值。

判断字符串是都在另一个字符串里：字符串.indexof(字符串)，返回索引，如果索引大于等于0，说明存在。

箭头函数：
如果只有一个参数，那也可以不用括号。只有没有参数，或者多个参数的情况下，才需要使用括号：
 

var func0 = () => {return true}
var func = a => {return a}
var func1 = (a,b) => {return a + b}

箭头函数也可以不用大括号，但这样会改变函数的行为。使用大括号就说明包含“函数体”，可以在一个函数中包含多条语句，跟常规的函数一样。

省略大括号箭头后面就只能有一行代码；
省略大括号会隐式返回这行代码的值；
省略大括号不能写return。

var func = () => true
var func1 = (a,b) => a + b //相当于return a + b
var func2 = a => true

事件修饰符

.stop    只处理自己的事件，不向父控件冒泡
.self    只处理自己的事件，子控件冒泡的事件不处理
.prevent    阻止a链接的跳转
.once    事件只会触发一次（适用于抽奖页面）

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生

用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击

    
    
    



    
事件修饰符
    
事件冒泡--通过事件修饰符stop , 加在子控件上，阻止事件冒泡
    

        
美女
        
帅哥
     

        
事件冒泡--通过 事件修饰符 self加在父控件上，只处理自己的事件
        

            
美女
            
帅哥
        

    
阻止a标签跳转
    点我看美女

    
once只执行一次
    点我秒杀

 按键修饰符

    
    
    



    
按键修饰符
    

keycode对应表

 也可以使用keycode对应的数字关系进行案件修饰符的编写

 

表单控制

checkbox多选，radio单选 

    
    
  


  

表单控制
      
name: 
      
password: 
      
isRemember 


      

           male
           female
           other

      


      
 hobby:
           basketball
           football
           volleyball

      

  

购物车结算

    
    
    
    
    



    

        
购物车
        

            

                

                    

                    

                        
商品id
                        
商品名字
                        
商品价格
                        
商品数量
                        
全选/全不选
                    
                    
                    

                    

                        
{{good.id}}
                        
{{good.name}}
                        
{{good.price}}
                        
{{good.count}}
                        

                    

                    
                
                

                选中的商品是：{{checkGroup}}
                

                总价格是：{{getPrice()}}

            
        

    

购物车数量增减以及全选全不选

    
    
    
    



    

        

            

            

                
商品名称
                
单价
                
数量
                
全选/全不选 
            
            
            

            

                
{{item.name}}
                
{{item.price}}
                

                    -
                    {{item.number}}
                    +
                
                

            
            

                
总价：{{getPrice()}}
            
            
        
    

FOR循环补充

 python中只有基于迭代的循环，没有基于索引的循环
js，java，go中有基于迭代和索引的两种

    1 for(i=0;i     2 for (i in checkGroup)                # 基于迭代的循环
    3 for (i of checkGroup)                # es6中 循环
    4 数组内置方法.forEach()
    5 jquery  $.each 循环
    

 v-model进阶用法

lazy：等待input框的数据绑定时区焦点之后再变化

number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格

    
    
    


    

        
v-model进阶
         >>>{{name1}}
        

         >>>{{name2}}
        

         >>>{{name3}}