vue的简单测试
Posted 开
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的简单测试的主要内容，如果未能解决你的问题，请参考以下文章