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 ...
随机推荐
- AssertJ断言系列<一>
1 - Get AssertJ Core assertions Maven的pom.xml加入如下配置: <dependency> <groupId>org.assertj&l ...
- python中json库中的load、loads、dump、dumps的区别与用法
一.json.dumps(i): json中的dumps方法是用来将特定格式的数据进行字符串化的操作,比如列表字典都可以进行字符串化操作然后写入json的file:而且如果是要写入json文件就必须要 ...
- BootStrap Modal 点击空白时自动关闭
本文为大家讲解的是如何禁用 BootStrap Modal 点击空白时自动关闭的方法,感兴趣的同学参考下. 方法如下 $('#myModal').modal({backdrop: 'static', ...
- STL项目-学校演讲比赛
// 学校演讲比赛.cpp : 此文件包含 "main" 函数.程序执行将在此处开始并结束. // #include "pch.h" #include < ...
- servlet,listener,filter,interceptor的关系
1.servlet:servlet是一种运行服务器端的java应用程序,具有独立于平台和协议的特性,并且可以动态的生成web页面,它工作在客户端请求与服务器响应的中间层.最早支持 Servlet 技术 ...
- 自定义ASP.NET Core日志中间件
这个日志框架使用的是ASP.NET Core的NLog,用来记录每次请求信息和返回信息. 1.首先创建一个Web应用项目,我选择的是MVC模板: 2.使用NuGet添加Microsoft.Extens ...
- （二）Audio子系统之new AudioRecord()
在上一篇文章<(一)Audio子系统之AudioRecord.getMinBufferSize>中已经介绍了AudioRecord如何获取最小缓冲区大小,接下来,继续分析AudioReco ...
- 思科网络设备配置AAA认证
思科网络设备配置AAA认证登陆,登陆认证后直接进入#特权模式,下面以Cisco 3750G-24TS-S为例,其他设备配置完全是一样的,进入config terminal后命令如下: 前面是加2个不同 ...
- Neo4j安装&入门&一些优缺点(转)
本篇将介绍Neo4j的安装,入门,和自己使用了一段时间后发现的优点缺点,争取简洁和实用. 如果你是第一次接触Neo4j,并且之前也都没接触过类似的Graph Database的话,建议先浏览一下我之前 ...
- (转)如何在CentOS / RHEL 7上安装Elasticsearch，Logstash和Kibana（ELK）
原文:https://www.howtoing.com/install-elasticsearch-logstash-and-kibana-elk-stack-on-centos-rhel-7 如果你 ...