Vue基礎彙總實踐

1)雙向綁定：

 

1.  
   <div id="app">
2.  
   <p>{{message}}</p>
3.  
   <input v-model="message"/>
4.  
   </div>

1.  
   new Vue({
2.  
   el:'#app',
3.  
   data:{
4.  
   message:'Hello vue.js'
5.  
   }
6.  
   })

2)渲染列表

 

 

1.  
   <div id="app">
2.  
   <ul>
3.  
   <li v-for="todo in todos">{{todo.text}}</li>
4.  
   </ul>
5.  
   </div>

1.  
   new Vue({
2.  
   el:'#app',
3.  
   data:{
4.  
   todos:[
5.  
   { text:'學習vue'},
6.  
   { text:'學習Sass'},
7.  
   { text:'學習webpack'}
8.  
   ]
9.  
   }
10.  
    })

3)處理用戶輸入

 

 

1.  
   <div id="app">
2.  
   <p>{{message}}</p>
3.  
   <input v-model='message'/>
4.  
   <button type="button" v-on:click="reverseMessage">反轉</button>
5.  
   </div>

1.  
   new Vue({
2.  
   el:'#app',
3.  
   data:{
4.  
   message:'hello world'
5.  
   },
6.  
   methods:{
7.  
   reverseMessage:function(){
8.  
   this.message=this.message.split('').reverse().join('')
9.  
   }
10.  
    }
11.  
    })

4)綜合小例子：記事本

 

 

1.  
   <div id="app">
2.  
   <input v-model="newTodo" v-on:keyup.enter="addTodo" placeholder="請記錄未完成的計劃" />
3.  
   <ul>
4.  
   <li v-for="todo in todos">
5.  
   <span>{{todo.text}}</span>
6.  
   <button type="button" v-on:click="removeTodo($index)">X</button>
7.  
   </li>
8.  
   </ul>
9.  
   </div>

1.  
   new Vue({
2.  
   el:'#app',
3.  
   data:{
4.  
   newTodo:'',
5.  
   todos:[
6.  
   { text:'學習Vue'},
7.  
   { text:'學習Sass'},
8.  
   { text:'學習webpack'}
9.  
   ]
10.  
    },
11.  
    methods:{
12.  
    addTodo:function(){
13.  
    var text = this.newTodo.trim();
14.  
    if(text){
15.  
    this.todos.push({text:text});
16.  
    this.newTodo='';
17.  
    }
18.  
    },
19.  
    removeTodo:function(index){
20.  
    this.todos.splice(index,1);
21.  
    }
22.  
    }
23.  
    })

5)插值

 

 

1.  
   <div id="app">
2.  
   <!-- 單次文本插值 -->
3.  
   <p>{{*message}}</p>
4.  
   <!-- 解析真的html字符串 -->
5.  
   <p>{{{raw_html}}}</p>
6.  
   <!-- html特性 -->
7.  
   <p id="item-{{id}}">html特性</p>
8.  
   </div>

1.  
   new Vue({
2.  
   el:'#app',
3.  
   data:{
4.  
   message:'Hello vue.js',
5.  
   raw_html:'<span>原始的html</span>',
6.  
   id:'1'
7.  
   }
8.  
   })

6)綁定表達式

 

 

1.  
   <div id="app">
2.  
   <!-- javascript表達式 -->
3.  
   <p>{{number+1}}</p>
4.  
   <p>{{ok ? 'Yes' : 'No'}}</p>
5.  
   <p>{{message.split('').reverse().join('')}}</p>
6.  
   <!-- 過濾器 -->
7.  
   <p>{{name | capitalize}}</p>
8.  
   </div>

1.  
   new Vue({
2.  
   el:'#app',
3.  
   data:{
4.  
   number:2,
5.  
   ok:false,
6.  
   message:'123456789',
7.  
   name:'brucee lee'
8.  
   }
9.  
   })

7)指令

 

 

1.  
   <div id="app">
2.  
   <!-- 參數 -->
3.  
   <a v-bind:href="url" v-on:click="dosomething">指令帶參數</a>
4.  
   <!-- v-bind、v-on縮寫 -->
5.  
   <a :href="url" @click="dosomething">指令縮寫</a>
6.  
   </div>

1.  
   new Vue({
2.  
   el:'#app',
3.  
   data:{
4.  
   url:'http://g.pptv.com'
5.  
   },
6.  
   methods:{
7.  
   dosomething:function(){
8.  
   alert( this.url);
9.  
   }
10.  
    }
11.  
    })

8)計算屬性

 

 

1.  
   <div id="app">
2.  
   <p>a={{a}},b={{b}}</p>
3.  
   <p>{{fullName}}</p>
4.  
   </div>

1.  
   new Vue({
2.  
   el:'#app',
3.  
   data:{
4.  
   a:1,
5.  
   firstName:'Micro',
6.  
   lastName:'Jodon'
7.  
   },
8.  
   computed:{
9.  
   b:function(){
10.  
    return this.a + 1;
11.  
    },
12.  
    /*fullName:function(){
13.  
    return this.firstName + ' ' + this.lastName;
14.  
    }*/
15.  
    fullName:{
16.  
    get:function(){
17.  
    return this.firstName + ' ' + this.lastName;
18.  
    },
19.  
    set:function(newValue){
20.  
    var names = newValue.split(' ');
21.  
    this.firstName = names[0];
22.  
    this.lastName = names[names.length-1];
23.  
    }
24.  
    }
25.  
    }
26.  
    })

9)class與style綁定

 

 

1.  
   .static{
2.  
   width: 200px;
3.  
   margin: 20px auto;
4.  
   height: 25px;
5.  
   line-height: 25px;
6.  
   text-align: center;
7.  
   font-size: 18px;
8.  
   }
9.  
   .class-a{
10.  
    background-color: #f00;
11.  
    }
12.  
    .class-b{
13.  
    color: #fff;
14.  
    }
15.  
    .class-c{
16.  
    padding: 5px 0;
17.  
    }

 

 

1.  
   <div id="app">
2.  
   <!-- 綁定class:對象語法 -->
3.  
   <p class="static" v-bind:class="{'class-a':isA,'class-b':isB}">綁定class</p>
4.  
   <p class="static" v-bind:class="classObject">綁定class</p>
5.  
   <!-- 綁定class:數組語法 -->
6.  
   <p class="static" v-bind:class="[classA,classB,classC]">綁定class</p>
7.  
   <p class="static" v-bind:class="[classA,{ 'class-b': isB,'class-c': isC}]">綁定class</p>
8.  
   <!-- 綁定style:對象語法 -->
9.  
   <p class="static" v-bind:style="styleObject">綁定style</p>
10.  
    <!-- 綁定style:數組語法 -->
11.  
    <p class="static" v-bind:style="[styleObjectA,styleObjectB]">綁定style</p>
12.  
    </div>

1.  
   new Vue({
2.  
   el:'#app',
3.  
   data:{
4.  
   classA:'class-a',
5.  
   classB:'class-b',
6.  
   classC:'class-c',
7.  
   isA:true,
8.  
   isB:false,
9.  
   isC:true,
10.  
    classObject:{
11.  
    'class-a':true,
12.  
    'class-b':true
13.  
    },
14.  
    styleObject:{
15.  
    color:'red',
16.  
    fontSize:'13px',
17.  
    backgroundColor:'#00f'
18.  
    },
19.  
    styleObjectA:{
20.  
    color:'green',
21.  
    fontSize:'16px'
22.  
     
23.  
    },
24.  
    styleObjectB:{
25.  
    backgroundColor:'#f0f',
26.  
    transform:'rotate(7deg)'
27.  
    }
28.  
    }
29.  
    })

10)條件渲染

 

 

1.  
   <div id="app">
2.  
   <h1 v-if="Math.random() > 0.5">對不起！</h1>
3.  
   <h1 v-else>不要緊</h1>
4.  
    
5.  
   <template v-if="ok">
6.  
   <h1>標題</h1>
7.  
   <p>段落1</p>
8.  
   <p>段落2</p>
9.  
   </template>
10.  
     
11.  
    <h1 v-show="isShow">Hello!</h1>
12.  
     
13.  
    <custom-component v-show="condition"></custom-component>
14.  
    <p v-show="!condition">這可能也是一個組件</p>
15.  
    </div>

1.  
   // 定義
2.  
   var MyComponent = Vue.extend({
3.  
   template: '<div>A custom component!</div>'
4.  
   });
5.  
    
6.  
   // 註冊
7.  
   Vue.component( 'custom-component', MyComponent);
8.  
   new Vue({
9.  
   el:'#app',
10.  
    data:{
11.  
    ok:true,
12.  
    isShow:false,
13.  
    condition:true
14.  
    },
15.  
     
16.  
    })

11)列表渲染

 

 

1.  
   <div id="app">
2.  
   <!-- 數組v-for -->
3.  
   <ul>
4.  
   <template v-for="item in items" track-by="_uid">
5.  
   <li>{{ parentMessage }} - {{ $index }} - {{ item.message }}</li>
6.  
   <li class="divider"></li>
7.  
   </template>
8.  
   </ul>
9.  
   <!-- 對象v-for -->
10.  
    <ul>
11.  
    <li v-for="(key,val) in object">{{key}} : {{val}}</li>
12.  
    </ul>
13.  
    <!-- 值域v-for -->
14.  
    <span v-for="n in 10">{{ n }}</span>
15.  
    </div>

1.  
   ul{
2.  
   list-style: none;
3.  
   width: 150px;
4.  
   }
5.  
   .divider{
6.  
   height: 2px;
7.  
   background-color: #00f;
8.  
   }
9.  
   span{
10.  
    padding: 0 2px;
11.  
    }

1.  
   var vm=new Vue({
2.  
   el:'#app',
3.  
   data:{
4.  
   parentMessage:'水果',
5.  
   items:[
6.  
   { _uid:'001',message:'香蕉'},
7.  
   { _uid:'002',message:'橘子'}
8.  
   ],
9.  
   object:{
10.  
    FirstName: 'John',
11.  
    LastName: 'Doe',
12.  
    Age: 30
13.  
    }
14.  
    }
15.  
    });
16.  
    //變異方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
17.  
    vm.items.push({ message:'蘋果'},{message:'梨子'});//推入兩項
18.  
    vm.items.shift(); //取出第一項
19.  
    //非變異方法：filter(), concat(), slice(),可用替換數組來修改原數組
20.  
    vm.items=vm.items.filter( function (item) {
21.  
    return item.message.match(/子/);
22.  
    })

12)方法與事件處理器

 

 

1.  
   <div id="app">
2.  
   <!-- 內聯語句處理器 -->
3.  
   <button type="button" v-on:click="say('Hello',$event)">提交</button>
4.  
   <!-- 事件修飾符 -->
5.  
   <!-- 阻止單擊事件冒泡 -->
6.  
   <a v-on:click.stop="doThis"></a>
7.  
    
8.  
   <!-- 提交事件再也不重載頁面 -->
9.  
   <form v-on:submit.prevent="onSubmit"></form>
10.  
     
11.  
    <!-- 修飾符能夠串聯 -->
12.  
    <a v-on:click.stop.prevent="doThat"></a>
13.  
     
14.  
    <!-- 只有修飾符 -->
15.  
    <form v-on:submit.prevent></form>
16.  
     
17.  
    <!-- 添加事件偵聽器時使用 capture 模式 -->
18.  
    <div v-on:click.capture="doThis">...</div>
19.  
     
20.  
    <!-- 只當事件在該元素自己（而不是子元素）觸發時觸發回調 -->
21.  
    <div v-on:click.self="doThat">...</div>
22.  
     
23.  
    <!-- 按鍵修飾符 -->
24.  
    <input v-on:keyup.enter="submit">
25.  
     
26.  
    </div>

1.  
   var vm=new Vue({
2.  
   el:'#app',
3.  
   methods:{
4.  
   say:function(msg,event){
5.  
   alert(msg+ ","+event.target.tagName);
6.  
   event.preventDefault();
7.  
   }
8.  
   }
9.  
   });

13)表單控件綁定

 

 

1.  
   <div id="app">
2.  
   <!-- 多行文本 -->
3.  
   <span>這是您的評論：</span>
4.  
   <p>{{message}}</p>
5.  
   <textarea v-model="message" placeholder="請輸入您的評論"></textarea>
6.  
   <br>
7.  
   <!-- 單選框 -->
8.  
   <input type="checkbox" id="checkbox" v-model="checked">
9.  
   <label for="checkbox">{{ checked }}</label>
10.  
    <br>
11.  
    <!-- 多個單選框 -->
12.  
    <input type="checkbox" id="jack" value="馬雲" v-model="checkedNames">
13.  
    <label for="jack">馬雲</label>
14.  
    <input type="checkbox" id="john" value="馬化騰" v-model="checkedNames">
15.  
    <label for="john">馬化騰</label>
16.  
    <input type="checkbox" id="mike" value="李彥宏" v-model="checkedNames">
17.  
    <label for="mike">李彥宏</label>
18.  
    <br>
19.  
    <span>選中的值: {{ checkedNames | json }}</span>
20.  
    <br>
21.  
    <!-- 單選鈕 -->
22.  
    <input type="radio" id="one" value="One" v-model="picked">
23.  
    <label for="one">One</label>
24.  
    <br>
25.  
    <input type="radio" id="two" value="Two" v-model="picked">
26.  
    <label for="two">Two</label>
27.  
    <br>
28.  
    <span>選中的值: {{ picked }}</span>
29.  
    <br>
30.  
    <!-- 下拉列表單選 -->
31.  
    <select v-model="selected">
32.  
    <option selected>湖北</option>
33.  
    <option>北京</option>
34.  
    <option>上海</option>
35.  
    </select>
36.  
    <span>選中的值: {{ selected }}</span>
37.  
    <br>
38.  
    <!-- 下拉列表多選 -->
39.  
    <select v-model="selecteds" multiple>
40.  
    <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
41.  
    </select>
42.  
    <br>
43.  
    <span>選中的值: {{ selecteds | json }}</span>
44.  
    <br>
45.  
     
46.  
    <!--綁定動態值到Vue實例-->
47.  
     
48.  
    <!-- 選中時爲a，未選中時爲b -->
49.  
    <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"/>
50.  
    <span>選中時的值：{{toggle}}</span>
51.  
    <br>
52.  
     
53.  
    <input type="radio" v-model="pick" v-bind:value="c">男
54.  
    <input type="radio" v-model="pick" v-bind:value="d">女
55.  
    <span>選中時的值：{{pick}}</span>
56.  
     
57.  
    <!-- 在 "change" 而不是 "input" 事件中更新 -->
58.  
    <input v-model="msg" lazy>
59.  
    <!-- 設置轉換爲數值類型 -->
60.  
    <input v-model="age" number>
61.  
    <!-- 設置延時 -->
62.  
    <input v-model="msg" debounce="500">
63.  
    </div>

1.  
   var vm=new Vue({
2.  
   el:'#app',
3.  
   data: {
4.  
   checkedNames: [],
5.  
   options:[
6.  
   { text:'南京',value:'南京'},
7.  
   { text:'蘇州',value:'蘇州'},
8.  
   { text:'無錫',value:'無錫'}
9.  
   ],
10.  
    a:'選中',
11.  
    b:'未選中',
12.  
    c:'男',
13.  
    d:'女'
14.  
    }
15.  
    });

14)css過渡

 

 

1.  
   <div id="app">
2.  
   <div v-if="show" transition="expand">Hello1</div>
3.  
   <div v-if="show" :transition="transitionName">Hello2</div>
4.  
   <button type="button" v-on:click="toggle">過渡效果演示</button>
5.  
   </div>

1.  
   /* 必需 */
2.  
   .expand-transition {
3.  
   transition: all 0.5s ease;
4.  
   height: 30px;
5.  
   padding: 10px;
6.  
    
7.  
   overflow: hidden;
8.  
   }
9.  
    
10.  
    /* .expand-enter 定義進入的開始狀態 */
11.  
    /* .expand-leave 定義離開的結束狀態 */
12.  
    .expand-enter, .expand-leave {
13.  
    height: 0;
14.  
    padding: 0 10px;
15.  
    opacity: 0;
16.  
    }
17.  
    .fade-transition{
18.  
    transition: all 0.5s ease;
19.  
    height: 30px;
20.  
    padding: 10px;
21.  
    outline: 0px; color: rgb(209, 154, 102); word-break: break-all;">2df;
22.  
    overflow: hidden;
23.  
    }
24.  
    .fade-enter, .fade-leave {
25.  
    padding: 0 10px;
26.  
    opacity: 0.5;
27.  
    }

1.  
   var vm=new Vue({
2.  
   el:'#app',
3.  
   data: {
4.  
   show:true,
5.  
   transitionName:'fade'
6.  
   },
7.  
   methods:{
8.  
   toggle:function(){
9.  
   if(this.show){
10.  
    this.show=false;
11.  
    } else{
12.  
    this.show=true;
13.  
    }
14.  
     
15.  
    }
16.  
    },
17.  
    transitions: {
18.  
    expand: {
19.  
    beforeEnter: function (el) {
20.  
    el.textContent = 'beforeEnter'
21.  
    },
22.  
    enter: function (el) {
23.  
    el.textContent = 'enter'
24.  
    },
25.  
    afterEnter: function (el) {
26.  
    el.textContent = 'afterEnter'
27.  
    },
28.  
    beforeLeave: function (el) {
29.  
    el.textContent = 'beforeLeave'
30.  
    },
31.  
    leave: function (el) {
32.  
    el.textContent = 'leave'
33.  
    },
34.  
    afterLeave: function (el) {
35.  
    el.textContent = 'afterLeave'
36.  
    }
37.  
    }
38.  
    }
39.  
    });

15)css自定義過渡（注：與animats.css配合使用）

 

 

1.  
   <div id="app">
2.  
   <div v-show="ok" class="animated" transition="bounce">只有我最搖擺</div>
3.  
   <button type="button" v-on:click="toggle">演示過渡效果</button>
4.  
   </div>

1.  
   .animated{
2.  
   width: 150px;
3.  
   background-color: #2df;
4.  
   height: 30px;
5.  
   padding: 10px;
6.  
   }

1.  
   var vm=new Vue({
2.  
   el:'#app',
3.  
   data: {
4.  
   ok:true
5.  
   },
6.  
   methods:{
7.  
   toggle:function(){
8.  
   if(this.ok){
9.  
   this.ok=false;
10.  
    } else{
11.  
    this.ok=true;
12.  
    }
13.  
    }
14.  
    },
15.  
    transitions: {
16.  
    bounce: {
17.  
    enterClass: 'bounceInLeft',
18.  
    leaveClass: 'bounceOutRight'
19.  
    }
20.  
    }
21.  
    });

16)CSS動畫（注：與animats.css配合使用）

 

 

1.  
   <div id="app">
2.  
   <div v-show="ok" class="animated" transition="bounce">看我變一個</div>
3.  
   <button type="button" v-on:click="toggle">演示動畫效果</button>
4.  
   </div>

1.  
   .animated{
2.  
   width: 150px;
3.  
   background-color: #2df;
4.  
   height: 30px;
5.  
   padding: 10px;
6.  
   }
7.  
   .bounce-transition {
8.  
   display: inline-block; /* 不然 scale 動畫不起做用 */
9.  
   }
10.  
    .bounce-enter {
11.  
    animation: bounce-in .5s;
12.  
    }
13.  
    .bounce-leave {
14.  
    animation: bounce-out .5s;
15.  
    }
16.  
    @ keyframes bounce-in {
17.  
    0% {
18.  
    transform: scale(0);
19.  
    }
20.  
    50% {
21.  
    transform: scale(1.5);
22.  
    }
23.  
    100% {
24.  
    transform: scale(1);
25.  
    }
26.  
    }
27.  
    @ keyframes bounce-out {
28.  
    0% {
29.  
    transform: scale(1);
30.  
    }
31.  
    50% {
32.  
    transform: scale(1.5);
33.  
    }
34.  
    100% {
35.  
    transform: scale(0);
36.  
    }
37.  
    }

1.  
   var vm=new Vue({
2.  
   el:'#app',
3.  
   data: {
4.  
   ok:true
5.  
   },
6.  
   methods:{
7.  
   toggle:function(){
8.  
   if(this.ok){
9.  
   this.ok=false;
10.  
    } else{
11.  
    this.ok=true;
12.  
    }
13.  
    }
14.  
    }
15.  
    });

17)Javascript過渡

 

 

1.  
   <div id="app">
2.  
   <p transition='fade'>什麼和什麼？</p>
3.  
   </div>

1.  
   .fade-transition{
2.  
   transition: all 0.5s ease;
3.  
   height: 30px;
4.  
   padding: 10px;
5.  
   background-color: #2df;
6.  
   overflow: hidden;
7.  
   }

1.  
   var vm=new Vue({
2.  
   el:'#app'
3.  
   });
4.  
   vm.transition( 'fade', {
5.  
   css: false,
6.  
   enter: function (el, done) {
7.  
   // 元素已被插入 DOM
8.  
   // 在動畫結束後調用 done
9.  
   $(el)
10.  
    .css( 'opacity', 0)
11.  
    .animate({ opacity: 1 }, 1000, done)
12.  
    },
13.  
    enterCancelled: function (el) {
14.  
    $(el).stop()
15.  
    },
16.  
    leave: function (el, done) {
17.  
    // 與 enter 相同
18.  
    $(el).animate({ opacity: 0 }, 1000, done)
19.  
    },
20.  
    leaveCancelled: function (el) {
21.  
    $(el).stop()
22.  
    }
23.  
    })

18)漸進過渡

 

 

1.  
   <div id="example-1">
2.  
   <input v-model="query">
3.  
   <ul>
4.  
   <li v-for="item in list | filterBy query" transition="staggered" stagger="100">
5.  
   {{item.msg}}
6.  
   </li>
7.  
   </ul>
8.  
   </div>

1.  
   #example-1{
2.  
   width:200px;
3.  
   margin:20px auto;
4.  
   font-size:14px;
5.  
   color:#ff6600;
6.  
   }
7.  
   ul {
8.  
   padding-left: 0;
9.  
   font-family: Helvetica, Arial, sans-serif;
10.  
    }
11.  
    .staggered-transition {
12.  
    transition: all .5s ease;
13.  
    overflow: hidden;
14.  
    margin: 0;
15.  
    height: 25px;
16.  
    }
17.  
    .bounceInLeft, .bounceOutRight {
18.  
    opacity: 0;
19.  
    height: 0;
20.  
    }

1.  
   var exampleData={
2.  
   query: '',
3.  
   list: [
4.  
   { msg: 'Bruce Lee' },
5.  
   { msg: 'Jackie Chan' },
6.  
   { msg: 'Chuck Norris' },
7.  
   { msg: 'Jet Li' },
8.  
   { msg: 'Kung Fury' }
9.  
   ]
10.  
    };
11.  
    var exampleVM = new Vue({
12.  
    el:'#example-1',
13.  
    data:exampleData,
14.  
    transitions:{
15.  
    staggered:{
16.  
    enterClass:'bounceInLeft',
17.  
    leaveClass: 'bounceOutRight'
18.  
    }
19.  
    }
20.  
    });
21.  
     
22.  
    /* exampleVM.transition('stagger', {
23.  
    stagger: function (index) {
24.  
    // 每一個過渡項目增長 50ms 延時
25.  
    // 可是最大延時限制爲 300ms
26.  
    return Math.min(300, index * 50)
27.  
    }
28.  
    })*/

19)組件

 

 

1.  
   <div id="example">
2.  
   <my-component></my-component>
3.  
   </div>

1.  
   //定義
2.  
   /*var myComponent=Vue.extend({
3.  
   template:'<div>A custom component!</div>'
4.  
   });*/
5.  
   //註冊
6.  
   //Vue.component('my-component',myComponent);
7.  
   //在一個步驟中定義與註冊
8.  
   Vue.component( 'my-component',{
9.  
   template:'<div>A custom component!</div>'
10.  
    });
11.  
    //建立根實例
12.  
    new Vue({
13.  
    el:'#example'
14.  
    });

20)組件局部註冊

 

 

1.  
   <div id="example">
2.  
   <parent-component></parent-component>
3.  
   </div>

1.  
   //定義
2.  
   /*var Child=Vue.extend({
3.  
   template:'<div>A child component!</div>'
4.  
   });*/
5.  
   var Parent=Vue.extend({
6.  
   template:'<div>A parent component!<my-component></my-component></div>',
7.  
   components:{
8.  
   // <my-component> 只能用在父組件模板內
9.  
   'my-component':{
10.  
    template:'<div>A child component!</div>'
11.  
    }
12.  
    }
13.  
    });
14.  
    // 註冊父組件
15.  
    Vue.component( 'parent-component', Parent);
16.  
    //建立根實例
17.  
    new Vue({
18.  
    el:'#example'
19.  
    });

21)使用props傳遞數據

 

 

1.  
   <div id="example" class="demo">
2.  
   <input type="text" v-model="parentMessage"/><br>
3.  
   <child v-bind:my-message="parentMessage"></child>
4.  
   <!-- 雙向綁定 -->
5.  
   <child :msg.sync="parentMessage"></child>
6.  
    
7.  
   <!-- 單次綁定 -->
8.  
   <child :msg.once="parentMessage"></child>
9.  
   </div>

1.  
   .demo{
2.  
   border: 1px solid #eee;
3.  
   border-radius: 2px;
4.  
   padding: 25px 35px;
5.  
   margin-bottom: 40px;
6.  
   font-size: 1.2em;
7.  
   line-height: 1.5em;
8.  
   }

1.  
   new Vue({
2.  
   el:'#example',
3.  
   data:{
4.  
   parentMessage:'Message from parent'
5.  
   },
6.  
   components:{
7.  
   child:{
8.  
   props:['myMessage'],
9.  
   template:'<span>{{myMessage}}</span>'
10.  
    }
11.  
    }
12.  
    });

22)prop驗證

 

 

1.  
   <div id="example" class="demo">
2.  
   <child></child>
3.  
   </div>

1.  
   .demo{
2.  
   border: 1px solid #eee;
3.  
   border-radius: 2px;
4.  
   padding: 25px 35px;
5.  
   margin-bottom: 40px;
6.  
   font-size: 1.2em;
7.  
   line-height: 1.5em;
8.  
   }

1.  
   new Vue({
2.  
   el:'#example',
3.  
   components:{
4.  
   child:{
5.  
   props: {
6.  
   // 基礎類型檢測 （`null` 意思是任何類型均可以）
7.  
   propA: Number,
8.  
   // 多種類型 (1.0.21+)
9.  
   propM: [ String, Number],
10.  
    // 必需且是字符串
11.  
    propB: {
12.  
    type: String,
13.  
    required: true
14.  
    },
15.  
    // 數字，有默認值
16.  
    propC: {
17.  
    type: Number,
18.  
    default: 100
19.  
    },
20.  
    // 對象/數組的默認值應當由一個函數返回
21.  
    propD: {
22.  
    type: Object,
23.  
    default: function () {
24.  
    return { msg: 'hello' }
25.  
    }
26.  
    },
27.  
    // 指定這個 prop 爲雙向綁定
28.  
    // 若是綁定類型不對將拋出一條警告
29.  
    propE: {
30.  
    twoWay: true
31.  
    },
32.  
    // 自定義驗證函數
33.  
    propF: {
34.  
    validator: function (value) {
35.  
    return value > 10
36.  
    }
37.  
    },
38.  
    // 轉換函數（1.0.12 新增）
39.  
    // 在設置值以前轉換值
40.  
    propG: {
41.  
    coerce: function (val) {
42.  
    return val + ''; // 將值轉換爲字符串
43.  
    }
44.  
    },
45.  
    propH: {
46.  
    coerce: function (val) {
47.  
    return JSON.parse(val); // 將 JSON 字符串轉換爲對象
48.  
    }
49.  
    }
50.  
    },
51.  
    template:'<span>hello world!</span>'
52.  
    }
53.  
    }
54.  
    });

23)父子組件通訊

 

 

1.  
   <!--子組件模板-->
2.  
   <template id="child-template">
3.  
   <input type="text" v-model="msg"/>
4.  
   <button type="button" v-on:click="notify">派發事件</button>
5.  
   </template>
6.  
   <!--父組件模板-->
7.  
   <div id="events-example" class="demo">
8.  
   <p>Messages:{{ messages | json }}</p>
9.  
   <child v-on:child-msg="handleIt"></child>
10.  
    </div>

1.  
   .demo{
2.  
   border: 1px solid #eee;
3.  
   border-radius: 2px;
4.  
   padding: 25px 35px;
5.  
   margin-bottom: 40px;
6.  
   font-size: 1.2em;
7.  
   line-height: 1.5em;
8.  
   }

1.  
   // 註冊子組件,將當前消息派發出去
2.  
   Vue.component( 'child',{
3.  
   template:'#child-template',
4.  
   data:function(){
5.  
   return {msg:'hello'}
6.  
   },
7.  
   methods:{
8.  
   notify:function(){
9.  
   if(this.msg.trim()){
10.  
    this.$dispatch('child-msg',this.msg);
11.  
    this.msg='';
12.  
    }
13.  
    }
14.  
    }
15.  
    });
16.  
    // 初始化父組件,收到消息時將事件推入一個數組
17.  
    var parent=new Vue({
18.  
    el:'#events-example',
19.  
    data:{
20.  
    messages:[]
21.  
    },
22.  
    methods:{
23.  
    handleIt:function(msg){
24.  
    this.messages.push(msg);
25.  
    }
26.  
    }
27.  
    // 在建立實例時 `events` 選項簡單地調用 `$on`
28.  
    /*events:{
29.  
    'child-msg':function(msg){
30.  
    this.messages.push(msg);
31.  
    }
32.  
    }*/
33.  
    })

24)自定義指令-基礎

 

 

<div id="demo" v-demo:hello.a.b="msg"></div>

1.  
   Vue.directive( 'demo', {
2.  
   bind: function () {
3.  
   console.log('demo bound!')
4.  
   },
5.  
   update: function (value) {
6.  
   this.el.innerHTML =
7.  
   'name - ' + this.name + '<br>' +
8.  
   'expression - ' + this.expression + '<br>' +
9.  
   'argument - ' + this.arg + '<br>' +
10.  
    'modifiers - ' + JSON.stringify(this.modifiers) + '<br>' +
11.  
    'value - ' + value
12.  
    }
13.  
    });
14.  
    var demo = new Vue({
15.  
    el: '#demo',
16.  
    data: {
17.  
    msg: 'hello!'
18.  
    }
19.  
    })

25)自定義指令-高級選項

1.  
   <div id="demo" >
2.  
   <!--對象字面量-->
3.  
   <div v-demo-1="{ color: 'white', text: 'hello!' }"></div>
4.  
   <!--字面修飾符-->
5.  
   <div v-demo-2.literal="foo bar baz"></div>
6.  
   <!--元素指令-->
7.  
   <my-directive></my-directive>
8.  
   <!--高級選項-params-->
9.  
   <div v-example a="hi"></div>
10.  
    </div>

1.  
   Vue.directive( 'demo-1', function(value){
2.  
   console.log(value.color);
3.  
   console.log(value.text);
4.  
   });
5.  
   Vue.directive( 'demo-2',function(value){
6.  
   console.log(value);
7.  
   });
8.  
   Vue.elementDirective( 'my-directive',{
9.  
   bind:function(){
10.  
    console.log(this.el);
11.  
    }
12.  
    });
13.  
    Vue.directive( 'example',{
14.  
    params:['a'],
15.  
    bind:function(){
16.  
    console.log(this.params.a);
17.  
    }
18.  
    });
19.  
    Vue.directive( 'two', {
20.  
    twoWay: true,
21.  
    bind: function () {
22.  
    this.handler = function () {
23.  
    // 將數據寫回 vm
24.  
    // 若是指令這樣綁定 v-example="a.b.c"
25.  
    // 它將用給定值設置 `vm.a.b.c`
26.  
    this.set(this.el.value)
27.  
    }.bind( this);
28.  
    this.el.addEventListener('input', this.handler);
29.  
    },
30.  
    unbind: function () {
31.  
    this.el.removeEventListener('input', this.handler)
32.  
    }
33.  
    });
34.  
    var vm=new Vue({
35.  
    el: '#demo'
36.  
    });

26)自定義過濾器

 

 

1.  
   <div id="demo" class="demo">
2.  
   <!--基礎過濾器-->
3.  
   <span v-text="message | reverse"></span><br>
4.  
   <span v-text="message | wrap 'before' 'after'"></span><br>
5.  
   <!--雙向過濾器-->
6.  
   <input type="text" v-model="money | currencyDisplay"/>
7.  
   <p>ModelValue:{{money | currencyDisplay}}</p>
8.  
   <!--動態參數-->
9.  
   <input v-model="userInput"/>
10.  
    <span>{{msg | concat userInput}}</span>
11.  
    </div>

1.  
   .demo{
2.  
   border: 1px solid #eee;
3.  
   border-radius: 2px;
4.  
   padding: 25px 35px;
5.  
   margin-bottom: 40px;
6.  
   font-size: 1.2em;
7.  
   line-height: 1.5em;
8.  
   }

1.  
   Vue.filter( 'reverse',function(value){
2.  
   return value.split('').reverse().join('');
3.  
   });
4.  
   Vue.filter( 'wrap',function(value,begin,end){
5.  
   return begin+' '+value+' '+end;
6.  
   });
7.  
   Vue.filter( 'currencyDisplay',{
8.  
   // model -> view
9.  
   // 在更新 `<input>` 元素以前格式化值
10.  
    read: function(val){
11.  
    return '$'+val.toFixed(2)
12.  
    },
13.  
    // view -> model
14.  
    // 在寫回數據以前格式化值
15.  
    write: function(val, oldVal) {
16.  
    var number = +val.replace(/[^\d.]/g, '')
17.  
    return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
18.  
    }
19.  
    });
20.  
    Vue.filter( 'concat',function(value,input){
21.  
    return value+input;
22.  
    })
23.  
    new Vue({
24.  
    el:'#demo',
25.  
    data:{
26.  
    message:'abc',
27.  
    money:123.45,
28.  
    msg:'hello',
29.  
    userInput:'hi'
30.  
    }
31.  
    });

27)混合

 

 

1.  
   <div id="demo" class="demo">
2.  
    
3.  
   </div>

1.  
   .demo{
2.  
   border: 1px solid #eee;
3.  
   border-radius: 2px;
4.  
   padding: 25px 35px;
5.  
   margin-bottom: 40px;
6.  
   font-size: 1.2em;
7.  
   line-height: 1.5em;
8.  
   }

1.  
   var myMixin={
2.  
   created:function(){
3.  
   this.hello();
4.  
   },
5.  
   methods:{
6.  
   hello:function(){
7.  
   console.log('hello from mixin!');
8.  
   }
9.  
   }
10.  
    };
11.  
    // 定義一個組件，使用這個混合對象
12.  
    var Component = Vue.extend({
13.  
    mixins: [myMixin]
14.  
    });
15.  
    var component = new Component();
16.  
    new Vue({
17.  
    el:'#demo'
18.  
    });

28)混合-選項合併

1.  
   <div id="demo" class="demo">
2.  
    
3.  
   </div>

1.  
   .demo{
2.  
   border: 1px solid #eee;
3.  
   border-radius: 2px;
4.  
   padding: 25px 35px;
5.  
   margin-bottom: 40px;
6.  
   font-size: 1.2em;
7.  
   line-height: 1.5em;
8.  
   }

1.  
   var mixin={
2.  
   created:function(){
3.  
   console.log('mixin hook called');
4.  
   },
5.  
   methods: {
6.  
   foo: function () {
7.  
   console.log('foo');
8.  
   },
9.  
   conflicting: function () {
10.  
    console.log('from mixin');
11.  
    }
12.  
    }
13.  
    };
14.  
    var vm=new Vue({
15.  
    el:'#demo',
16.  
    mixins:[mixin],
17.  
    created:function(){
18.  
    console.log('component hook called');
19.  
    },
20.  
    methods:{
21.  
    bar: function () {
22.  
    console.log('bar');
23.  
    },
24.  
    conflicting: function () {
25.  
    console.log('from self');
26.  
    }
27.  
    }
28.  
    });
29.  
    vm.foo();
30.  
    vm.bar();
31.  
    vm.conflicting(); //組件優先