Web言語マスター復活への道/18日目
今日外出たら雨でした🌧 オリンピック過ぎたらなーんかこんな調子ですね。
目標
・udemy vue.js視聴、まとめ
本日の作業
1/4終わりました。まあまあ長いです。ただ、内容は理解しやすく、エラーも自分で解消できるようになってきました。（二重かっこ連続とかはしんどい
やっていることを簡単に羅列すると、
・vue.jsで基本的に使われる構文
ex) v-bind, method, v-model, template
・構文は:, @で省略できるものもある
以下例ですが、v-onを@で省略しています。このカウントはかなり書いたので覚えました笑
=と:を間違えて書いちゃう癖治したいです。
index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<button @click="addnumber">ボタン</button>
</div>
</body>
<script src="main.js"></script>
</html>main.js
new Vue({
el: "#app",
data: {
number: 0
},
methods: {
addnumber: function () {
this.number += 1
}
}
})結果
・computed methodの違い、 elや関数作成の理由
・条件分岐
index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="ok">OK</p>
<p v-elif>notOK</p>
</div>
</body>
<script src="main.js"></script>
</html>main.js
new Vue({
el: "#app",
data: {
ok: false
},
})結果
・render関数の使い方(仮想DOM)
・コンポーネントの利用
所感
お盆終わりまでかかってしまいそうです。。
この記事が気に入ったらサポートをしてみませんか？