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 可以通过一个对象的属性来迭代数据：
- 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) } }推荐阅读：台州市胥文瑶手机发货中心