#インストール
Vue.jsの公式サイトからvueのリンクをHTML中のbodyの上で入れて、そして自分作るVueオブジェクトリンクを一番下で書き置いて、こられは最初のステップです。
vue_install.html
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
.
.
.
<script src="js/main.js"></script>
</body>
#データバインディング
先ずはVueオブジェクトを作る、その中はelはHTMLタグを指定されたidまたはclass名（#id,.class)、dataは画面に表示したいの内容です。
vue_object.js
var test=new Vue({
el:'#app',
data:{
name:'larry'
}
});
それから、HTMLを示す書き方です。{{}}とv-textはどちらができます。
data_view.html
<p> {{ name }}</p>
<div v-text="name"></div>
ちなみに、Vueオブジェクトのdata中にHTMLのタグを入れる方法もあります。
data_view.js
var test=new Vue({
el:'.nickname',
data:{
nickname:'<span>sam</span>'
}
v-modelはデータバインディングの機能です。データバインディングはビュー（ここはHTML）とモデル(vueオブジェクト)を繋いで、データ画面から入力同時にvueオブジェクトのデータ内容を変更でき、vueオブジェクトのデータ内容すると、画面が同時に変更できることです。
vue_v-model.html
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<div class="app">
<p> {{ name }}</p>
<p><input type="text" v-model="name"></p>
</div>
<script src="js/main.js"></script>
</body>
vue_v-model.js
var test=new Vue({
el:'.app',
data:{
name:'larry',
nickname:'<span>sam</span>'
}
});
#注意点
データバインディングをコントロール一できるDOMの組数は一つしかない。
error_01.html
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<div class="app">
<p> {{ name }}</p>
<p> {{ name }}</p>
<p><input type="text" v-model="name"></p>
</div>
<div class="app"> <!--第二組は無効です-->
<p> {{ name }}</p>
<p><input type="text" v-model="name"></p>
</div>
<script src="js/main.js"></script>
</body>
二重結構も無効になる。
double_struct.html
<div class="app">
<p> {{ name }}</p>
<div v-text="name"></div>
<div class="app"> <!--無効です-->
<p> {{ name }}</p>
<p><input type="text" v-model="name"></p>
</div>
<p><input type="text" v-model="name"></p>
</div>