Vue整理01---模板語法

1.基礎知識

1.new Vue 建立一個實例，傳入一個對象。
2.對象包括：

el：做用域
data：所用到的數據
methods：所用到的函數

3.{{}} 數據綁定 其中不止能夠綁定data，也能夠綁定函數(若是這個函數有返回值而且返回值是字符串之類的能夠輸出的東西)
4.{{}}大括號只能綁定內容，不能在html屬性裏使用，如：< a href={{}}} >,這是不行的
5.上面那個可使用 v-bind:href="link" --> 屬性值的綁定,告訴html : 後面的數據是綁定的。
6.使用v-html綁定html標籤而不是直接輸出字符串，不過這樣會形成跨站腳本攻擊，不安全。

幾個簡單的例子：

1. 2個輸入框，1個接收初始值，一個接收步長，兩個按鈕，一個增長一個減小，一行輸出文字。

html部分：

<div id="app">
            起始值<input v-model="start" />
            步長<input v-model="step" />
            <button v-on:click="increase">增長</button>
            <button v-on:click="decrease">減小</button>
            <br />
            <hr />
            <span>輸出結果：{{result}} </span>
        </div>

js部分

<script>
        new Vue({
            el:'#app',
            data:{
                start:0,
                step:0,    
                result:0,
            },
            methods:{
                increase:function(){            
                    if(this.result==0){
                        this.result=parseInt(this.start);
                        this.result+=parseInt(this.step);
                    }else{
                        this.result+=parseInt(this.step);
                    }
                },
                    decrease:function(){            
                    if(this.result==0){
                        this.result=parseInt(this.start);
                        this.result-=parseInt(this.step);
                    }else{
                        this.result-=parseInt(this.step);
                    }
                },
                
            }
            
        
        })
    </script>

這個例子用到了：
1.v-model input框的雙向綁定。
2.v-on:click 監聽click事件，其餘事件道理相似。

2.在上一個例子的基礎上，若是resultPrint是一個函數，返回目前值是大於5仍是小於5， 還有一個增長另外一個變量的按鈕2。

<div id="app">
            起始值<input v-model="start" />
            步長<input v-model="step" />
            <button v-on:click="increase">增長</button>
            <button v-on:click="decrease">減小</button>
            <button v-on:click="increase2">增長2</button>
            <br />
            <hr />
            <span>輸出結果：{{resultPrint()}} </span>
            <br />
            <span>sum2 is {{sum2}}</span>
        </div>

<script>
        new Vue({
            el:'#app',
            data:{
                sum2:0,
                start:0,
                step:0,    
                result:0,
            },
            methods:{
                increase:function(){    
                    
                    if(this.result==0){
                        this.result=parseInt(this.start);
                        this.result+=parseInt(this.step);
                    }else{
                        this.result+=parseInt(this.step);
                    }
                },
                    decrease:function(){            
                    if(this.result==0){
                        this.result=parseInt(this.start);
                        this.result-=parseInt(this.step);
                    }else{
                        this.result-=parseInt(this.step);
                    }
                },
                increase2:function(){    
                    
                    this.sum2++;
                },
                resultPrint:function(){
                    console.log("resultPrint的打印")
                    return this.result>10? '結果大於10':'結果小於10'
                }
                
            }
            
        
        })
    </script>

解析：若是resultPrint是一個函數的話，無論我點擊按鈕1仍是按鈕2，因爲並不知道按鈕2是否會影響到resultPrint的輸出值，所以不管頁面作什麼操做，resultPrint都會渲染從新執行,若是resultPrint是一個計蒜屬性的話，既能夠解決普通屬性沒法加邏輯的侷限，又能夠避免寫成一個函數的話沒必要要的執行。

computed:{
                resultPrint:function(){
                    console.log("resultPrint的打印")
                    return this.result>10? '結果大於10':'結果小於10'
                }
            },

3.v-bind動態改變背景圖片

<div id="app">
            <img v-bind:src="picUrl" v-on:click="changPic" />
        </div>

<script>
        new Vue({
            el:'#app',
            data:{
                index:0,
                sum2:0,
                start:0,
                step:0,    
                result:0,
                picUrl:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1560069366&di=8b211d63775a606bf33b3a362b2b475d&src=http://hbimg.b0.upaiyun.com/54ebececeda0217648263cc944d6cfd413a17cdf2cc6-MGHS0y_fw658'
            },
        
            methods:{
                changPic:function(){
                    if(this.index==0){
                        this.picUrl='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1130583636,2033493811&fm=26&gp=0.jpg'
                        this.index=1;
                    }else{
                        this.picUrl='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1560069366&di=8b211d63775a606bf33b3a362b2b475d&src=http://hbimg.b0.upaiyun.com/54ebececeda0217648263cc944d6cfd413a17cdf2cc6-MGHS0y_fw658'
                        this.index=0;
                    }
                    
                }
                
                
            }
            
        
        })
    </script>