<!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. C++之萃取技术(traits)

    为什么需要类型萃取(特化) 前面我们提到了迭代器,它是一个行为类似于smart pointer之类的东西,主要用于对STL容器中的对象进行访问,而且不暴露容器中的内部结构,而迭代器所指对象的型别称为该 ...

  2. Spring 注释标签@Resource @Autowired 和@Inject的区别

    一些spring的开发人员在使用这三个标签进行注入的时候感到困惑.我来尝试解释一下这三个注解的主要区别.事实上,这三者非常相似,只存在一些微小的差别.在稍后的文章中会进行解释. @Resource-在 ...

  3. CSS:CSS 颜色

    ylbtech-CSS:CSS 颜色 1.返回顶部 1. 颜色是通过对红.绿和蓝光的组合来显示的. 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光 ...

  4. Win7点击文件夹右键可打开cmd控制台,并获取当前目录

    当我们用cmd时,有时要切换到某个文件夹的目录,可以在当前目录下,按住shift单击右键打开控制台,也可以在鼠标右键中添加cmd启动命令: 1.在开始搜索框输入regedit,打开注册表: 2.打开 ...

  5. 获取access_token时却报出下列错误信息:{"errcode":40164,"errmsg":"invalid ip 61.172.68.219, not in whitelist hint: [KJZfAa0644e575]"},以及一些其他报错

    获取access_token时却报出下列错误信息:{"errcode":40164,"errmsg":"invalid ip 61.172.68.21 ...

  6. 华为codecraft2018总结

    华为codecraft2018总结 想来也是参加了第二次了,自己还是那么的菜.总结下今年的比赛,得奖是不存在的了,但是收获还是有的. 代码相关的都在这里了:https://github.com/hui ...

  7. idea创建vue项目,Terminal安装npm的淘宝镜像:'npm' 不是内部或外部命令,也不是可运行的程序 或批处理文件。

    原因: 安装node.js时,不是默认路径安装,环境变量找不到npm,需要改环境变量配置: 原下: 找到安装node.js的安装路径: 改后: 成功: npm i -g cnpm --registry ...

  8. 【Hive】Hive笔记:Hive调优总结——数据倾斜,join表连接优化

    数据倾斜即为数据在节点上分布不均,是常见的优化过程中常见的需要解决的问题.常见的Hive调优的方法:列剪裁.Map Join操作. Group By操作.合并小文件. 一.表现 1.任务进度长度为99 ...

  9. 打造个人IP: 开源项目网站构建框架

    前言 您是否正在寻找有关如何创建博客网站: 个人博客 或者 开源项目官网 : Dubbo, Vue.js的构建框架? 在这篇文章我将向您展示如何创建一个美观并且实用的开源博客/开源项目官网构建框架!近 ...

  10. lightoj 1096【矩阵快速幂(作为以后的模板)】

    基础矩阵快速幂何必看题解 #include <bits/stdc++.h> using namespace std; /* 0 1 2 3 4 5 6 7 0 0 0 */ const i ...