Zenn
📝

Vue.jsを初めて使ってみる（part 1）

2020/09/19に公開
JavaScript
Vue.js
tech

ローカル環境にVue.jsをインストールする

  1. ターミナルでインストールのコマンドをうつ
    npm install -g @vue/cli
  2. プロジェクトを作成する
    vue create hello_world
  3. プロジェクトをlocalhostで実行する
    すばらしいことにVue.jsはGUIでプロジェクトを実行してそのアナリティクスを見たり、GUIからプロジェクトを作成することもできるので初心者でも躓かずに進められる気がします。
    vue ui

コンポーネントを作る

Vue.jsではReactのようにコンポーネントを作って何度でも再利用できます。
vue create hello_worldでプロジェクトを作成したときに生成されたsrcフォルダー内のApp.vueとsrc/componentsフォルダー内のHelloWorld.vueの部分です。

  1. 新しいコンポーネントを作るにはまず、src/componentsフォルダー内に名前.vueという名前で作成します。
  2. コンポーネントの書き方は以下です。（個人的にjs、css、htmlがきれいに分かれていて好きです。）
    <template>
	<div>
			HTML要素
	</div>
</template>

<script>
スクリプト関係
</script>

<style scoped>
CSS関係
</style>
  3. メソッドを作る。
    <script></script>タグ内にexport default{}と書き、{}の中にmethods: {関数名: function(){処理内容}}を記述します。例としては、
    export default {
	methods: {
		print_something: function() {
			 console.log("Something");
  4. オンクリックイベントでメソッドを使う。
    <button v-on:click="print_something">print!</button>

Discussion