vueJS 一天上手到精通

近来用vuejs, vuejs和angular的不同在于它直接暴露了一个构造函数，而后在里面写各种config, 和模板再相对，而且vuejs也有对应的模板双向绑定机制，这样就使开发非常简单容易，虽然vuejs在概念上后来跟进了angular这样的框架，引入了各种分层理念，但在核心用法上却是非常简省的，所以我就把它用成一个单文件js库的形式， 至于 vuejs 自有的.vue文件 的形式，按照官网的步骤可以很快build出来。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InstantAlertETopicNew.aspx.cs"
    Inherits="CapMon.WebUI.InstantAlertETopicNew" MasterPageFile="~/MasterPages/ContentPage.master" EnableViewState="False" %>

<%@ Register Src="UserControls/FooterBand.ascx" TagName="FooterBand" TagPrefix="uc4" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="Styles/layout.css" rel="stylesheet" type="text/css" />
    <base target="_self">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="page_title" runat="Server">
    <asp:Literal ID="ltrlPageTitle" runat="server" Text="Capmon Instant Alert Topics"></asp:Literal>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="page_contents" runat="Server">
    <div id="app">

        <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

        <script src="Scripts/jquery.effects.core.js" type="text/javascript"></script>

        <script src="Scripts/jquery.effects.blind.js" type="text/javascript"></script>
        <script src="Scripts/vue.min.js" type="text/javascript"></script>


        <script type="text/javascript">
            var pageModel = {};
            topics=[{"MainTopic":"Accountancy","LstSubTopics":[{"EudoraMainCategoryID":0,"EmailTopicID":1,"EmailTopicCategoryID":1,"EmailTopicName":"Policy","EmailTopicCategoryName":"Accountancy"},{"EudoraMainCategoryID":0,"EmailTopicID":2,"EmailTopicCategoryID":1,"EmailTopicName":"Standards","EmailTopicCategoryName":"Accountancy"}],"InitialCheckedList":""}];
            pageModel.data = <%= data %>;

            var data=pageModel.data;
            var len=pageModel.data.length;
            var newData=[];
            var rows= Math.ceil(len/5);
            for (var i = 0; i < rows; i++) {
                newData.push([]);
            }
            for (var i = 0; i < len; i++) {
                newData[parseInt(i/5)].push(data[i]);
            }

        </script>
        {{msg}}
        <div>
            <div>
                <table class="content_wrapper_table" align="center" id="tblManageAgent" cellpadding="0px"
                    cellspacing="0px" border="0" width="900px">
                    <tr>
                        <td>
                            <div align="left" style="vertical-align: text-top;">
                                <table cellspacing="10px" width="100%" border="0">
                                    <tr>
                                        <td></td>
                                        <td>
                                            <p>
                                                <b>Instant Alert Service</b> – this premium service involves Capital Monitor News
                                                Managers analysing information, in real time and federal material only, classifying
                                                a document by <b>topic</b> and <b>sub-topic</b>.
                                            </p>
                                            <p>
                                            </p>
                                            <p>
                                                The <b>topic</b> is the <b>qualifier</b>. This means that, regardless of the type
                                                of document (i.e. press release, Hansard extract, transcript, report, legislation,
                                                etc) and author (government, opposition and minor parties, industry, associations
                                                and other key stakeholders into public policy) the document is assigned to the relevant
                                                topic/s – subtopic/s that document pertains to.
                                            </p>
                                            <p>
                                            </p>
                                            <p>
                                                To subscribe to this service or update your existing topics please complete the
                                                below form and a representative will be in contact ASAP.
                                            </p>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div>
                                <% if (CapMon.Utilities.Session.UserID != null && CapMon.Utilities.Session.UserID != 0)
                                   {
                                   }
                                   else
                                   { %>
                                <div style="background-color: Gray;">
                                    <div class="header_logo_container_instant">
                                    </div>
                                </div>
                                <% } %>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div align="left" style="vertical-align: text-top;">
                                <table style="border: 1px solid silver" border="0" cellspacing="10px" width="100%">
                                    <tr>
                                        <td align="center" class="hammers" valign="top" style="padding-right: 15px;">
                                            <a name="top" id="top"></a>
                                            <a v-for="(x, key, index) in data" v-bind:href="'#'+x.MainTopic.split(' ').join('').split('&').join('').split(',').join('').split('/').join('')" style="font-family: Arial; cursor: pointer; font-size: 12px; font-weight: bold">{{x.MainTopic}} |   </a>


                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div align="left" style="vertical-align: text-top;">
                                <table border="0px" cellspacing="10" width="100%">
                                    <tr>
                                        <td align="center">

                                            <table>

                                                <tr>
                                                    <td style="height: 10px"></td>
                                                </tr>
                                                <tr>

                                                    <td class="bowls">

                                                        <div v-for="topics in newData">
                                                            <table border="1" width="200px" v-for="(topic, key, index) in topics">
                                                                <tr>
                                                                    <td style="background-color: Silver; color: Black; height: 40px; font-weight: bold;"
                                                                        align="left" valign="middle">
                                                                        <table>
                                                                            <tr>
                                                                                <td class="topictitle" v-bind:id="topic.MainTopic.split(' ').join('').split('&').join('').split(',').join('').split('/').join('')">
                                                                                    <input type="checkbox" class="mainall" v-on:click="checkall(topic)" />{{topic.MainTopic}}
                                                                                </td>
                                                                                <td></td>
                                                                            </tr>
                                                                        </table>

                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td align="left" valign="middle">
                                                                        <div style="height: 150px; overflow-x: hidden; overflow-y: auto; border- 1px; border-color: Silver;">
                                                                            <div v-for="sub in topic.LstSubTopics">
                                                                                <input type="checkbox" v-model="selectedIs" v-bind:value="sub.EmailTopicID" />{{sub.EmailTopicName}}
                                                                            </div>
                                                                        </div>

                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="height: 25px;" align="left" valign="top">
                                                                        <a href="#top" style="font-family: Arial; font-size: 12px; font-weight: bold">Return
                                                                                        to Top</a>
                                                                    </td>
                                                                </tr>
                                                            </table>

                                                        </div>


                                                    </td>

                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div id="divDetails" runat="server" style="text-align: left;">
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div align="left" style="vertical-align: text-top;">
                                                            <table style="border: 0px solid silver" border="0" cellspacing="10px" width="100%">
                                                                <tr>
                                                                    <td align="center">
                                                                        <asp:Button CssClass="primary" ID="btnSendMail" runat="server" Text="Submit" TabIndex="9"
                                                                            OnClick="btnSendMail_Click" />
                                                                        <asp:Button CssClass="primary" ID="btnSave" runat="server" Text="Submit" TabIndex="9"
                                                                            OnClick="btnSave_Click" />
                                                                        <asp:Button CssClass="secondary" ID="btnReset" runat="server" Text="Reset" OnClick="btnReset_Click"
                                                                            CausesValidation="false" />
                                                                        <input type="button" v-on:click="oscillation()" class="paimary" value="submitTopics" />
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td align="center">

                                                                        <table>
                                                                            <tr>
                                                                                <td>Please wait, loading...
                                                                                </td>
                                                                                <td>
                                                                                    <img id="CategoryDropwodnUpdateProgressImg" src="images/button_refresh.gif" alt="" />
                                                                                </td>
                                                                            </tr>
                                                                        </table>

                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" align="center">
                                                        <asp:Label runat="server" ID="lblMessage" ForeColor="Red"></asp:Label>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <% if (CapMon.Utilities.Session.UserID != null && CapMon.Utilities.Session.UserID != 0)
                   {
                   }
                   else
                   { %>
                <uc4:FooterBand ID="FooterBand1" runat="server" />
                <% } %>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {msg:'hello Calos, you are so good, oh my god, how can you be so good.',topics: newData,ok:true,selectedIs:[]},
            mounted: function() {            
                $('.hammers a').click(function () {
                    $('.bowls .topictitle').css('color','black');
                    $($(this).attr('href')).css('color','red');
                });         
            },  
            methods:{
                oscillation:function () {
                    window.opener.document.getElementById('selectedtopics').value=this.selectedIs.join(',');
                    window.close();
                },checkall:function (topic) { 
                    var _this=this;var ids=_this.selectedIs;
                    topic.LstSubTopics.forEach(item=>{
                        _this.selectedIs.indexOf(item.EmailTopicID)>-1?ids.splice(ids.indexOf(item.EmailTopicID),1):_this.selectedIs.push(item.EmailTopicID);
                });
        
        }
        }
        })

        

    </script>
</asp:Content>