vue简单demo
为了学习基础语法，我并没有用vue-cli脚手架来vue init [基于什么类型] [项目名称]初始化项目，而是直接<script>../vue.js</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
模板语法(各种指令、Mustache)
<div v-bind:class="clas">666</div>
<button v-on:click="say(678)">按钮</button> <p></p>计算属性和观察者
<div>
<input type="text" v-model="ipt">
</div> <div>{{toUp}}</div>
<input type="text" v-model="ipt2"> <p></p>自定义指令
<div v-color="'green'">用于测试</div> <p></p>自定义组件[简单]
<div>
<simple></simple>
</div> <p></p>自定义组件[复杂]
<div>
<do-list v-bind:data="list"></do-list>
</div>
</div>
<script src="./bower_components/vue/dist/vue.min.js"></script>
<script>
// 注册一个全局自定义【指令】 v-color
Vue.directive("color", function(el,binding){ /* el就是页面的dom */
console.log(binding)
el.style.color = binding.value;
}) // 注册一个全局自定义组件 v-color
Vue.component("simple",Vue.extend({
template: '<div>A custom component!</div>'
})) // 注册一个复杂全局自定义【组件】 v-color
Vue.component("do-list",Vue.extend({
//(父子传参)子组件要显式地用 props 选项声明它预期的数据：
props: ['data'],
template: `
<ul>
<li v-for="item in data">{{item.name}}</li>
</ul>
`
})) //一个vue的实例
new Vue({
el: '#app', //model
data: {
msg: 'Hello!',
clas:'active',
ipt:'dsh',
ipt2:'wx',
list:[
{name:'小明',age:20},
{name:'小红',age:16}
]
}, //计算属性
computed:{
toUp:function() {
var that=this;
var temp=that.ipt.toUpperCase();
return temp;
}
}, //函数
methods:{
say:function(i) {
alert(i)
}
}, //观察者
watch:{
// 如果 `ipt2` 发生改变，这个函数就会运行
ipt2:function (newVal) {
this.say(newVal)
//console.log(this.ipt2);
}
} //至于路由，我暂时先用官方支持的 vue-router 库，而不用基础的自带路由
}) </script>
</body>
</html>
动态显示时间和过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
当前时间：{{nowDate | dataFmt('yyyy-MM-dd HH:mm:ss')}}
</div>
<script src="./bower_components/vue/dist/vue.min.js"></script>
<script>
// vue2.0后，删除了所有内置的过滤器，都需要自己定义
Vue.filter('dataFmt',function(data,type){
that = new Date(data)
var o = {
"M+": that.getMonth() + 1, //月份
"d+": that.getDate(), //日
"h+": that.getHours() % 12 == 0 ? 12 : that.getHours() % 12, //小时
"H+": that.getHours(), //小时
"m+": that.getMinutes(), //分
"s+": that.getSeconds(), //秒
"q+": Math.floor((that.getMonth() + 3) / 3), //季度
"S": that.getMilliseconds() //毫秒
};
var week = { "0": "\u65e5", "1": "\u4e00", "2": "\u4e8c", "3": "\u4e09", "4": "\u56db", "5": "\u4e94", "6": "\u516d" };
if (/(y+)/.test(type)) { type = type.replace(RegExp.$1, (that.getFullYear() + "").substr(4 - RegExp.$1.length)); }
if (/(E+)/.test(type)) { type = type.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f" : "\u5468") : "") + '周' + week[that.getDay() + ""]); }
for (var k in o) {
if (new RegExp("(" + k + ")").test(type)) { type = type.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); }
}
return type;
}) //一个vue的实例
new Vue({
el: '#app',
data: {
nowDate:new Date()
}, //生命周期函数：动态显示时间，要不然时间是死的，刷新页面才会更新
mounted: function () {
var that=this;
setInterval(function () {
that.nowDate=new Date();
},1000)
}
})
</script>
</body>
</html>
vue简单demo的更多相关文章
- vue+node+es6+webpack创建简单vue的demo
闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...
- 一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
- 设计模式之单例模式的简单demo
/* * 设计模式之单例模式的简单demo */ class Single { /* * 创建一个本类对象. * 和get/set方法思想一样,类不能直接调用对象 * 所以用private限制权限 * ...
- Spring的简单demo
---------------------------------------- 开发一个Spring的简单Demo,具体的步骤如下: 1.构造一个maven项目 2.在maven项目的pom.xml ...
- 使用Spring缓存的简单Demo
使用Spring缓存的简单Demo 1. 首先创建Maven工程,在Pom中配置 <dependency> <groupId>org.springframework</g ...
- Managed DirectX中的DirectShow应用（简单Demo及源码)
阅读目录 介绍 准备工作 环境搭建 简单Demo 显示效果 其他 Demo下载 介绍 DirectX是Microsoft开发的基于Windows平台的一组API,它是为高速的实时动画渲染.交互式音乐和 ...
- angular实现了一个简单demo，angular-weibo-favorites
前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...
- Solr配置与简单Demo[转]
Solr配置与简单Demo 简介: solr是基于Lucene Java搜索库的企业级全文搜索引擎,目前是apache的一个项目.它的官方网址在http://lucene.apache.org/sol ...
- 二维码简单Demo
二维码简单Demo 一.视图 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name=&qu ...
随机推荐
- 用 HTML5+ payment方法支付宝支付遇到的坑
用 HTML5+ payment方法碰到的第一个坑就是如果是支付宝的话签约那种支付方式. 因为 Dcloud的文档没有更新的原因你可以看到他们说的都是‘移动支付’,但是你去支付宝平台的时候看到的根本就 ...
- Python背景知识——学习笔记
诞生于1989圣诞节,阿姆斯特丹.Guido van Rossum(吉多·范罗苏姆). Python Python:解释型.面向对象.动态数据类型 的 高级程序设计语言. 解释型语言:运行的时候将程序 ...
- PowerShell----Automatic_Variables(预定义变量)
以下这些变量是由powershell创建和维护的.ls Variable: 可以获取到所有默认的变量, 每个版本的Powershell可能有差异 $$包含会话所收到的最后一行中的最后一个令牌. $? ...
- THINKPHP5获取设置缓存的例子
在THINKPHP5中 缓存的配置放在了config.php文件中 代码如下 如何设置缓存? 可以使用静态方法 Cache::set('key',$value,3600);//存储缓存 Cache:: ...
- 码农深耕 - 说说IDisposable
概要 C#提供了方便的垃圾回收机制,使我们几乎不再需要为资源管理费心.可事实上,能被垃圾回收释放掉的只是托管资源,非托管资源还是需要我们手动释放.而为了实现这一目的,C#提供了 IDisposable ...
- 85、android handler的警告Handler Class Should be Static or Leaks Occur
转载:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1106/1922.html 在使用Handler更新UI的时候,我是这样写 ...
- 那个你经常用的abs函数（取绝对值）真的总是返回非负数吗？
前几天在牛客网看到一道关于abs()函数返回值的题目,见下图,当时还没反应过来,第一反应是:自从我开始学C语言,就知道它是用来求int数的绝对值的,返回值当然是0或者正数啊,一看答案就是A. 后来思来 ...
- WEB安全番外第三篇--关于XXE
一.什么是XXE 1.XML实体简介 (1)在一段时间中,XML都是WEB信息传输的主要方法,时至今日XML在WEB中作为前后台之间传递数据的结构,依然发挥着重要的作用.在XML中有一种结构叫做实体: ...
- VMware虚拟机下安装CentOS7.0超详细图文教程
1.本文说明: 官方的第一个文本档案.也就是0_README.txt,大概意思是这样(渣翻译,但是大概意思还是有的). CentOS-7.0-1406-x86_64-DVD.iso:这个镜像(DVD ...
- Centos7.2yum安装时候出现db5错误的解决办法
Centos7.2使用yum安装软件是出现如此错误提示 解决办法 删除 /var/lib/rpm文件夹下面所有以__db开头的文件