vue的简单测试
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
<style>
.red{color:red}
</style>
<script src="https://keepfool.github.io/vue-tutorials/06.Router/basic/js/vue-router.js"></script>
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<script src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{mm | filter2}}</div>
<span v-text="mm" v-bind:class="{red:isRed}"></span>
<span v-if="show">测试内容显示</span>
<div v-for="(item,index) in lists">{{index}}:{{item.text}}</div>
<input type="text" v-model="mm">
<button v-on:click="testMethod">测试反转</button>
<input type="button" @click="testMethod" v-bind:title="mm" value="逆转未来"/>
<hr>
<my-component></my-component>
<input type="text" v-model="mmsg">
<my-apps></my-apps>
<!--动态Prop-->
<my-apps msg="MSG" :msg="mmsg" v-on:listen-mm-me='listenMe'></my-apps>
<my-apps msg2="hello"></my-apps>
</div>
<template id="myApp">
<!--组件必须有且只有一个根元素-->
<div>
<hr>
<button @click="p1+=1">测试123123123##{{p1}},{{msg}}</button>
312313
<button @click="tellUp">告诉父组件{{msg2}}</button>
</div>
</template>
<script src="js/test1.js?_t=1"></script>
</body>
</html>
//import test2 from 'test2'
//组件必须有且只有一个根元素
var MyComponent = Vue.extend({template:'<span style="color:red">测试组件</span>'});
Vue.component('my-component', MyComponent);//全局注册组件
Vue.filter("filter2", function(val){
return val + '#####';
});
//全局注册组件测试
Vue.component('MyApps',{
template:'#myApp',
props:['msg','msg2'], //与组件通信使用
data:function(){
return {p1:0}; //组件的data必须是function返回json
},
methods:{
tellUp:function(){
//通知组件的父级
this.$emit('listen-mm-me', this.p1);
}
}
});
//定义vue实例
new Vue({
el:'#app',
data:{
mm:'大家好我是一个新的vue哦，哈哈',
show:false,
isRed:true,
lists:[{text:'123'},{text:'456'}],
mmsg:''
},methods:{ //注册方法
testMethod:function(){
this.mm = this.mm.split('').reverse().join('');
},
listenMe:function(msg){
//监听子组件传值
console.log(msg);
}
}
,mounted: function () {
this.$nextTick(function () {
// 代码保证 this.$el 在 document 中
console.log(Vue.filter('filter2'));
})
}
,filters:{ //注册过滤器
filter1:function(val){
return val+'$$';
}
},watch:{ //注册监听器
mm:function(newValue,oldValue){
console.log(newValue);
}
},component:{
//MyApps
} });
vue的简单测试的更多相关文章
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- 沉淀，再出发：VUE的简单理解
沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...
- TODO：Golang UDP连接简单测试慎用Deadline
TODO:Golang UDP连接简单测试慎用Deadline UDP 是User Datagram Protocol的简称, 中文名是用户数据报协议,是OSI(Open System Interco ...
- .net orm比较之dapper和Entity Framework6的简单测试比较
.net orm比较之dapper和Entity Framework6的简单测试比较
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（37）-文章发布系统④-百万级数据和千万级数据简单测试
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(37)-文章发布系统④-百万级数据和千万级数据简单测试 系列目录 我想测试EF在一百万条数据下的显示时间! ...
- ORACLE 数据库简单测试
ORACLE 数据库简单测试 操作系统:Windows 7 – ORACLE:oracle database 10.2.0.4 一.目的 测试 启动监听程序.数据库 非同一个用户的情况,用户是否可以 ...
- react构建淘票票webapp，及react与vue的简单比较。
前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
- Javascript的简单测试环境
在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具 ...
- struts2+hibernate+spring注解版框架搭建以及简单测试（方便脑补）
为了之后学习的日子里加深对框架的理解和使用,这里将搭建步奏简单写一下,目的主要是方便以后自己回来脑补: 1:File--->New--->Other--->Maven--->M ...
随机推荐
- 修改linux的文件时，如何快速找到要修改的内容
♦ 在linux系统下,找到需要修改的文件.使用cd+目录的命令进行文件所在的目录,使用ls命令查看是否有该文件. ♦ 使用vim+文件名,打开该文件 ♦ 快速在文件中找到需要修改的地方.如我们需要修 ...
- 在Eclipse之中调试FastDFS-storage
FDFS版本为5.03 1.首先在eclipse之中创建一个C/C++工程,取名为FastDFS_v5.03 2.将FastDFS源码解压后拷贝到新创建的工程目录下,然后在ecipse之中刷新下工程就 ...
- CODEVS-新斯诺克
原题地址:新斯诺克 题目描述 Description 斯诺克又称英式台球,是一种流行的台球运动.在球桌上,台面四角以及两长边中心位置各有一个球洞,使用的球分别为1 个白球,15 个红球和6 个彩球(黄 ...
- java的MethodHandle类详解
一.总述 java7为间接调用方法提供了MethodHandle类,即方法句柄.可以将其看作是反射的另一种方式. 这是使用MethodHandle调用方法的一个例子: public class T ...
- TEMP_CHEMISTRY
1.\[CuSO_4\ and\ excess\ Ba(OH_2)\ :\ Cu^{2+}+SO_4^{2-}+Ba^{2+}+2OH^- \xrightarrow{\quad\quad} Cu(OH ...
- Codeforces Round #555 (Div. 3) E. Minimum Array 【数据结构 + 贪心】
一 题面 E. Minimum Array 二 分析 注意前提条件:$0 \le a_{i} \lt n$ 并且 $0 \le b_{i} \lt n$.那么,我们可以在$a_{i}$中任取一个数 ...
- 区间DP的学习（持续更新）
例题: 1.Multiplication Puzzle 原题地址:http://poj.org/problem?id=1651 2.Dire Wolf 原题地址:http://acm.split.hd ...
- 分享一个电子发票信息提取工具(Python)
电子发票太多,想统计下总额异常困难,网上工具不好用,花了2个小时实现一份,测试过中石油.京东开具的电子发票还行,部分发票名称失败有问题不影响统计,有需要的小伙伴自己拿去改吧. import cmd i ...
- rbac表设计
- Cisco ISR4400 Netflow 配置模板
flow exporter NAME destination 145.0.1.200 transport udp 9991 export-protocol netflow-v5 flow monito ...