根據上一節搭建的hello-world工程（包含Router），用Webstorm打開，我們先運行一下工程。

界面如下

..

我將在About裏面介紹一下Vue的相關內容。

打開About.vue，修改內容為：

<template>
    <div class="about">
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
    export default {
        data: ()=> ({
            msg: 
 
‘我的第一個Vue‘
        })
    }
</script>

結果：

-------------------------------------------------------------------

看起來很簡單，實際上Vue在背後做了大量工作，數據和DOM模型已經建立了關系，所有東西都是響應式的。比如：

<template>
    <div class="about">
        <h1 v-bind:title="msg">鼠標懸停幾秒鐘查看此處動態綁定的提示信息！</h1>
    </
 
div>
</template>
<script>
    export default {
        data: ()=> ({
            msg: ‘頁面加載於 ‘ + new Date().toLocaleString()
        })
    }
</script>

查看頁面：

你這裏看到的v-bind是vue的指令，它能將數據綁定到DOM元素的具體屬性上，這裏綁定到了title屬性上

-------------------------------------------------------------------

再來看一個明顯一點的數據綁定

<template>
    <div class="about">
        <h1 v-text="msg"></h1>
        <input type="text" v-model="msg"/>
    </div>
</template>
<script>
    export default {
        data: ()=> ({
            msg: ‘‘
        })
    }
</script>

頁面：

這裏的v-model是表單控件綁定，只能用於<input>、<select>、<textarea>和components。在上面的例子中，數據msg綁定到input和h1，所以修改input內容就能改變標題的內容。

-------------------------------------------------------------------下面簡單介紹一下條件和循環

If

<template>
    <div class="about">
        <h1 v-if="show">如果為true你就能看到</h1>
    </div>
</template>
<script>
    export default {
        data: ()=> ({
            show: true
        })
    }
</script>

頁面：

For

<template>
    <div class="about">
        <p v-for="i,index in data" :key="index" v-text="i"></p>
    </div>
</template>
<script>
    export default {
        data: ()=> ({
            data: [‘Apple‘,‘Banana‘,‘Orange‘]
        })
    }
</script>

頁面：

-------------------------------------------------------------------事件處理 v-on

<template>
    <div class="about">
        <button v-on:click="reverseMessage">翻轉</button>
        <p>{{ message }}</p>
    </div>
</template>
<script>
    export default {
        data: ()=> ({
            message: ‘Hello Vue.js!‘
        }),
        methods: {
            reverseMessage: function () {
                this.message = this.message.split(‘‘).reverse().join(‘‘)
            }
        }
    }
</script>

頁面：

-------------------------------------------------------------------簡單介紹一下組件

在components目錄下面新建一個vue文件，MyList.vue

輸入內容

MyList.vue

<template>
    <li>{{dataList.text}}</li>
</template>

<script>
    export default {
        name: "MyList",
        // props是vue的一個特性，props 可以是數組或對象，用於接收來自父組件的數據
        props: [‘dataList‘]
    }
</script>

<style scoped>

</style>

About.vue

<template>
    <div class="about">
        <ul>
            <!--組件：my-list，data-list是在MyList組件裏面定義的props，數據從父組件傳入-->
            <my-list v-for="item in items" :key="item.id" :data-list="item"></my-list>
        </ul>
    </div>
</template>
<script>
    // 引入組件
    import MyList from ‘../components/MyList‘

    export default {
        components: {MyList},
        data: ()=> ({
            items: [
                {id:1,text:‘Apple 蘋果‘},
                {id:2,text:‘Banana香蕉‘},
                {id:3,text:‘Orange橘子‘},
            ]
        })
    }
</script>

頁面：

Vue（二）簡單入門