Vue.js講義記録１ - Web竜の巣

唐突ではあるが、ポートフォリオが作りたい。

やはり、何かしら見せられるものがあると無いでは雲泥の差があるだろう。

ということで、twitterでふと相談してみたところ、

「SPAか何か作って見せてくれればいいよ」と言われたのがきっかけ。

で、SPAを作る、となるとjavascriptのフレームワークを学ぶ必要があるよな、

ということでudemyの講義を一つ買った。ちょうどセールだったしね。

https://www.udemy.com/vuejs-from-beginner-to-professional/

と、いうことでこの講義記録を簡単にまとめようと思う。骨子だけ。

本格的には講義を買ってみてほしい。　その方が作者の人にもいいだろうと思う。

基本の書き方

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<div id="app">{{ text }}</div>

<script>
new Vue({
    el:'#app',
    data:{
      text:'Hello world'
    }
})
</script>

大雑把な表記は許してほしい。

基本はnew Vueのパラメータ、elの中でセレクタを使ってidを指定し、

dataの中でパラメータ名と与えるパラメータを指定する。

scriptタグ内でライブラリの使用を宣言してさえいれば、

data内の記述や条件式を　{{ }} 内で書いてネイティブに呼び出すことができる。

単一ファイル内に書かずとも、書くファイルを別に分けることができるため、

よりシンプルに切り分けることもできるようだ。

リンクの張り方

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<div id="app">
    <a v-vind:hlef="url">ブログ</a>
</div>

<script>
new Vue({
    el:'#app',
    data:{
      url:'https://dragonsnest.hatenablog.jp/'
    }
})
</script>

基本的には、スクリプトの中身の特殊文字はエンコードされて表示されてしまう。

そのため、テキストを呼び出す感覚でURLを呼び出すとリンクが張れない。

その代わり、v-bind:hlefという属性を使うとリンクが張れるようだ。

Functionの呼び方

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<div id="app">
    <p>{{ onwork() }}</p>
</div>

<script>
new Vue({
    el:'#app',
    data:{
      count:100
    },
    methods:{
        onwork: function(){
            this.count > 99 ? 'work' : 'not work';
        }
    }
})
</script>

methodsフォルダ内ではfunctionを呼ぶことができる。

その際のパラメータは呼ぶ際はthis.（パラメータ）で呼び出す。