vue入門學習示例

時間 2019-11-09

標籤 vue 入門學習示例简体版

原文原文鏈接

鄙人一直是用angular框架的，因此順便比較了一下。css

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。