Vue 简单实用---代码可以直接用
<!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 简单实用---代码可以直接用的更多相关文章
- vue简单实例代码
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 经验分享：10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
- 简单实用的HTML代码
简单实用的HTML代码 一.HTML各种命令的代码: 1.文本标签(命令) <pre></pre> 创建预格式化文本 <h1></h1> 创建最大的标题 ...
- C#反射实现 C# 反射 判断类的延伸类型 使用代码生成工具Database2Sharp快速生成工作流模块控制器和视图代码 C# ADO.NET的SqlDataReader对象,判断是否包含指定字段 页面中添加锚点的几种方式 .net 简单实用Log4net（多个日志配置文件） C# 常用小点
C#反射实现 一.反射概念: 1.概念: 反射,通俗的讲就是我们在只知道一个对象的内部而不了解内部结构的情况下,通过反射这个技术可以使我们明确这个对象的内部实现. 在.NET中,反射是重要的机制, ...
- 简单实用的php分页函数代码
一个简单实用的php分页函数,分页导航中可以默认为空,在函数内部再设置本页URL. 代码: <?php /** * 分页 * @category 功能 * @param $totle:信息总数 ...
- 这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这样 ...
- vue的技巧代码
转载:https://segmentfault.com/a/1190000014085613 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList ...
- VUE基础实用技巧
Vue以前听说过,有了解过一点.当时还在热衷于原生JavaScript去写一些方法的封装,不是为啥,就感觉这样很帅,后面多多少少接触了一些JQuery的用法,到现在为止,JavaScript原生封装的 ...
随机推荐
- 51Nod - 1821：最优集合 （求第一个不能被表示为多个数的和的数）（不错的动脑题）
一个集合S的优美值定义为:最大的x,满足对于任意i∈1,x1,x,都存在一个S的子集S',使得S'中元素之和为i. 给定n个集合,对于每一次询问,指定一个集合S1和一个集合S2,以及一个数k,要求选择 ...
- nginx开发_ngx_http_script源码解析
功能简介 nginx中有很多配置项支持以变量的形式存在,在运行时根据实时值进行处理.例如如下配置: location / { sub_filter '<a href="http://1 ...
- cogs1070玻璃球游戏
1070. [焦作一中2012] 玻璃球游戏 ★ 输入文件:marbles.in 输出文件:marbles.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述] 小x ...
- 各个国家 不同字符集的unicode 编码范围
原文地址:http://blog.csdn.NET/xzl04/article/details/6307416 0000-007F:C0控制符及基本拉丁文 (C0 Control and Basic ...
- 爬虫库之BeautifulSoup学习（五）
css选择器: 我们在写 CSS 时,标签名不加任何修饰,类名前加点,id名前加 #,在这里我们也可以利用类似的方法来筛选元素,用到的方法是 soup.select(),返回类型是 list 1)通过 ...
- Cannot resolve symbol 'log'
IntelliJ IDEA 写实体类时使用toString报错,报异常: 原因:缺少commons-lang3-3.8.1.jar包. 下载路径:http://commons.apache.org/p ...
- HrrpClient使用
使用HttpClient获取网页内容的过程 1.创建一个CloseableHttpClient类的实例: 2.使用这个实例执行HTTP请求,得到一个HttpResponse的实例: 3.最后,通过Ht ...
- 1.17 shell action
一.shell action 1. ##job.properties nameNode=hdfs://hadoop-senior.ibeifeng.com:8020 jobTracker=hadoop ...
- 洛谷 - P5429 - Fence Planning - 并查集
https://www.luogu.org/problemnew/show/P5429 很明显是要维护整个连通块的共同性质,并查集一搞就完事了. #include<bits/stdc++.h&g ...
- Android NDK开发指南（二）Android.mk文件
http://www.cnblogs.com/yaozhongxiao/archive/2012/03/06/2382225.html 1. 概述 Android.mk文件是用来描述build sy ...