今天学习了一下vue2.js,感觉很好用。
一个是把相同的功能组件化了,把他定义一个标签,不用多次开发重复的代码,直接加标签就可以了。
还有就是他把数据和标签的显示修改完全分开了,之前用jQuery开发,如果数据变动了,需要用jquery回调事件处理响应的显示的html要随之变动,而现在只改数据,完全不用管显示层的事了。
组件的介绍
https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events
数据的响应模式
https://vuejs.org/v2/guide/instance.html#Data-and-Methods
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="example"> <click-table></click-table> <score-table></score-table> </div> <!-- Create an instance of the todo-item component --> </body> </html> <script> var data = { subjects:[ {title:"科目1",score:10}, {title:"科目2",score:11} ] }; Vue.component('score-table', { template: '<table><tr v-for=\'subject in subjects\'> ' + '<th v-for=\'title in subject\'>{{title}}</th>'+ ' <td v-for=\'score in subject\'>{{score}}</td> ' + ' </tr></table>', // data is technically a function, so Vue won't // complain, but we return the same object // reference for each component instance data: function () { return data; } }) Vue.component('change',{ template: '<span>ccc</span>' } ); Vue.component('click-table',{ template: '<button v-on:click="ajax">click</button>', data:{}, methods: { ajax:function () { data.subjects[0].title="科目三"; } }}); // create a root instance new Vue({ el: '#example' }) </script>