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":,"EmailTopicID":,"EmailTopicCategoryID":,"EmailTopicName":"Policy","EmailTopicCategoryName":"Accountancy"},{"EudoraMainCategoryID":,"EmailTopicID":,"EmailTopicCategoryID":,"EmailTopicName":"Standards","EmailTopicCategoryName":"Accountancy"}],"InitialCheckedList":""}];
pageModel.data = <%= data %>; var data=pageModel.data;
var len=pageModel.data.length;
var newData=[];
var rows= Math.ceil(len/);
for (var i = ; i < rows; i++) {
newData.push([]);
}
for (var i = ; i < len; i++) {
newData[parseInt(i/)].push(data[i]);
} </script>
{{msg}}
<div>
<div>
<table class="content_wrapper_table" align="center" id="tblManageAgent" cellpadding="0px"
cellspacing="0px" border="" width="900px">
<tr>
<td>
<div align="left" style="vertical-align: text-top;">
<table cellspacing="10px" width="100%" border="">
<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 != )
{
}
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="" 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="" 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="" 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-width: 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="" cellspacing="10px" width="100%">
<tr>
<td align="center">
<asp:Button CssClass="primary" ID="btnSendMail" runat="server" Text="Submit" TabIndex=""
OnClick="btnSendMail_Click" />
<asp:Button CssClass="primary" ID="btnSave" runat="server" Text="Submit" TabIndex=""
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="data:images/button_refresh.gif" alt="" />
</td>
</tr>
</table> </td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="" 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 != )
{
}
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)>-?ids.splice(ids.indexOf(item.EmailTopicID),):_this.selectedIs.push(item.EmailTopicID);
}); }
}
}) </script>
</asp:Content>
vueJS 一天上手到精通的更多相关文章
- VueJs(1)---快速上手VueJs
[VueJs入门] 版权声明 首先申明:此篇博客不是本人原创,只是最近开始学习vue.jS,看到有作者写的很不错,我仅在它的基础上仅仅是修改了样式 原文博客地址:https://blog.csdn.n ...
- 什么是vuejs之重新认识vuejs
什么是vuejs? 1.它是一个轻量级的mvvm框架 2.数据驱动+组件化的前端开发 3.github超过25k+的stat数,社区完善 4.vuejs更轻量,gzip后大小只有20k+ 5.vuej ...
- ubuntu入门
Ubuntu的发音 Ubuntu,源于非洲祖鲁人和科萨人的语言,发作 oo-boon-too 的音.了解发音是有意义的,您不是第一个为此困惑的人,当然,也不会是最后一个:) 大多数的美国人读 ubun ...
- Unity中使用WebView
Unity中使用WebView @(设计) 需求,最近游戏中需要引入H5直播页面和更新比较频繁的赛事页面,需求包括:加密传参数.和Unity交互,在Unity框架下其实有几种方案: 内置函数Appli ...
- 还在用GCD？来看看NSOperation吧
在iOS开发中,谈到多线程,大家第一时间想到的一定是GCD.GCD固然是一套强大的多线程解决方案,能够解决绝大多数的多线程问题,但是他易于上手难于精通且到处是坑的特点也注定了想熟练使用它有一定的难度. ...
- Ubuntu完全教程，让你成为Ubuntu高手！
Ubuntu的发音 Ubuntu,源于非洲祖鲁人和科萨人的语言,发作 oo-boon-too 的音.了解发音是有意义的,您不是第一个为此困惑的人,当然,也不会是最后一个:) 大多数的美国人读 ubun ...
- PHP程序员遇到职业问题时，是离职？还是坚持？
PHP程序员遇到职业问题时,是离职?还是坚持? 初级php程序员最担心在公司里遇到原本其他程序员开发的项目,他们“跑路”以后的工作就由新程序员完成.而新员工也不懂内部的逻辑,酱紫让程序员很难处理后续的 ...
- 一个完整的Installshield安装程序实例-转
一个完整的Installshield安装程序实例—艾泽拉斯之海洋女神出品(一)---基本设置一 前言 Installshield可以说是最好的做安装程序的商业软件之一,不过因为功能的太过于强大,以至于 ...
- [转]一个完整的Installshield安装程序实例
@import url("http://files.cnblogs.com/files/go-jzg/vs.css"); --> Installshield安装程序实例—基本 ...
随机推荐
- 责任链模式的使用-Netty ChannelPipeline和Mina IoFilterChain分析
本文来自网易云社区 作者:乔安然 1. Chain of Responsiblity 定义: 使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将这个对象连成一条链,并沿着这条链 ...
- css的水平居中和垂直居中总结
Html代码: <div class="md-warp"> <div class="md-main">块级元素</div> ...
- Linux服务架设篇--traceroute命令
作用: 查看数据包在传输过程中经过了哪些IP地址的路由器.网关. 工作原理: 首先向远程主机发送TTL为1的UDP数据包,按照协议规定,路由器收到数据包,TTL值减1,这时TTL就为0,路由器就会丢弃 ...
- Gated Recurrent Unit (GRU)
Gated Recurrent Unit (GRU) Outline Backgr ...
- 将EXCEL表中的数据轻松导入Mysql数据表
转载自:http://blog.163.com/dielianjun@126/blog/static/164250113201042310181431/ 在网络上有不较多的方法,在此介绍我已经验证的方 ...
- Android Service 服务（二）—— BroadcastReceiver
(转自:http://blog.csdn.net/ithomer/article/details/7365147) 一. BroadcastReceiver简介 BroadcastReceiver,用 ...
- Java 无法初始化Connection的问题
通过断点调试捕获错误消息:The server time zone value '�й���ʱ��' is unrecognized or represents more than one time ...
- 【转】深入理解Java中的String
原文链接:http://www.cnblogs.com/xiaoxi/p/6036701.html 一.String类 想要了解一个类,最好的办法就是看这个类的实现源代码,来看一下String类的源码 ...
- div加了float后 四个特性
1.宽度变成0 2.左漂浮 或者右漂浮 3.后面的标签占据原来的位置 4对前面的div没有影响 他会浮动到前面div下面
- bootstrap table表格属性、列属性、事件、方法
留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...