vue入门学习示例
鄙人一直是用angular框架的，所以順便比較了一下。
?
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue實踐</title> 6 <script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script> 7 </head> 8 9 <body> 10 <div id="app"> 11 <span>{{message}}</span><br> 12 <input type="text" v-model="mes"><br> 13 <test-prop :prop-val="mes"></test-prop><br> 14 <span>{{reverseMes}}</span><br> 15 <button v-on:click="plus()">點擊 click事件</button><br> 16 <button @click="del()">點擊-click事件</button><br> 17 <div id="mount-point"></div> 18 </div> 19 <script> 20 var vue = new Vue({ 21 el:'#app', 22 data:{//data類似angualar的$scope,可以接收數據或函數,任何字段或函數需要先定義才能使用 23 message:'hello world~', 24 mes:'初始值', 25 i:0 26 }, 27 components: {//components類似angular的指令，駝峰命名在html中用‘-’表示，可單向動態傳值 28 'test-prop':{ 29 props:['propVal'], 30 template: '<div>{{propVal}}</div>' 31 } 32 }, 33 computed:{//computed類似angular的自定義過濾器的函數，函數名可直接在html 中顯示，用‘{{}}’，不能用v-bind？ 34 reverseMes: function(){ 35 return this.mes.split('').reverse().join('') 36 } 37 }, 38 methods:{//創建方法函數 39 plus:function(){ 40 this.message = this.message '-----' this.i; 41 this.i = 1; 42 }, 43 del:function(){ 44 var index = this.message.lastIndexOf('-----'); 45 this.message = this.message.slice(0,index); 46 this.i -= 1; 47 } 48 }, 49 watch:{//watch類似angular的$watch，方法中傳入兩個值（新值，舊值） 50 mes:function (newV, oldV) { 51 console.log(newV '-------' oldV); 52 } 53 } 54 }); 55 var newMount = Vue.extend({//創建一個子類 56 template:'<p>my name is {{lastName}}{{firstName}} . my english name is {{alias}}</p>', 57 data: function(){//這里data必須是函數 58 return { 59 firstName:'Shaoli', 60 lastName:'Hong', 61 alias:'Souleigh' 62 } 63 } 64 }); 65 new newMount().$mount('#mount-point');//$mount類似angular的bootstrap手動啟動app，手動地掛載一個未掛載的實例 66 </script> 67 </body> 68 </html>?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
- 上一篇： 关于setTimeout和setInte
- 下一篇： vue2.0移除或更改的一些东西