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 ...
随机推荐
- uc 调试
UC浏览器开发者版 目录[隐藏] 1 关于RI 2 准备工作 3 调试方式 相关下载 1 关于RI 目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试.手机屏幕相对较小且操作不便,直接在手机 ...
- 电脑端与iPad 端如何共享ChemDraw结构
在日常生活中,我们使用的电脑会有好几种系统,很多的软件不能做好各个系统的兼容.但是ChemDraw软件很好的解决了这个问题,可以应用于Mac.Windows两个电脑客户端以及Chem3D for iP ...
- 开发环境eclipse for Mac 下的常用快捷键汇总(基本参照Win系，将Ctrl换为Command)
最近迁移开发环境到Mac下,在豆瓣看到一个常用快捷键,去掉废话直接上干货 Command + O:显示大纲 Command + 1:快速修复 Command + D:删除当前行 Command + O ...
- 码农深耕 - 说说IDisposable
概要 C#提供了方便的垃圾回收机制,使我们几乎不再需要为资源管理费心.可事实上,能被垃圾回收释放掉的只是托管资源,非托管资源还是需要我们手动释放.而为了实现这一目的,C#提供了 IDisposable ...
- vue向路由组件传递props
父子间的组件通讯是通过props和$emit来实现的,那么路由之间的通讯呢,往下看: 我现在再webpack里面有一个这样的结构, 我现在想test1里面的按钮点击跳转到test2里面,获得到test ...
- 《从零开始学Swift》学习笔记（Day 68）——Cocoa Touch设计模式及应用之响应者链与触摸事件
原创文章,欢迎转载.转载请注明:关东升的博客 应用与用户进行交互,依赖于各种各样的事件.事件响应者对象是可以响应事件并对其进行处理的对象,响应者链是由一系列链接在一起的响应者组成的.响应者链在事件处理 ...
- Tomcat上进行项目部署与WAR包含义
一.WAR包 1.与JAR包类似,是将java类(编译好的.class)和Web资源,压缩后生成压缩包. 2. 与JAR相比,多了WEB-INF文件夹,其它多出来的内容基本都是Web资源 WEB-IN ...
- swift中类与结构体
写了12个Person来复习,不过完成同样的代码需要敲键盘的次数相比OC确实少了很多,这很多应该归功于Swift中不写分号,以及少了OC中的中括号. 一.类与结构体 两者在Swift中差不了多少了 类 ...
- Python 中的匿名函数，你滥用了吗？
概念 我们从一个例子引入. 这里有一个元素为非空字符串的列表,按字符串最后一个字母将列表进行排序.如果原列表是 ['abc', 'g', 'def'],则结果应该是 ['abc', 'def', 'g ...
- XTU1198:Candy(背包)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/libin56842/article/details/26182519 题目描写叙述 Henry和Le ...