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 ...
随机推荐
- [真题] 一道 vsftp 运维题
一道 vsftp 运维题 一.前言 在 V 站上凑巧看到了好友发的求助帖,五天时间一个理他的都没有.哈哈哈~ 废话不多说,我们来试试. 二.题目 这里我们假设存在这样的场景: 网络内有普通用户 ade ...
- mxonline实战11，课程详情页2，课程章节页
对应github地址:第11天 一. 课程详情页2 1. 课程详情页第2块中的课程介绍中,修改course-detail.html中代码,搜索课程详情,找到如下代码
- 知名协作工具 Slack 换新 logo 啦！
简评:本文系译文.Slack 在自家 Blog 上解释了新的设计 -- 旧版的 logo 有 11 种颜色,在非白色背景的情况下,logo 不仅难看,而且很容易在多个地方上表现不一致. 新年换新装,S ...
- GCD 使用若干注意事项
这篇文章写的是看完 WWDC 17 - Modernizing GCD Usage 之后的笔记. 一.Parallelism & Concurrency Parallelism 指的是在多个 ...
- IDEA自动生成TestNG的testng.xml的插件
某地方见到的,自己实际操作一遍,记录一下.方便以后查询. 下载Create TestNG XML 插件,重启IDEA即可. 重启idea,新建Maven项目. pom.xml增加依赖 <depe ...
- mariadb配置主从同步遇到的问题
一:ERROR: No query specified 解决方案: \G后面不能再加分号;,因为\G在功能上等同于;,如果加了分号,那么就是;;(2个分号),SQL语法错误 二:主从同步不成功 Sla ...
- CentOS7.6下模拟iSCSI，Windows来连
如题,在CentOS7上模拟一个iSCSI设备,然后在Windows Server 2008上连接这个iSCSI设备 第一步,CentOS7上的操作.CentOS7上安装iSCSI模拟器需要3个包,我 ...
- Bluetooth Lowe Energy
BTL---------- // Wikipedia --------The first review paper to read when you counterred a new filed . ...
- [转] Scala 的集合类型与数组操作
[From] https://blog.csdn.net/gongxifacai_believe/article/details/81916659 版权声明:本文为博主原创文章,转载请注明出处. ht ...
- JavaScript中的不可变性(Immutability)
什么是不可变性(Immutability)? 即某个变量在进行了某个操作之后,其本身没有发生变化,比如对于字符串而言,对字符串的任何操作都会改变字符串本身的值,而是在字符串的基础上复制出来一个然后再改 ...