我们放了四天假，刚好借此机会，系统的了解一下VUE.JS。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="demo.css" /> </head> <body> <div id="app"> <p>123</p> </div> <template id="tpl"> <div> <p>This is a tmp from template tag. </p> <span>Hello {{name}}</span> <span v-once="name">{{name}}</span> <div v-bind:id="'id-' + id"> your nkow </div> <img v-bind:src="avatar"/> <button v-on:click.stop="alert">alert</button> {{firstName}} {{lastName}} {{fullName}} {{price}} <my-component title="myTitle" content="myContent"></my-component> </div> </template> </body> <script src="http://cdn.bootcss.com/vue/2.2.4/vue.min.js"></script> <script> var Myconponent = Vue.component('my-component', { props: ['title', 'content'], data: function() { return { desc: '123' } }, template: '<div>\ <h1>title: {{title}}</h1> \ <p>content: {{content}}</p> \ <p>desc: {{desc}}</p> \ </div>' }) var data = {id : 1, index: 0, name: 'Vue', avatar: 'http://www.baidu.com/', count: [1, 2, 3, 4, 5], names: ['Vue1.0', 'Vue2.0'], firstName: "Gavin", lastName: "CLY", cents: 100, items: [ {name: 'Vue1.0', version: '1,0'}, {name: 'Vue1.1', version: '1.0'} ]}; var vm = new Vue({ el: "#app", template: "#tpl", data: data, beforeCreate: function() { console.log("beforeCreate"); }, computed: { fullName: function() { return this.firstName + " " + this.lastName; }, price: { set: function(newValue) { this.cents = newValue * 100; }, get: function() { return (this.cents/100); } } }, methods: { alert: function() { alert(this.id); } } }) </script> </html>
