1. 程式人生 > >Vue 學習隨筆二 - 簡單說明

Vue 學習隨筆二 - 簡單說明

接上篇,點選連結會出現如下頁面,我這個demo因為做了一些了,臨時改回初始狀態,一些樣式已經不一樣了,見諒:

程式碼如下:

<template>
<div>{{ msg }}</div>
</template>

<script>
export default {
data() {
return {
msg: 'hello vue '
}
}
}
</script>

這應該是最簡單的一個VUE 示例了,這時候我們體驗一下VUE最核心的功能,你直接修改 data 方法中的 msg 變數,頁面會實時重新整理。
比如將 msg 修改成 ‘hello vue 123’,如下圖:

OK,到這裡,基本的介紹結束,有時間各位可以看一下官方的文件,對一些基本概念有一個瞭解。

英文:https://vuejs.org/
中文:https://cn.vuejs.org/v2/guide/

隨時更改的入門級程式碼:https://github.com/szwangyu/kotlin-vue/tree/master/vuedemo