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

一、列表渲染 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>
        <!-- key属性是必须加的、 -->
        <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作为挂载点
 <!-- 可以通过vue将 {{ msg  }} => 做解析 -->
 {{ 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的简写形式：@

<h2> v-on 简写模式 </h2>
  <button @click = "easyHandler"> v-on简写 </button>

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

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

• @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 )
   	      }
   	    }
   	  })