Vue学习笔记之列表渲染、事件和表单绑定

一、列表渲染

使用v-for指令渲染列表，包含以下几种渲染方式：

1、直接迭代元素方式

语法：v-for="item in items"，直接迭代数组元素，逐项渲染数据，代码如下：

    直接迭代元素方式
    

        {{item.message}}
    

2、迭代元素+索引方式

语法格式：v-for="(item,index) in items"，迭代元素时可额外访问数组索引元素，逐项渲染数据，代码如下：

    索引迭代元素的方式
    

        {{parentMessage}}-{{index}}-{{item.message}}
    

3、解构参数语法迭代元素的方式

不带索引语法格式：v-for="{message} in items"，

带索引语法格式：v-for="({message},index) in items"

    解构参数语法迭代元素的方式
    

        {{message}}
    
    解构参数+索引迭代元素的方式
    

        {{message}} {{index}}
    

4、多层嵌套for循

    多层嵌套for循环
    

        {{banji.name}}
        
            
{{student.name}}
        
    

5、遍历对象属性

使用v-for逐项遍历对象中的所有属性和值，key代表属性名，value代表属性值，index代表属性位置索引，语法格式：v-for="(value,key,index) in myObject"

    遍历对象属性
    

        

            {{value}}
        
    
    遍历对象属性名和值
    

        

            {{key}}:{{value}}
        
    
    遍历对象属性名和值和位置索引
    

        

            {{key}}:{{value}}:{{index}}
        
    

6、在模板元素上使用v-for指令

遍历范围语法格式：v-for="n in 10",

在模板作用域范围内可访问迭代的元素，代码如下：

    遍历范围
    {{n}}
    模版上使用for
    

        
    

二、事件

事件包含两种：内联事件处理函数和方法事件处理函数，可以使用v-on（简写@）监听DOM事件，包含以下几种事件使用方式：

1、内联事件处理函数

简单的js代码可直接使用这种方式来定义事件处理函数，如代码v-on:click="count++"，具体如下：

    

        内联函数方式使用事件
        Add 1
        
Count is:{{count}}
    

2、方法事件处理函数

在vue应用代码的methods区域自定义方法处理函数，然后在dom元素使用v-on指令绑定即可，在点击按钮后，将自动调用greet方法，如下代码：

    

        方法事件处理器
        Greet
    

3、内联事件处理函数中调用自定义方法

可以在内联事件处理器中直接调用自定义方法，并支持传入一些简单的参数，如下代码，点击按钮后，将调用自定义的say函数：

Say hello
Say bye

4、内联事件处理函数中访问DOM原生事件参数

在内联事件处理器中直接使用$event参数可以访问原生事件对象，如代码：

$event)">Submit

也可以使用箭头函数方式访问原生DOM事件参数，如代码：

(event)=>warn('Form cannot be submitted yet.',event)">Submit

    

        内联事件处理器中访问原生事件event参数
        Submit
    
    

        内联事件处理器中使用箭头函数访问原生事件event参数
        Submit
    

三、表单绑定

可以使用v-model将表单输入框的内容同步给 JavaScript 中相应的变量，包含以下几种表单输入绑定的使用方式：

1、单行文本框

将message响应式属性绑定到input文本框组件上，文本框输入变化，将同步更新给message参数，代码如下：

    

        文本框
        
Message is:{{message}}
        
    

2、多行文本框

将message2响应式属性绑定到textarea组件上，多行文本框输入变化，将同步更新给message2参数，代码如下：

    

        多行文本
        
{{ message2 }}
        
    

2、复选框

语法格式v-model="checked"，复选框选中，则默认给响应式属性checked赋值真，否则赋值假，

1)复选框绑定到数组，可以将多个复选框选中的值动态更新到响应式数组中，如下代码定义了数组checkedNames

2)可以将动态值赋给复选框，如下定义了响应式属性toogle、checkTrueValue和checkFalseValue，如果选中了复选框，则checkTrueValue的值将赋给toogle，否则checkFalseValue的值将赋给toogle，这里使用了vue的:true-value和:false-value语法，

    

        复选框
        
        {{checked}}
    
    

        复选框绑定到数组
        Checked names:{{checkedNames}}
        
        Jack
        
        John
        
        Mike
    
    

        复选框绑定动态值
        
        {{toggle}}
    

3、单选框

如下代码，单选框选中，则给响应式属性picked赋值One，否则赋值Two，

 
    

        单选框
        
Picked:{{picked}}
        
        One
        
        Two
    

4、下拉选择框

1)单个下拉选择，定义了selected响应式属性，默认为A，则页面加载后自动将A选中，更改选项，自动触发selected更新

2)多下拉选择，select中增加multiple特性，表示可以多选，定义了selectedArray数组类型的响应式属性，选择下拉列表元素，将同步增加元素值到selectedArray中

3)可使用vue应用中定义的数据源动态渲染select，如代码所示

 
    

        单值绑定
        
selected:{{selected}}
        
            Please select one
            A
            B
            C
        
    
    

        多选
        
selectedArray:{{selectedArray}}
        
            A
            B
            C
        
    
    

        动态渲染多选
        
            {{option.text}}
        
        
selected:{{selected}}