vue2.js初探

最新推荐文章于 2024-08-29 15:22:59 发布

王奕然

最新推荐文章于 2024-08-29 15:22:59 发布

阅读量874

点赞数

文章标签： vue2.js

本文链接：https://blog.csdn.net/wangyuxuan_java/article/details/79587806

版权

今天学习了一下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>