{{define "chkUrl"}}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>chkUrl--脚本管理</title>
    <link rel="stylesheet" href="/static/WeUI_files/weui.css">
    <link rel="stylesheet" href="/static/WeUI_files/example.css">
</head>
<body style="margin:1em ;">
<div class="weui-cells page__category-content">
    <div class="page__hd">
        <h1 class="page__title">chkUrl</h1>
        <p class="page__desc">检测url状态信息</p>
    </div>
</div>
<div class="weui-cells page__category-content">
{{range .}}
    <form action="/chkUid" method="POST">
        <div class="weui-cell weui-cell_swiped">
            <div class="weui-flex">
                <div class="weui-flex__item">
                    <div class="placeholder">{{.Host}}</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">{{.Port}}</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">{{.Path}}</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">{{.ScriptName}}</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder"><input class="weui-input" type="number" pattern="[0-9]*"
                                                    value="weui input error"
                                                    placeholder="请输入uid（0-9）" style="margin-left: 2em;" name="uid">
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">
                        <button class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:"
                                style="color: #FFF;text-align: center;" type="submit">运行
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{{end}}
</div>
<div id="app">
@@message@@
</div>
</body>

</html>
<script src="/static/js/vue.js"></script>
<script>
    var app = new Vue({
        delimiters: ["@@", "@@"],
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
{{end}}


extend选项和delimiters选项 - CSDN博客 https://blog.csdn.net/dear_mr/article/details/72667749

id重复  
{{define "chkUrl"}}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>chkUrl--脚本管理</title>
    <link rel="stylesheet" href="/static/WeUI_files/weui.css">
    <link rel="stylesheet" href="/static/WeUI_files/example.css">
</head>
<body style="margin:1em ;">
<div class="weui-cells page__category-content">
    <div class="page__hd">
        <h1 class="page__title">chkUrl</h1>
        <p class="page__desc">检测url状态信息</p>
    </div>
</div>
<div class="weui-cells page__category-content">
{{range .}}
{{/*<form action="/chkUid" method="POST">*/}}
    <div class="weui-cell weui-cell_swiped" id="appT">
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder">{{.Host}}</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">{{.Port}}</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">{{.Path}}</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">{{.ScriptName}}</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder"><input class="weui-input" type="number" pattern="[0-9]*"
                                                value="weui input error"
                                                placeholder="请输入uid（0-9）" style="margin-left: 2em;" name="uid">
                </div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">
                    <button class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:"
                            style="color: #FFF;text-align: center;" type="submit" v-on:click="t()">运行    @{message}@
                    </button>
                </div>
            </div>
        </div>
    </div>
{{/*</form>*/}}
{{end}}
</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
    let app = new Vue(
            {
                delimiters: ['@{', '}@'],
                el: '#appT',
                data: {message: 'Hello Vue!'},
                methods: {
                            t: function() {
                                        this.$http.get('/testVue', {foo: 'bar'}).then(
                                            response => {
                                            // get status
                                            response.status;
                                            // get status text
                                            response.statusText;
                                            // get 'Expires' header
                                            response.headers.get('Expires');
                                            // get body data
                                            //注意服务端为“Email”,
                                            // response.body.Email; 数据不被解析
                                            app.message = response.body.email;
                                            },
                                            response =>{// error callback
                                            }
                                    )
                                }
                            },
            }
    );
</script>
{{end}}




												


											
extend选项和delimiters选项  vue  数据绑定  html form 对比  id重复的更多相关文章
	

    
								
  1. Vue数据绑定(一)
		
    Contents Vue作为当下炙手可热的前端三大框架之一,一直都想深入研究一下其内部的实现原理,去学习MVVM模式的精髓.如果说MVVM是当下最流行的图形用户界面开发模式,那么数据绑定则是这一模式的 ...
    
		
    2. 
						
  2. (三)vue数据绑定及相应的命令
		
    vue数据绑定及相应的命令 {{ Text }} 双括号进行数据渲染 动态绑定数据 例如:{{message}} data: { return{ message: 'Hello Vue!' } } 2 ...
    
		
    3. 
						
  3. Vue数据绑定
		
    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定 (1)写法一: {{message}}, ...
    
		
    4. 
						
  4. 浅析vue数据绑定
		
    前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...
    
		
    5. 
						
  5. Vue数据绑定和响应式原理
		
    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
    
		
    6. 
						
  6. zencart后台管理中选项名称和选项内容和属性控制页面出错解决办法 WARNING: An Error occurred, please refresh the page and try again
		
    后台管理中选项名称和选项内容和属性控制出现以下错误的解决办法WARNING: An Error occurred, please refresh the page and try again zen  ...
    
		
    7. 
						
  7. 17: VUE数据绑定 与 Object.defineProperty
		
    VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...
    
		
    8. 
						
  8. Ceph 存储集群1-配置：硬盘和文件系统、配置 Ceph、网络选项、认证选项和监控器选项
		
    所有 Ceph 部署都始于 Ceph 存储集群.基于 RADOS 的 Ceph 对象存储集群包括两类守护进程: 1.对象存储守护进程( OSD )把存储节点上的数据存储为对象: 2.Ceph 监视器( ...
    
		
    9. 
						
  9. 「每日一题」有人上次在dy面试，面试官问我：vue数据绑定的实现原理。你说我该如何回答？
		
    关注「松宝写代码」,精选好文,每日一题 ​时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 递归，回溯，DFS，BFS的理解和模板
			
    LeetCode 里面很大一部分题目都是属于这个范围,例如Path Sum用的就是递归+DFS,Path Sum2用的是递归+DFS+回溯 这里参考了一些网上写得很不错的文章,总结一下理解与模板 递归 ...
    
			
    2. 
						
  2. LeetCode OJ--Merge Two Sorted Lists
			
    http://oj.leetcode.com/problems/merge-two-sorted-lists/ 有序链表的归并排序 #include <iostream> using na ...
    
			
    3. 
						
  3. WinRT 开发：在 MVVM 模式中，关于绑定的几处技巧
			
    以下会提到三个绑定的技巧,分别是 在 ListView 中为 ListViewItem 的 MenuFlyout 绑定 Command: 在 ListView 的 事件中绑定所选择项目,即其 Sele ...
    
			
    4. 
						
  4. (2)html 块类
			
    span span是内联元素,内联元素的特点:在显示时通常不会以新行开始 div div是块级元素,块级元素会换新行 class 设置 <head> <style> .citi ...
    
			
    5. 
						
  5. Network | parity bit
			
    奇偶校验位是一个表示给定位数的二进制数中1的个数是奇数还是偶数的二进制数.奇偶校验位是最简单的错误检测码. A parity bit, or check bit is a bit added to t ...
    
			
    6. 
						
  6. POJ 3268 Silver Cow Party 最短路
			
    原题链接:http://poj.org/problem?id=3268 Silver Cow Party Time Limit: 2000MS   Memory Limit: 65536K Total ...
    
			
    7. 
						
  7. CDOJ_327 BerOS file system
			
    原题地址:http://acm.uestc.edu.cn/#/problem/show/327 The new operating system BerOS has a nice feature. I ...
    
			
    8. 
						
  8. about乘法逆元
			
    本博客部分摘自   hwim 定义 乘法逆元的定义:若存在正整数a,b,p, 满足ab = 1(mod p), 则称a 是b 的乘法逆元, 或称b 是a 的乘法逆元.b ≡ a-1 (mod p),a ...
    
			
    9. 
						
  9. IntelliJ IDEA提示：Class JavaLaunchHelper is implemented in both的错误解决
			
    这个错误是Mac下特有的,并且据说是一个老Bug,不影响使用. 修复方法: Help->Edit Custom Properties,没有这个properties文件的话,IDEA会提示创建,然 ...
    
			
    10. 
						
  10. 6.【nuxt起步】-完成一个静态的页面
			
    1.接下来新建/component/maincontent.vue 把这些html代码copy到maincontent.vue 发现格式比较难看,就格式化一下 2.插件安装 beautify,安装后重 ...
    
			
    11.