Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8728

Vue.jsとは??

$
0
0

今回は、Vue.jsについて学習していきたいと思います。
Vue.jsとは、フロントエンドで使われる言語です。Javascriptのフレームワークになります。
HTMLとCSSで書いたあとに、動きを付けることができます。
フロントエンドではよく使われる言語のようです。
他にも、Javascriptのフレームワークはたくさんあり、用途ごとに使い分けて行きます。
また、Vue.jsには更にフレームワークが存在するのですが、ここでは割愛させていただきます。

Vue.jsを使うメリット

Vue.jsを使うメリットは、いくつかあります。
①HTMLとCSS
②Javascriptの知識があれば割とすんなり入ってくる。
③DOMがを自動的処理してくれる。(JsからHTMLとCSSのデータを取得してくれる)
です。

導入の仕方

コマンドを使ったりすることは特にないですが
HTMLとVue自体にお決まりのような記述内容があります。

index.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Vue.js practice</title></head><body><divid="app">
    {{ message }}
  </div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script><script src="script/script.js"></script></body></html>
script.js
varapp=newVue({el:'#app',data:{message:'こんにちわ!'}})

上記が主なVue.jsの雛形となっています。
ブラウザで表示すると以下のようになります。

スクリーンショット 2021-03-22 16.17.45.png

HTML側からのVue.js

① Vue Devtools
これを使うことによりVueアプリケーションのバグを簡単に見つけることができるため、インストールしとくことをおすすめします。
HTMLでは以下のように記述します。bodyタグ一番最後に入力します。
また、その下にJsフォルダとそのファイルを読み込んでくれるように記述します。
"https://cdn.jsdelivr.net/npm/vue@2.6.12"
②divタグ
後で記述しますが、これは、Vue.jsでインスタンスの展開はここだよ〜って意味です。
で、divタグの中に入れてほしい単語などを記述します。
UIの領域になります。Ul/UXについては後ほど学習していきます。

JS側からの実装

①var
一行目にVarという記述がみられますね。これは、Vueの中核。これがなければそもそも動きません。心臓です。
ちなみにVarとはJsでの変数の宣言の場合に使われます。
②data
これはオブジェクト、配列の指定になります。詳しくは後に学習します。

以上がVue.jsを使うときに主に記入する内容になっています。


Viewing all articles
Browse latest Browse all 8728

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>