<!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
}
});