2018/2/2 20:00:09当前位置推荐好文程序员浏览文章

Vue干货第一集:

v-for 循环
  • v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
  • v-for 可以绑定数据到数组来渲染一个列表:
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>循环</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <style>    </style>    <script src="vue.js"></script>    <script>        window.onload=function(){            new Vue({                el:#box,                data:{                    arr:[apple,banana,orange,pear],                    json:{a:apple,b:banana,c:orange}                }            });        };    </script></head><body>    <div id="box">        <ul>            <li v-for="value in arr">                {{value}}            </li>        </ul>    </div></body></html>
  • 模板中使用 v-for:
<template v-for="site in sites">    <li>{{ site.name }}</li>    <li>--------------</li>  </template>
  • v-for 可以通过一个对象的属性来迭代数据:
<li v-for="value in object">    {{ value }} </li><li v-for="(value, key) in object">    {{ key }} : {{ value }}</li> <li v-for="(value, key, index) in object">     {{ index }}. {{ key }} : {{ value }} </li>
  • v-for 也可以循环整数
  <li v-for="n in 10">     {{ n }}    </li>
computed 计算属性
<div id="app">  <p>原始字符串: {{ message }}</p>  <p>计算后反转字符串: {{ reversedMessage }}</p></div> <script>var vm = new Vue({  el: #app,  data: {    message: Runoob!  },  computed: {    // 计算属性的 getter    reversedMessage: function () {      // `this` 指向 vm 实例      return this.message.split().reverse().join()    }  }})</script>

实例中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。

事件处理器
  • 事件监听可以用v-on指令:
 <button v-on:click="counter += 1">增加 1</button>
  • 我们需要使用一个方法来调用 JavaScript 方法,v-on 可以接收一个定义的方法来调用
 <button v-on:click="greet">Greet</button> methods: {    greet: function (event) {      // `this` 在方法里指当前 Vue 实例      alert(Hello  + this.name + !)      // `event` 是原生 DOM 事件      if (event) {          alert(event.target.tagName)      }    }  }
  • 除了直接绑定到一个方法,也可以用内联 JavaScript 语句:
<button v-on:click="say(hi)">Say hi</button> methods: {    say: function (message) {      alert(message)    }  }
网友评论