Vue.js（/vjuː/，简称Vue）是一个用于建立使用者介面的开源MVVM前端JavaScript框架，也是一个建立单页应用的Web应用框架。--维基百科

Vue基本架构

//jsconst vm = Vue.createApp({    data(){        return{            text:"hello world",        }    },    methods:{        show:function(){            this.text=this.text+"!!!"        }    }})vm.mount("#idname")

data以function形式储存资料，vm.mount挂载于id为idname的位置上。

mount 挂载
挂载可理解为作用範围，Vue元件作用于被挂载的<tag>标籤内</tag>

//html<div id="idname">    {{text}}</div>

此处的div即为前述vue所挂载位置(id="idname")，div所包围的範围内皆可使用已挂载之Vue的资料(data)与方法(methods)
{{ text }}是引用Vue data的方法，会连同" {{ }} "直接替换成text内容也就是" hello world "。

v-on

//html<div id="idname">    {{text}}--> <input type="submit" @click="show()" value="submit"></div>

input设置为submit type并且@click事件，在此input被点击(click)之后执行show( )使得网页内容的"hello world"后面增加"!!!"

@click="show( )" 是 v-on:click="show( )" 的简写

v-model

//html<div id="idname">    {{text}}--> <input type="textarea" v-model="text" value=""></div>

input type为textarea使用者可输入字串，v-model双向绑定vue data内的text并与input同步，input更改会连动text并且同时{{ text }}会跟着更新。

双向绑定 当其中一者更改，另一方也会跟着更动。

v-for

//html<div v-for="i in arr">{{text}}</div>

依照arr内个数迭代，有多少个做多少个