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的簡單測試