<!DOCTYPE html>
<html> <head>
<title></title>
<script src="https://unpkg.com/vue"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var app = new Vue({
el: '#app1',
data: {
message: "Hello Hu"
} });
app1 = new Vue({
el: "#app-2",
data: {
message: "Now is" + new Date().toLocaleString()
}
});
app3 = new Vue({
el: "#app-3",
data: {
seen: true
}
});
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其他什么人吃的东西' }
]
}
})
});
</script>
</head> <body>
<div id="app1">
<p>{{ message }}</p>
</div>
<div id="app-2">
<span v-bind:title="message">
看看时间
</span>
</div>
<div id="app-3">
<div>
<p v-if="seen">你看到我了</p>
</div>
</div>
<ol>
<todo-item></todo-item>
</ol>
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
</todo-item>
</ol>
</div>
</body> </html>

  

Vue 简单实用---代码可以直接用的更多相关文章

  1. vue简单实例代码

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  2. 经验分享:10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  3. 10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...

  4. 简单实用的HTML代码

    简单实用的HTML代码 一.HTML各种命令的代码: 1.文本标签(命令) <pre></pre> 创建预格式化文本 <h1></h1> 创建最大的标题 ...

  5. C#反射实现 C# 反射 判断类的延伸类型 使用代码生成工具Database2Sharp快速生成工作流模块控制器和视图代码 C# ADO.NET的SqlDataReader对象,判断是否包含指定字段 页面中添加锚点的几种方式 .net 简单实用Log4net(多个日志配置文件) C# 常用小点

    C#反射实现   一.反射概念: 1.概念: 反射,通俗的讲就是我们在只知道一个对象的内部而不了解内部结构的情况下,通过反射这个技术可以使我们明确这个对象的内部实现. 在.NET中,反射是重要的机制, ...

  6. 简单实用的php分页函数代码

    一个简单实用的php分页函数,分页导航中可以默认为空,在函数内部再设置本页URL. 代码: <?php /** * 分页 * @category 功能 * @param $totle:信息总数 ...

  7. 这两天老是有兄弟问到Vue的登陆和注册,登陆成功留在首页,没有登录回到登录页面,现在我用最简单实用的方法实现(两分钟技就看懂)

    其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这样 ...

  8. vue的技巧代码

    转载:https://segmentfault.com/a/1190000014085613 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList ...

  9. VUE基础实用技巧

    Vue以前听说过,有了解过一点.当时还在热衷于原生JavaScript去写一些方法的封装,不是为啥,就感觉这样很帅,后面多多少少接触了一些JQuery的用法,到现在为止,JavaScript原生封装的 ...

随机推荐

  1. 通过Chrome浏览器进行android调试/Remote Debugging on Android with Chrome

    The way your web content behaves on mobile can be dramatically different from the desktop experience ...

  2. codevs 1497取余运算

    1497 取余运算  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamon   题目描述 Description 输入b,p,k的值,编程计算bp mod k的值. ...

  3. MongoDB 2.6复制集单节点部署(三)

    MongoDB在单节点中也可以做复制集,但是仅限于测试实验,最大的好处就是部署方便快速,可以随便添加新节点,节省资源.在这里我使用的是MongoDB 2.6版本进行复制集实验(但MongoDB配置文件 ...

  4. PHP多种序列化/反序列化的方法 json_encode json_decode

    序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更具维护性. 1. serialize和 ...

  5. HDU1496(巧妙hash)

    Equations Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  6. bzoj5102

    $贪心$ $按左端点排序.$ $当我们钦定了最右的左端点,那么自然希望右端点尽量靠右$ $考虑之前的区间,那么我们相当于选之前的区间中第k大的右端点$ $堆维护一下就可以了,每次把新的元素放进堆,如果 ...

  7. Identity Server 4 原理和实战(完结)_Hybrid Flow 实例, Claims, 角色授权和策略授权

    4分50 建立客户端 不需要身份认证 客户端叫做HybirdClient 配置IdentityServer服务端,先把客户端添加上 把userClaims添加到token里面 然后运行服务端就可以了 ...

  8. Subresource Integrity(子资源一致性)和JS DDos 攻击

    以下文章转载自 http://www.cnblogs.com/zoucaitou/p/4505483.html 和 http://www.puronglong.com/blog//2015/04/12 ...

  9. HTML5资料整理 [From luics]

    来自http://www.cnblogs.com/luics/,新浪微博@徐凯-鬼道 HTML5资料整理   项目组要做html5这块,花了一周左右时间收集的,快有一年时间了,部分内容需要更新,仅供参 ...

  10. 为Docker容器设置静态IP

    此文已由作者袁欢授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 创建docker容器 docker run -it --name=yh -h yh --net=none de ...