• 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遍歷對象

<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)民更便捷地獲取信息眶根，找到所求。百度超過千億的                      中文網(wǎng)頁數(shù)據(jù)庫边琉，可以瞬間找到相關(guān)的搜索結(jié)果属百。'
            }
        }
    })
</script>

• v-for遍歷對象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)民更便捷地獲取信息变姨，找到所求族扰。百度超過千億的                      中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果定欧。'
            }
        }
    })
</script>

• v-for遍歷對象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)民更便捷地獲取信息，找到所求砍鸠。百度超過千億的                      中文網(wǎng)頁數(shù)據(jù)庫扩氢，可以瞬間找到相關(guān)的搜索結(jié)果。'
            }
        }
    })
</script>

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

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

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

1爷辱、計算屬性

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

（1） computed getter

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

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

可以說使用 computed 性能會更好迟螺，但是如果你不希望緩存，你可以使用 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 也會被對應(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)聽屬性

監(jiān)聽屬性關(guān)鍵字：watch排霉，可以通過 watch 來響應(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 來設(shè)置樣式屬性攻柠。

Vue.js v-bind 在處理 class 和 style 時球订， 專門增強了它。表達式的結(jié)果類型除了字符串之外瑰钮，還可以是對象或數(shù)組冒滩。

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

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

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

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

• 也可以直接綁定到一個樣式對象浪谴，讓模板更清晰

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

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

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

<div id="app">
    <div v-bind:style='[back, font]'>我是一個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

• 可以通過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>

• 可以傳入多個屬性來改變樣式

<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ù)里的一個對象

<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ù)組綁定多個樣式

<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;
}

• 可以使用三元表達式來切換列表中的 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 會根據(jù)控件類型自動選取正確的方法來更新元素苟耻。

v-model.png

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

• 對于需要使用輸入法 (如中文、日文智蝠、韓文等) 的語言蝗茁，你會發(fā)現(xiàn) v-model不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程寻咒，請使用 input 事件哮翘。

1、input

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

2毛秘、textarea

在文本區(qū)域插值 (<textarea></textarea>) 并不會生效饭寺，應(yīng)用 v-model 來代替阻课。

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

3、checkbox

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

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

• 多個復(fù)選框限煞，綁定到同一個數(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

• 單選時

<div id="app">
  <select v-model="selected">
    <option disabled value="">請選擇</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ù)組）

<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渲染的動態(tài)選項

<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：在默認情況下，v-model在每次 input事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步 健霹。你可以添加 lazy 修飾符旺上，從而轉(zhuǎn)變?yōu)槭褂?change事件進行同步：

<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：如果想自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 v-model 添加 number修飾符 糖埋。這通常很有用宣吱，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串瞳别。

<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修飾符并不是限制用戶的輸入,而是將用戶輸入的數(shù)據(jù)嘗試綁定為 js 中的 number類型 征候。如果用戶輸入的是數(shù)字，那么會得到一個number類型的值祟敛，而如果用戶輸入的不是數(shù)字疤坝，這個指令并不會產(chǎn)生任何效果。

（3）.trim：如果要自動過濾用戶輸入的首尾空格馆铁，可以添加 trim 修飾符到 v-model 上過濾輸入

<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 最強大的功能之一卒煞。

組件可以擴展 HTML 元素，封裝可重用的代碼叼架。

組件相當于新建一個屬于自己的標簽畔裕。但是這個標簽的功能很強大，可以有很多特殊的功能乖订。

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

components.png

1、全局組件

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

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

<script>
    Vue.component(tagName, options)

    參數(shù)說明：
    tagName：組件名稱
    options：配置選項
</script>

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

<tagName></tagName>

示例：

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

2眠饮、局部組件

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

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

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

3已旧、組件中的屬性

關(guān)于組件中的其他屬性秸苗，可以和實例中的一樣，但是data屬性必須是一個函數(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 是父組件用來傳遞數(shù)據(jù)的一個自定義屬性。

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

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

Vue.js 路由

有時候檀咙，我們在用vue的時候會有這樣的需求，比如一個管理系統(tǒng)嗦枢，點了左邊的菜單欄，右邊跳轉(zhuǎn)到一個新的頁面中屯断，而且刷新的時候還會停留在原來打開的頁面文虏。

又或者，一個頁面中幾個不同的畫面來回點擊切換殖演，這兩種情況都可以用vue router路由來解決

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

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

<script type="text/javascript">
    //1丸相、申明三個模板（定義路由組件）
    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、定義路由彼棍，每個路由應(yīng)該映射一個組件
    //其中灭忠，component屬性是通過 Vue.extend()創(chuàng)建的組件構(gòu)造器，
    //或者座硕，只是一個組件配置對象弛作。
    var routes = [
        { path: '/first', component: first },
        { path: '/second', component: second },
        { path: '/third', component: third }
    ];
        
    //3、創(chuàng)建VueRouter實例
    var router = new VueRouter({
        routes  //(縮寫)相當于routes: routes
    });
        
    /*4华匾、創(chuàng)建和掛載根實例
     * 通過router配置參數(shù)注入路由映琳，給vue對象綁定路由
     * .$mount("#app")手動掛載，用來延遲掛載蜘拉，跟
     *  const app = new Vue({
     *   el:"#app"
     *   router
     *  });
     * 效果是一樣的
     */
    const app = new Vue({
        router
    }).$mount("#app");
</script>

運行步驟：

1. 當router-link對應(yīng)的標簽被點擊時萨西，比如此時點擊第二個，to的值是/second,那么實際的地址就是當前頁面地址+#/second旭旭。
2. Vue會找到當前vue實例的路由里的routes里面path為/second的路由谎脯。
3. 會將找到的這一行記錄的模板component渲染到router-view里面。