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 ...
随机推荐
- VC++ 创建自己的头文件包含GUID
Guidgen 是比较好用的工具之一,可以使用它来创建ActiveX控件的UUID,同时可以创建独特的剪贴板格式名称和唯一的标识符的内核对象, 如信号量.互斥和事件. 但我需要为另一个目的创建一个唯 ...
- POJ2139 Six Degrees of Cowvin Bacon [Floyd]
水题,随手敲过 一看就是最短路问题,a,b演同一场电影则他们的距离为1 默认全部两两原始距离无穷,到自身为0 输入全部数据处理后floyd 然后照它说的求平均分离度 再找最小的,×100取整输出 #i ...
- malloc free, new delete 的异同点
相同点: 都可以动态的申请并释放内存 不同点: 1. 用法不同 <1> malloc 函数为 void* malloc(size_t size), 用于申请一块长度为 size 字节的内存 ...
- iOS开发之 -- NSStringFromSelector的使用
很多时候,我们要触发一个时间,需要设置点击时间,当然了,有很多,比如:按钮,手势,tableview和其他一些空间自带的点击方法, 还有一个就是NSStringFromSelector的使用,废话不多 ...
- 你所不知道的CSS
1.用FONT-SIZE:0来清除间距 inline-block的元素之间会受空白区域的影响,也就是元素之间差不多会有一个字符的间隙.如果在同一行内有4个25%相同宽度的元素,会导致最后一个元素掉下来 ...
- iOS 7 新特性：视图控制器切换API
本文转载至 http://blog.jobbole.com/51588/ 本文由 伯乐在线 - studentdeng 翻译自 Chris Eidhof.欢迎加入技术翻译小组.转载请参见文章末尾处的要 ...
- VS2010类模板更改，增加版权等等信息
本文转载自XDOTNET 在开发过程中往往需要在每一个页面(类)增加注释等等内容,VS2010中可以修改模板,在原有模板中增加一个类,会引用System等等命名空间,以及一些程序集.下面我们来看看如何 ...
- java基础---->string字面量的使用
这里简单的理解一下java中关于string字面量的知识,关于字节码可以使用java自带的javap工具查看. string字面量 一.直接贴出测试的代码 A string literal alway ...
- ios sqlite的创建数据库,表,插入查看数据
iOS sqlite数据库操作.步骤是: 先加入sqlite开发库libsqlite3.dylib, 新建或打开数据库, 创建数据表, 插入数据, 查询数据并打印 1.新建项目sqliteDemo,添 ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...