vue2.js初探
干茂才
今天学习了一下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>
类似资料：