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
	}

});

　　

posted @ 2017-06-19 18:48  三月路  阅读(733)  评论(0)  编辑  收藏  举报