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 ...
随机推荐
- [Objective-C语言教程]扩展（30）
类扩展与类别有一些相似之处,但它只能添加到编译时具有源代码的类中(类与类扩展同时编译). 类扩展声明的方法是在原始类的实现块中实现的,因此不能在框架类上声明类扩展,例如Cocoa或Cocoa Touc ...
- 爬虫2：urllib
了解即可,不好用 一. 概述 python内置的http请求库,包括4个模块,分别如下 urllib.request 请求模块 urllib.error 异常处理模 ...
- H5入门基础（一）
我们还是围绕这几个问题来学习: 1.什么是H5? 2.为什么要用H5? 3.怎么用H5? 1.什么是H5? ♦HTML是指超文本标记语言(Hyper Text Markup Language). ♦H ...
- delphi 10.2 ----简单的叠乘例子
unit Unit11; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...
- Dota2APP--第一天
从今天开始,下定决心自己独立开发一个有关于Dota2的APP,因为非常喜欢这个游戏恰好自己又是做iOS移动开发的所以萌生了这个想法.希望可以坚持下去,有喜欢dota2的朋友也可以提点建议. 一.项目的 ...
- UITableView 头部效果/放大/移动跟随效果
[self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOp ...
- USACO The Lazy Cow
题目描述 这是一个炎热的夏天,奶牛贝茜感觉到相当的疲倦而且她也特别懒惰.她要在她的领域中找到一个合适的位置吃草,让她能吃到尽可能多的美味草并且尽量只在很短的距离.奶牛贝茜居住的领域是一个 N×N 的矩 ...
- C#中子类和父类
在实例化子类的时候,总是先调用父类的无参构造函数
- mongo 与 传统mysql语法对比
MongoDB语法 MySql语法 db.test.find({'name':'foobar'})<==> select ...
- transform旋转变换效果
div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...