Vue.jsで表示させる方法三種類

表示させるには、3種類ある

1. DOMとマスタッシュタグで表示させる方法
2. templateプロパティを使って文字列のみでかく
3. render関数でかく

例

「こんにちはユーザー名さん」
をブラウザに表示させるために・・・

1.普通にテンプレートでかく

index.html

<div id="app">
　<p>こんにちは</p>
  <p>{{name}}</p>
  <p>さん</p>
</div>

main.js

new Vue({
  el:'#app'
  data:{
   name:'ユーザー名',
 }
})

2.templateでかく

以下のような感じで
(基本的には使わないけど)

index.html

<div id="app1"></div>

main.js

var data = {
  name:'ユーザー名'
}

var vm = new Vue ({
    el:'#app1',
    data:data,  
    template:'<p>こんにちは{{name}}さん</p>'
})

3.render関数でかく

index.html

<div id="app"></div>

main.js

new Vue ({
    data:{
        name:'ユーザー名'
    },
  render:function(createElement){
  //第一引数でタグをとる
  //第二引数で中に入れたいもの(JavaScriptのように)
        return createElement('h1','こんにちは'+this.name+'さん');
    },
}).$mount('#app')

↑createElement出なくてもhとかでもなんでも良い