vue的簡單測試
阿新 • • 發佈：2017-06-19
簡單測試 join function app on() vue.js enme asi outer
<!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的簡單測試