• v-for遍歷整數(shù)

<div id="app">
  <ul>
    <li v-for="n in 10">
        {{ n }}
    </li>
  </ul>
</div>

<script>
    new Vue({
      el: '#app'
    })
</script>       

• v-for遍歷數(shù)組

<div id="app">
    <ol>
        <li v-for='site in sites'>
            {{site.name}}
        </li>
    </ol>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            sites: [
                {name: 'baidu'},
                {name: 'sina'},
                {name: 'qq'}
            ]
        }
    })
</script>

/*注意：數(shù)組也可以定義在v-for的屬性值中*/
<ul>
    <li v-for='n in [1,3,5,7]'>
        {{ n }}
    </li>
</ul>

• v-for遍歷數(shù)組帶索引

<div>
    <ul>
        <li v-for='(site, index) in sites'>
            {{index}} : {{site.name}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            sites: [
                {name: 'baidu'},
                {name: 'sina'},
                {name: 'qq'}
            ]
        }
    })
</script>

• v-for遍歷對(duì)象

<div id='#app'>
    <ul>
        <li v-for='value in website'>
            {{value}}
        </li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            website: {
                name: '百度一下',
                url: 'http://www.baidu.com',
                desc: '全球最大的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的                      中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。'
            }
        }
    })
</script>

• v-for遍歷對(duì)象key-value

<div>
    <ul>
        <li v-for='(value, key) in website'>
            {{key}} : {{value}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            website: {
                name: '百度一下',
                url: 'http://www.baidu.com',
                desc: '全球最大的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的                      中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。'
            }
        }
    })
</script>

• v-for遍歷對(duì)象key-value 帶索引

<div>
    <ul>
        <li v-for='(value, key, index) in website'>
            {{index}} : {{key}} : {{value}} 
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            website: {
                name: '百度一下',
                url: 'http://www.baidu.com',
                desc: '全球最大的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的                      中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。'
            }
        }
    })
</script>

Vue.js構(gòu)造器（2）

構(gòu)造器的格式如下：

<script>
    var vm = new Vue({
        el: '#id',
        data: {
            //數(shù)據(jù)
        },
        methods: {
            //函數(shù)
        },
        computed: {
            //計(jì)算屬性
        },
        watch: {
            //監(jiān)聽(tīng)屬性
        }
    })
</script>

1、計(jì)算屬性

計(jì)算屬性關(guān)鍵詞: computed。計(jì)算屬性在處理一些復(fù)雜邏輯時(shí)是很有用的。

（1） computed getter

<div id="app">
  <p>原始字符串: {{ msg }}</p>
  <p>計(jì)算后反轉(zhuǎn)字符串: {{ reversedMsg }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello!'
        },
        computed: {
            reversedMsg: function () {
                return this.msg.split('').reverse().join('')
            }
        }
    })
</script>

我們可以使用 methods 來(lái)替代 computed，效果上兩個(gè)都是一樣的，但是 computed 是基于它的依賴(lài)緩存，只有相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新取值。而使用 methods ，在重新渲染的時(shí)候，函數(shù)總會(huì)重新調(diào)用執(zhí)行。

可以說(shuō)使用 computed 性能會(huì)更好，但是如果你不希望緩存，你可以使用 methods 屬性。

（2）computed setter

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '百度',
            url: 'http://www.baidu.com'
        },
        computed: {
            site: {
                // getter
                get: function () {
                    return this.name + ' ' + this.url
                },
                // setter
                set: function (newValue) {
                    var names = newValue.split(' ')
                    this.name = names[0]
                    this.url = names[names.length - 1]
                }
            }
        }   
    })
    // 調(diào)用setter， vm.name 和 vm.url 也會(huì)被對(duì)應(yīng)更新
    vm.site = '新浪新聞 http://www.sina.com';
    document.write('name: ' + vm.name);
    document.write('<br>');
    document.write('url: ' + vm.url);
</script>

2、監(jiān)聽(tīng)屬性

監(jiān)聽(tīng)屬性關(guān)鍵字：watch，可以通過(guò) watch 來(lái)響應(yīng)數(shù)據(jù)的變化

<div id="computed_props">
    分 : <input type="text" v-model="minutes"> 
    秒 : <input type="text" v-model="seconds">
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#computed_props',
        data: {
            minutes: 0,
            seconds: 0
        },
        methods: {},
        computed: {},
        watch: {
            minutes: function(val) {
                this.minutes = val;
                this.seconds = val * 60;
            },
            seconds: function(val) {
                this.minutes = val / 60;
                this.seconds = val;
            }
        }
    });
</script>

Vue.js 樣式綁定

class 與 style 是 HTML 元素的屬性，用于設(shè)置元素的樣式，我們可以用 v-bind 來(lái)設(shè)置樣式屬性。

Vue.js v-bind 在處理 class 和 style 時(shí)， 專(zhuān)門(mén)增強(qiáng)了它。表達(dá)式的結(jié)果類(lèi)型除了字符串之外，還可以是對(duì)象或數(shù)組。

1、綁定內(nèi)聯(lián)樣式style

• 可以通過(guò) v-bind:style 直接設(shè)置樣式

<div id="app">
    <div v-bind:style='{ background: mycolor, fontSize: mysize + "px"}'>我是一個(gè)div</div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            mycolor: 'pink',
            mysize: 30              
        }
    })
</script>

• 也可以直接綁定到一個(gè)樣式對(duì)象，讓模板更清晰

<div id="app">
    <div v-bind:style='mystyle'>我是一個(gè)div</div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            mystyle: {
                background: 'pink',
                fontSize: '30px'    
            }
        }
    })
</script>

• 可以使用數(shù)組將多個(gè)樣式對(duì)象應(yīng)用到一個(gè)元素上

<div id="app">
    <div v-bind:style='[back, font]'>我是一個(gè)div</div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            back: {
                background: 'pink',
                color: 'blue'   
            },
            font: {
                fontSize: '30px',
                fontWeight: 'bold'  
            }
        }
    })
</script>

2、綁定屬性class

• 可以通過(guò)v-bind:class設(shè)置樣式

<div id="app">
    <div v-bind:class="{classA: isA }"></div>
</div>
<script>
    new Vue({
      el: '#app',
      data: {
        isA: true
      }
    })
</script>
<style>
    .classA {
        width: 100px;
        height: 100px;
        background: green;
    }
</style>

• 可以傳入多個(gè)屬性來(lái)改變樣式

<div class="static"
     v-bind:class="{ classA: isA, classB: isB }">
</div>
<script>
    new Vue({
      el: '#app',
      data: {
        isA: true,
        isB: true
      }
    })
</script>
<style>
    .classA {
        width: 100px;
        height: 100px;
        background: green;
    }
    .classB {
        background: red;
    }
</style>

• 可以直接綁定數(shù)據(jù)里的一個(gè)對(duì)象

<div class="static"
     v-bind:class="object">
</div>
<script>
    new Vue({
      el: '#app',
      data: {
          object: {
              classA: true,
              classB: true
          }
      }
    })
</script>
<style>
    .classA {
        width: 100px;
        height: 100px;
        background: green;
    }
    .classB {
        background: red;
    }
</style>

• 可以使用數(shù)組綁定多個(gè)樣式

<div id="app">
    <div v-bind:class="[classA, classB]"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    classA: 'A',
    classB: 'B'
  }
})
</script>
<style>
.A {
    width: 100px;
    height: 100px;
    background: green;
}
.B {
    background: red;
}

• 可以使用三元表達(dá)式來(lái)切換列表中的 class

<div id="app">
    <div v-bind:class="[isA ? aClass : bClass]"></div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isA: true,
            aClass: 'A',
            bClass: 'B'
        }
    })
</script>
<style>
.A {
    width: 100px;
    height: 100px;
    background: red;
}
.B {
    width: 100px;
    height: 100px;
    background: green;
}
</style>

Vue.js 表單

可以使用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。 v-model 會(huì)根據(jù)控件類(lèi)型自動(dòng)選取正確的方法來(lái)更新元素。

v-model.png

• v-model會(huì)忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實(shí)例（new Vue({})）的數(shù)據(jù)(data)作為數(shù)據(jù)來(lái)源。你應(yīng)該通過(guò) JavaScript 在組件的 data選項(xiàng)中聲明初始值。

• 對(duì)于需要使用輸入法 (如中文、日文、韓文等) 的語(yǔ)言，你會(huì)發(fā)現(xiàn) v-model不會(huì)在輸入法組合文字過(guò)程中得到更新。如果你也想處理這個(gè)過(guò)程，請(qǐng)使用 input 事件。

1、input

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

2、textarea

在文本區(qū)域插值 (<textarea></textarea>) 并不會(huì)生效，應(yīng)用 v-model 來(lái)代替。

<textarea v-model="message" placeholder="add multiple lines"></textarea><br>
<span>Multiline message is:</span>
<p>{{ message }}</p>

3、checkbox

• 單個(gè)復(fù)選框，綁定到布爾值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

• 多個(gè)復(fù)選框，綁定到同一個(gè)數(shù)組：

<div id='app'>
  <input type="checkbox" id="zhang3" value="張三" v-model="checkedNames">
  <label for="zhang3">張三</label>
  <input type="checkbox" id="li4" value="李四" v-model="checkedNames">
  <label for="li4">李四</label>
  <input type="checkbox" id="wang5" value="王五" v-model="checkedNames">
  <label for="wang5">王五</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

<script>
    new Vue({
      el: '#app',
      data: {
        checkedNames: []
      }
    })
</script>

4、radio

<div id="app">
    <label> <input type='radio' name="single" value="H5" v-model='choice' /> H5 </label>
    <label> <input type='radio' name="single" value="嵌入式" v-model='choice' /> 嵌入式 </label>
    <label> <input type='radio' name="single" value="java" v-model='choice' /> java </label><br />
    <span>{{choice}}</span>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            choice: []
        }
    })
</script>

5、select

• 單選時(shí)

<div id="app">
  <select v-model="selected">
    <option disabled value="">請(qǐng)選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script>
    new Vue({
      el: '#app',
      data: {
        selected: ''
      }
    })
</script>

• 多選時(shí)（綁定到一個(gè)數(shù)組）

<div id="app">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
<script>
    new Vue({
      el: '#app',
      data: {
        selected: []
      }
    })
</script>

• 用v-for渲染的動(dòng)態(tài)選項(xiàng)

<div id='app'>
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>

<script>
     new Vue({
      el: '#app',
      data: {
        selected: 'A',
        options: [
          { text: 'One', value: 'A' },
          { text: 'Two', value: 'B' },
          { text: 'Three', value: 'C' }
        ]
      }
    })   
</script>

6、修飾符

（1）.lazy：在默認(rèn)情況下，v-model在每次 input事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change事件進(jìn)行同步：

<div id="app">
    <input type="text" v-model.lazy='msg'/><br />
    <p>{{msg}}</p>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            msg: '你好'
        }
    })
</script>

（2）.number：如果想自動(dòng)將用戶(hù)的輸入值轉(zhuǎn)為數(shù)值類(lèi)型，可以給 v-model 添加 number修飾符 。這通常很有用，因?yàn)榧词乖?type="number" 時(shí)，HTML 輸入元素的值也總會(huì)返回字符串。

<div id="app">
    <input type="text" v-model.number="message">
    <p>{{message}}</p>
    <input @click="assay" type="button" value="獲取"> 
</div>
<script>
new Vue({
    el: '#app',
    data: {
        message: ""
    },
    methods: {
        assay () {
            console.log(typeof this.message);
        }
    }
})
</script>

需要注意的是：number修飾符并不是限制用戶(hù)的輸入,而是將用戶(hù)輸入的數(shù)據(jù)嘗試綁定為 js 中的 number類(lèi)型 。如果用戶(hù)輸入的是數(shù)字，那么會(huì)得到一個(gè)number類(lèi)型的值，而如果用戶(hù)輸入的不是數(shù)字，這個(gè)指令并不會(huì)產(chǎn)生任何效果。

（3）.trim：如果要自動(dòng)過(guò)濾用戶(hù)輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過(guò)濾輸入

<div id="app">
    <input type="text" v-model.trim="message">
    <p>{{message}}</p>
    <input @click="assay" type="button" value="獲取"> 
</div>
<script>
new Vue({
    el: '#app',
    data: {
        message: ""
    },
    methods: {
        assay () {
            console.log(this.message);
        }
    }
})
</script>

Vue.js 組件

組件（Component）是 Vue.js 最強(qiáng)大的功能之一。

組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。

組件相當(dāng)于新建一個(gè)屬于自己的標(biāo)簽。但是這個(gè)標(biāo)簽的功能很強(qiáng)大，可以有很多特殊的功能。

組件系統(tǒng)讓我們可以用獨(dú)立可復(fù)用的小組件來(lái)構(gòu)建大型應(yīng)用，幾乎任意類(lèi)型的應(yīng)用的界面都可以抽象為一個(gè)組件樹(shù)：

components.png

1、全局組件

全局注冊(cè)的組件可以用在任何新創(chuàng)建的 Vue 根實(shí)例 (new Vue) 的模板中 ，需要注意的是：全局組件必須寫(xiě)在Vue實(shí)例創(chuàng)建之前，才在該根元素下面生效

（1）注冊(cè)全局組件語(yǔ)法格式 如下：定義在script中，new Vue({ })之前

<script>
    Vue.component(tagName, options)

    參數(shù)說(shuō)明：
    tagName：組件名稱(chēng)
    options：配置選項(xiàng)
</script>

（2）調(diào)用組件

<tagName></tagName>

示例：

<div id="app">
    <!-- 3、使用組件 -->
    <my-component></my-component>
</div>
 
<script>
    // 2、注冊(cè)全局組件
    Vue.component('my-component', {
      template: '<h1>自定義組件!</h1>'
    })
    // 1、創(chuàng)建根實(shí)例
    new Vue({
      el: '#app'
    })
</script>

2、局部組件

如果不需要全局注冊(cè)，或者是讓組件使用在其它組件內(nèi)，可以用選項(xiàng)對(duì)象的components屬性實(shí)現(xiàn)局部注冊(cè)。

<div id="app">
    <!-- 3、my-componen只能在#app下使用 -->
    <my-component></my-component>
</div>
 
<script>
    //1、創(chuàng)建局部組件
    var Child = {
      template: '<h1>自定義組件!</h1>'
    }

    // 創(chuàng)建根實(shí)例
    new Vue({   
      el: '#app',
      components: {
          //2、在根實(shí)例中注冊(cè)局部組件
         'my-component': Child
      }
    })
</script>

3、組件中的屬性

關(guān)于組件中的其他屬性，可以和實(shí)例中的一樣，但是data屬性必須是一個(gè)函數(shù)。

（1）全局組件

<div id="app">
  <my-component></my-component>
</div>
<script>
    Vue.component("my-component",{
        template:"<button @click='add'>全局組件：{{m}}</button>",
        data:function(){
            return {
                m:10
            }
        },
        methods:{
            add:function(){
                this.m++
            }
        }
     });
     new Vue({
        el:"#app"
     })
</script>

（2）局部組件

<div id="app">
  <child-component></child-component>
</div>
<script>
  var child={
    template:"<button @click='add'>我是局部組件:{{m}}</button>",
    data:function(){
        return {
            m:1
        }
    },
    methods:{
      add:function(){
        this.m++
      }
    }
  };
  new Vue({
    el: "#app",
    components:{
      "child-component":child
    }
  })
</script>

4、prop

prop 是父組件用來(lái)傳遞數(shù)據(jù)的一個(gè)自定義屬性。

父組件的數(shù)據(jù)需要通過(guò) props 把數(shù)據(jù)傳給子組件，子組件需要顯式地用 props 選項(xiàng)聲明 "prop"

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
    // 注冊(cè)全局組件
    Vue.component('child', {
      // 聲明 props
      props: ['message'],
      template: '<span>{{ message }}</span>'
    })
    // 創(chuàng)建根實(shí)例
    new Vue({
      el: '#app'
    })
</script>

Vue.js 路由

有時(shí)候，我們?cè)谟胿ue的時(shí)候會(huì)有這樣的需求，比如一個(gè)管理系統(tǒng)，點(diǎn)了左邊的菜單欄，右邊跳轉(zhuǎn)到一個(gè)新的頁(yè)面中，而且刷新的時(shí)候還會(huì)停留在原來(lái)打開(kāi)的頁(yè)面。

又或者，一個(gè)頁(yè)面中幾個(gè)不同的畫(huà)面來(lái)回點(diǎn)擊切換，這兩種情況都可以用vue router路由來(lái)解決

<!-- 導(dǎo)入js文件 -->
<script src="https://cdn.bootcss.com/vue-router/2.4.0/vue-router.js"></script>

<div id="app">
    <div>
    <!--
        使用router-link組件來(lái)導(dǎo)航，
        通過(guò) to屬性就是指向某個(gè)具體的鏈接，鏈接的內(nèi)容會(huì)被渲染到router-view標(biāo)簽中
        router-link會(huì)被渲染成a標(biāo)簽，
        例如第一個(gè)會(huì)變成<a href="#/first">第一個(gè)頁(yè)面</a>,前面加了個(gè)#
    -->
        <router-link to="/first">第1個(gè)頁(yè)面</router-link>
        <router-link to="/second">第2個(gè)頁(yè)面</router-link>
        <router-link to="/third">第3個(gè)頁(yè)面</router-link>
    </div>
            
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
</div>

<script type="text/javascript">
    //1、申明三個(gè)模板（定義路由組件）
    var first = { template: '<p>this is first page</p>' };
    var second = { template: '<p>this is second page</p>' };
    var third = { template: '<p>this is third page</p>' };
        
    //2、定義路由，每個(gè)路由應(yīng)該映射一個(gè)組件
    //其中，component屬性是通過(guò) Vue.extend()創(chuàng)建的組件構(gòu)造器，
    //或者，只是一個(gè)組件配置對(duì)象。
    var routes = [
        { path: '/first', component: first },
        { path: '/second', component: second },
        { path: '/third', component: third }
    ];
        
    //3、創(chuàng)建VueRouter實(shí)例
    var router = new VueRouter({
        routes  //(縮寫(xiě))相當(dāng)于routes: routes
    });
        
    /*4、創(chuàng)建和掛載根實(shí)例
     * 通過(guò)router配置參數(shù)注入路由，給vue對(duì)象綁定路由
     * .$mount("#app")手動(dòng)掛載，用來(lái)延遲掛載，跟
     *  const app = new Vue({
     *   el:"#app"
     *   router
     *  });
     * 效果是一樣的
     */
    const app = new Vue({
        router
    }).$mount("#app");
</script>

運(yùn)行步驟：

1. 當(dāng)router-link對(duì)應(yīng)的標(biāo)簽被點(diǎn)擊時(shí)，比如此時(shí)點(diǎn)擊第二個(gè)，to的值是/second,那么實(shí)際的地址就是當(dāng)前頁(yè)面地址+#/second。
2. Vue會(huì)找到當(dāng)前vue實(shí)例的路由里的routes里面path為/second的路由。
3. 會(huì)將找到的這一行記錄的模板component渲染到router-view里面。