Vue初入门（二）———列表渲染和事件

秒速五厘米 2023-03-13 11:55 8阅读 0赞

## 一、列表渲染 v-for ##

--------------------

\*\* v-for 能够渲染输出的有 ：字符串、数值\*\*

字符串类型：

<div id="app">
         <h2> str </h2>
         <ul>
           <li v-for = "item in str">   //item是固定的，类似遍历输出
             {
       { item }}
           </li>
         </ul>
         
         <script> new Vue({ //这里记得V是大写的！！！经常写错！！ el:'#app', data:{ str:'I LOVE U' } }) </script>

数值型：

<ul>
        <li v-for = "item in num">
          {
       { item }}
        </li>
      </ul>
      
    new Vue({
        el:'#app',
        data:{
          num: 10}）

\*\* v-for 可以循环的对象\*\*

*  对象
    
     *  表达式： v-for = “(key,val,index) in obj”
        
         *  key 就是对象的 属性
         *  val 就是对象的 属性值
         *  index 就是对象的索引

<h2> person </h2>
          <ul>
            <li v-for = "(val,key,index) in person">
              {
       { key }} -- {
       { val }} -- {
       { index }}    //会按照这个格式输出
            </li>
          </ul>
          
    	 new Vue({
    	    el:'#app',
    	    data:{
    	      person: {
    	        name: 'kenzi',
    	        age: 18,
    	        sex: 'man'
    	      }
    	    }
    	  })

*  数组
 *  == 表达式： v-for = “(item,index) in arr”==  
    \- item 就是数组中的每一个  
    \- index 就是数组的下标

<h2> arr </h2>
         <ul>
           <li v-for = "(item,index) in arr">
             <p> <span>数组中的每一个是： {
       { item }} </span> </p>
             <p> <span>数组的下标是： {
       { index }} </span> </p>
           </li>
         </ul>
       	
       	 new Vue({
       	    el:'#app',
       	    data:{
       	      arr: ['a','b','c','d']
       	      }
       	     })

*  json数据类型
 *  json类型数据循环必须添加key属性
    
     *  key属性的值最好是唯一的，不改变的，比如： id
     *  什么是json类型数据
        
         *  \[\{\},\{\},\{\}\],
         *  \{content: \[\{\},\{\}\]\}
         *  …
     *  为什么我们json数据要添加key属性？
        
         *  因为vue使用了vdom的技术，vdom有新旧的区别，我们是通过一个叫做diff算法的来对比新的和就得vdom,是通过同层级来进行比对的，所以key为我们提供了同层级比较的一个标识符

<h2> json类型数据 </h2>
          <ul>
            
            <li 
              v-for = "item in todos"
              :key = "item.id"      //这里得冒号是v-bind的简写，将数据赋值给属性值，单项数据绑定
            >
              <span> {
       { item.task }} </span>  //输出的时候记得写上item.
            </li>
          </ul>
    
    			new Vue({
    		    el:'#app',
    		    data:{
    		      arr: ['a','b','c','d'],
    		      todos: [  //json格式的数组，数组里面又包含对象
    		        {
    		          id: 1,     ///这里的 json对象的属性值可以加双引号，也可以不加双引号
    		          task: '吃饭'
    		        },
    		        {
    		          id: 2,
    		          task: '敲代码'
    		        }
    		      ] 
    		    }
    		  })

## 二、事件 v-on(下面的代码都是在div id=“app” 里面写的) ##

格式： <div v-on:事件类型 = “事件名称”>

*  事件类型： click change focus blur mouseover …

先定义事件处理程序，在绑定事件

*  vue提供了一个叫做 **methods** 的选项用于放置 事件处理程序

**事件**

*  普通事件

<div id="app">  //这个app作为挂载点
     
     {
       { msg }}
     <button v-on:click = "handler"> 事件 </button>   //**调用函数时都不用写括号的！！**
    
     new Vue({
     el: '#app',
     methods: {
       // 这里面放的都是函数
       handler () {
         alert('事件')
       }

*  带有参数的事件

<ul>
       <li v-for = "(item,index) in todos" :key = "item.id">
         <p> {
       { item.task}} </p>
         <button v-on:click = "alertNum( index )"> 点击输出第几个任务 </button>  /这里的index是上面那里拿来的参数，这里阿index是实参
       </li>
     </ul>
     
     	new Vue({
     	    el: '#app',
     	 methods: {
     	      // 这里面放的都是函数
     	      alertNum ( index ) {   //这里放的形参
     	        alert( index )
     	      },

*  事件对象
    
     *  这个事件对象就是原生事件对象(event),***但是这个不用传参的***

<h2> 事件对象 </h2>
          <button v-on:click = "eventHandler"> 事件对象 </button>
    
     new Vue({
        el: '#app',
         methods: {
          // 这里面放的都是函数
          eventHandler ( e ) {
            console.log('e',e) 
          }

*  事件对象 + 事件传参
    
     *  在调用事件处理程序时，一定要传入 **$event 和 e** 来对应

<h2> 事件对象 + 事件传参 </h2>
          <button @click = "eventAndArguments($event,2)"> event + arguments </button>
    
    	new Vue({
    	    el: '#app',
    	    },
    	    methods: {
    	      // 这里面放的都是函数
    	      eventAndArguments (e, msg) {
    	        console.log(msg)
    	        console.log( e )
    	      }

## v-on的简写形式：@ ##

## 修饰符 减少一些代码的重复书写 ##

修饰符是添加在事件类型之后

*  @click.修饰符 = ‘事件名’

<h2> 事件修饰符 </h2>
          <div class="big" @click.stop = "bigHandler">
            <div class="middle" @click.stop = "middleHandler">
              <div class="small" @click.stop = "smallHandler"></div>
            </div>
          </div>

**注：这里的stop相当于在在方法定义中的阻止事件冒泡**

*  == stopPropagation ==
 *  写在方法中 e.stopPropagation，这样就重复书写了三次，直接在后面写stop会更快

提交事件：

<form action="" @submit.prevent = "onSubmit">
           <input type="submit" value="提交">
         </form>
    
       	new Vue({
       	    el: '#app',
       	    methods: {
       	      // 这里面放的都是函数
       	      onSubmit () {
       	        alert('表单提交')
       	      }

键盘事件

<h2> 按键修饰符 </h2>
           <input type="text" @keydown.13 = "getUsername">  //回车键触发这个函数
           <input type="text" @keydown.enter = "getUsername">//可以直接写键盘的英文字母
    
    
       	 new Vue({
       	    el: '#app',
       	     methods: {
       	      // 这里面放的都是函数
       	      getUsername ( e ) {
       	        // if (e.keyCode === 13 ) {
       	        //   alert( e.target.value )
       	        // }
       	        alert( e.target.value )
       	      }
       	    }
       	  })