<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>vue</title> <!-- <script src="vue.js"></script> --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script> </head> <body> <div id='vm01'> <!-- <li v-for="n in evenNumbers">{{n}}</li> --> <input @keyup.f1="submit"></input> </div> <div id="example-5" class="demo"> <select v-model="selected"> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> <div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> <script> var data = { counter: 0 } Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', // 技术上 data 的确是一个函数了，因此 Vue 不会警告， // 但是我们返回给每个组件的实例的却引用了同一个data对象 data: function () { return {counter:0} } }) new Vue({ el: '#example-2' }) new Vue({ el: '#example-5', data: { selected: null } }) var vm01= new Vue({ el:"#vm01", data:{evenNumbers:[1,2,3,9,10]}, methods: { submit: function(){ alert(" use key 13 "); } } }) /* var vm01= new Vue({ el:"#vm01", data:{evenNumbers:[1,2,3,9,10]} }) */ /* var vm01= new Vue({ el:"#vm01", data:{numbers:[1,2,3,9]}, computed: { evenNumbers: function () { return this.numbers.filter(function (number) { //return number % 2 === 0 return number }) } } }) */ </script> </body> </html>