facebook twitter hatena line email

「Javascript/vue/基本」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(javascriptを動作させる)
 
(同じ利用者による、間の50版が非表示)
行1: 行1:
  
==vue.js記述==
+
==vue.js基本的な記述方法==
 
以下記述でid内のdivにだけ適用できる。
 
以下記述でid内のdivにだけ適用できる。
  
行14: 行14:
  
 
==テキスト出力==
 
==テキスト出力==
  <nowiki>{{text1}}</nowiki>
+
  <nowiki><div id="column1">
 +
  {{text1}}
 +
</div></nowiki>
 +
 
 +
==テキストif出力==
 +
<nowiki><div v-if="text1">
 +
  {{text1}}
 +
</div>
 +
<div v-else>no data</div></nowiki>
  
 
==inputボックス出力==
 
==inputボックス出力==
行30: 行38:
 
==ボタン処理==
 
==ボタン処理==
 
  <button v-on:click="click1">登録</button>
 
  <button v-on:click="click1">登録</button>
 +
<button @click="click1">登録</button> @clickでもよい
 
  <nowiki>{{text1}} → {{text2}}</nowiki>
 
  <nowiki>{{text1}} → {{text2}}</nowiki>
  
行40: 行49:
 
   },
 
   },
 
   methods: {
 
   methods: {
     output: function (){
+
     click1: function() { // click1() { でもよい
 
       this.text2 = this.text1;
 
       this.text2 = this.text1;
 
     }
 
     }
行48: 行57:
  
 
==htmlを適用する==
 
==htmlを適用する==
<div v-html="html1"></div>
+
<pre>
 +
<div v-html="html1"></div>
 +
</pre>
  
==チェックボックスで表示非表示==
+
==checkboxで表示非表示==
 
  <input type="checkbox" v-model="checked1" />
 
  <input type="checkbox" v-model="checked1" />
  <p v-show="checked1">ぴよぴよ1</p>
+
  <nowiki><p v-show="checked1">ぴよぴよ1</p></nowiki>
  
 
  data: {
 
  data: {
行59: 行70:
  
 
v-ifでも同様
 
v-ifでも同様
 +
 +
==複数checkboxの扱い方==
 +
<nowiki><input type="checkbox" id="hoge1" value="hoge1" v-model="checkedNames">
 +
<label for="hoge1">hoge1</label>
 +
<input type="checkbox" id="hoge2" value="hoge2" v-model="checkedNames">
 +
<label for="hoge2">hoge2</label>
 +
<input type="checkbox" id="hoge3" value="hoge3" v-model="checkedNames">
 +
<label for="hoge3">hoge3</label></nowiki>
 +
 +
data: {
 +
    checkedNames: []
 +
}
 +
 +
==tableでcheckboxを使う場合==
 +
<tr v-for="user in users" >
 +
  <td><input type="checkbox" v-model="checkedNames[user.id]" :id="user.id" value="true"></td>
 +
</tr>
 +
 +
data: {
 +
    checkedNames: []
 +
}
  
 
==foreach==
 
==foreach==
  <ul>
+
  <nowiki>
  <li v-for="user in users">{{user.name}}</li>
+
<ul>
</ul>
+
  <li v-for="user in users">{{user.name}}</li>
<table border="1">
+
</ul>
  <tr v-for="(user, key) in users"><td>{{key + 1}}</td><td>{{user.name}}</td></tr>
+
<table border="1">
</table>
+
  <tr v-for="(user, key) in users"><td>{{key + 1}}</td><td>{{user.name}}</td></tr>
+
</table></nowiki>
 +
 
 
  data: {
 
  data: {
 
   users: [
 
   users: [
行75: 行108:
 
   ]
 
   ]
 
  }
 
  }
 +
 +
==文字サイズ変更==
 +
<nowiki>
 +
<input type="radio" name="fontSize" value="10px" v-model="fontSize1">10px
 +
<input type="radio" name="fontSize" value="20px" v-model="fontSize1">20px
 +
<p v-bind:style="{fontSize: fontSize1}">ほげほげ</p></nowiki>
 +
 +
<nowiki>
 +
data: {
 +
  fontSize1: '20px'
 +
}</nowiki>
 +
 +
==色変更==
 +
<nowiki>
 +
<input type="radio" name="color" value="red" v-model="color1">red
 +
<input type="radio" name="color" value="green" v-model="color1">green
 +
<p v-bind:style="{color: color1}">ほげほげ</p>
 +
<p v-bind:style="{backgroundColor: color1}">背景色変更</p></nowiki>
 +
 +
<nowiki>
 +
data: {
 +
  color1: 'green'
 +
}</nowiki>
 +
 +
==クラス名変数指定==
 +
<nowiki>
 +
<style>
 +
.redbold {
 +
  color: #f00;
 +
  font-weight: bold;
 +
}
 +
</style>
 +
 +
<p v-bind:class="classcolor">クラス変更</p></nowiki>
 +
 +
data: {
 +
  classcolor:"redbold"
 +
}
 +
 +
v-bind:class は :class でもよい
 +
 +
==スタイル変数指定==
 +
<nowiki>
 +
<p v-bind:style="style1">スタイル</p></nowiki>
 +
 +
data: {
 +
  style1: {
 +
    "color": "red",
 +
    "fontSize": "20px"
 +
  }
 +
}
 +
 +
v-bind:style は :style でもよい
 +
 +
==URL変数指定==
 +
<nowiki>
 +
<a v-bind:href="url">ほげほげ</a></nowiki>
 +
 +
data: {
 +
    url: "ttp://yahoo.co.jp"
 +
}
 +
 +
v-bind:href は :href でもよい
 +
 +
==ボタン無効化==
 +
<button v-bind:disabled="isDisabled">Button</button>
 +
0では無効化できない。false,unsigned,nullだと無効化できる
 +
 +
==デバッグ==
 +
console.log('hoge');
 +
ブラウザの開発ツールのコンソールに表示される
 +
 +
==javascriptを動作させる==
 +
<pre>
 +
{{ 1 + 1 }}
 +
</pre>
 +
カッコ内はjavascriptが動作する

2019年3月8日 (金) 00:20時点における最新版

vue.js基本的な記述方法

以下記述でid内のdivにだけ適用できる。

new Vue({
  el: '#column1',
  data: {
    text1: 'ぴよぴよ',
    text2: 'ぴよぴよ'
  }
});

テキスト出力

<div id="column1">
  {{text1}}
</div>

テキストif出力

<div v-if="text1">
  {{text1}}
</div>
<div v-else>no data</div>

inputボックス出力

<input v-model="text1" />

入力したものが他の{{text1}}などに適用される

inputボックスに数字を出力

<input v-model="num1" type="number" />

up・downボタン付きで入力欄が表示される

ボタン処理

<button v-on:click="click1">登録</button>
<button @click="click1">登録</button> @clickでもよい
{{text1}} → {{text2}}
new Vue({
  el: '#column1',
  data: {
    text1: 'ぴよぴよ1',
    text2: 'ぴよぴよ2'
  },
  methods: {
    click1: function() { // click1() { でもよい
      this.text2 = this.text1;
    }
  }
});

htmlを適用する

<div v-html="html1"></div>

checkboxで表示非表示

<input type="checkbox" v-model="checked1" />
<p v-show="checked1">ぴよぴよ1</p>
data: {
 checked1: true
}

v-ifでも同様

複数checkboxの扱い方

<input type="checkbox" id="hoge1" value="hoge1" v-model="checkedNames">
<label for="hoge1">hoge1</label>
<input type="checkbox" id="hoge2" value="hoge2" v-model="checkedNames">
<label for="hoge2">hoge2</label>
<input type="checkbox" id="hoge3" value="hoge3" v-model="checkedNames">
<label for="hoge3">hoge3</label>
data: {
   checkedNames: []
}

tableでcheckboxを使う場合

<tr v-for="user in users" >
  <td><input type="checkbox" v-model="checkedNames[user.id]" :id="user.id" value="true"></td>
</tr>
data: {
   checkedNames: []
}

foreach

<ul>
  <li v-for="user in users">{{user.name}}</li>
</ul>
<table border="1">
  <tr v-for="(user, key) in users"><td>{{key + 1}}</td><td>{{user.name}}</td></tr>
</table>
data: {
  users: [
    { name: '太郎'},
    { name: '次郎'},
    { name: '三郎'}
  ]
}

文字サイズ変更

<input type="radio" name="fontSize" value="10px" v-model="fontSize1">10px
<input type="radio" name="fontSize" value="20px" v-model="fontSize1">20px
<p v-bind:style="{fontSize: fontSize1}">ほげほげ</p>
data: {
  fontSize1: '20px'
}

色変更

<input type="radio" name="color" value="red" v-model="color1">red
<input type="radio" name="color" value="green" v-model="color1">green
<p v-bind:style="{color: color1}">ほげほげ</p>
<p v-bind:style="{backgroundColor: color1}">背景色変更</p>
data: {
  color1: 'green'
}

クラス名変数指定

<style>
.redbold {
  color: #f00;
  font-weight: bold;
}
</style>

<p v-bind:class="classcolor">クラス変更</p>
data: {
  classcolor:"redbold"
}

v-bind:class は :class でもよい

スタイル変数指定

<p v-bind:style="style1">スタイル</p>
data: {
 style1: {
   "color": "red",
   "fontSize": "20px"
  }
}

v-bind:style は :style でもよい

URL変数指定

<a v-bind:href="url">ほげほげ</a>
data: {
   url: "ttp://yahoo.co.jp"
}

v-bind:href は :href でもよい

ボタン無効化

<button v-bind:disabled="isDisabled">Button</button>

0では無効化できない。false,unsigned,nullだと無効化できる

デバッグ

console.log('hoge');

ブラウザの開発ツールのコンソールに表示される

javascriptを動作させる

{{ 1 + 1 }}

カッコ内はjavascriptが動作する