Q&A
vue を使っているのに自分で DOM 操作をしているのは理由があるのでしょうか。
---https://blog.hiratama.net/typescript-webpack-vuejs-step1/
このサイトに従って環境を構築しTs+VueをビルドしてJsファイルを作ったのですがうまく動きません。擬態的にはonClickメソッドを呼び出した時に
VM213 index.html:19 Uncaught ReferenceError: doClick is not defined
at HTMLInputElement.onclick (VM213 index.html:19)
というエラーが出てしまいます。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 6 <meta charset="UTF-8"> 7 <title>Study Vue Step1</title> 8 9 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 10 11</head> 12 13<body> 14 <div id="app"></div> 15 16 17 <input type="text" id="name" /> 18 <input type="text" id="age" /> 19 20 <input type="button" name="this_button" id="#btn" value="ボタン" onclick="doClick();" /> 21 22 23 <div id="msg"></div> 24 25 <script src="./js/app.js"></script> 26</body> 27 28</html>
TypeScript
1import Vue from 'vue' 2 3let app:Vue = new Vue({ 4 el: '#app', 5 render: (h)=>h('p', 'Hello, world.') 6}); 7 8class Person{ 9 name:string; 10 age:number; 11 12 constructor(n:string,a:number){ 13 this.name = n; 14 this.age = a; 15 } 16 17 print():string{ 18 let msg = "<p>Name=" + this.name + ". Age=" + this.age + "</p>"; 19 return msg; 20 } 21} 22 23function doClick():void{ 24 let name:HTMLInputElement = document.querySelector("#name"); 25 let name_value:string = name.value; 26 let age:HTMLInputElement = document.querySelector("#age"); 27 let age_value:number = parseInt(age.value); 28 29 let person:Person = new Person(name_value,age_value); 30 31 let msg:HTMLElement = document.querySelector("#msg"); 32 msg.innerHTML = person.print(); 33} 34 35
javascript
1文字数を超えてしまったのでここにのせました 2https://codeshare.io/Gqp1zZ
すみません、初心者でよく分からないのですが、DOM操作と言うのはどこの部分のことでしょうか(>___<)document.という形で取得するのではなくVueで使われる、マスタッシュとかで取得すべきということでしょうか(>___<)
DOM操作といったのは doClick の中でやっていることです。DOM要素を変更追加削除することです。vueでは {{ }} で値を表示し、v-on でイベントリスナーを設定します。
また、#btn とありますが id に # を含めるのはよくないと思います。
なるほどです！！！わかりました！(>___<)btnのidは完全にミスりました(T___T)ありがとうございます！
回答1件
0
ベストアンサー
原因としては、バンドル前の js でグローバルに定義した変数/関数 (今の場合 doClick )でも webpack でバンドルした後では即時関数に包まれてグローバルスコープではなくなるからだと思います。
そもそもonclickなどの、イベントリスナーを指定する attribute を使用しないほうがいいと思います。js にて addEventListener などを使ってリスナーを追加したほうがいいです。
また、せっかく Vue を使っているので特に理由がないのであればDOM操作は Vue に任せるべきです。例えばこんな感じでできます。
投稿2018/01/04 07:27
総合スコア2551
なるほどです！！！完全に分かりましたありがとうございます(>___<)
あなたの回答
tips
プレビュー
