Vue.js 예시 페이지
PG 언어에 주력하는 사람이라면 보기만 해도 이해할 수 있다.
매번 닦아야 한다.
①Hello World
vue에서 만든 객체 텍스트를 HTML의 주 태그로 확장합니다.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<h1>Vue.js</h1>
<div id = "app">
{{message}}
</div>
<script>
var app = new Vue({
el: '#app',
data:{
message:'hello world'
}
})
</script>
</body>
</html>
② 목록의 표시 내용을 버튼으로 전환합니다.
를 클릭하여 화면 목록의 내용을 전환합니다.
참고로 소스에 설명을 적었습니다.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Vue.jsのインポート 公式サイト：https://jp.vuejs.org/v2/guide/を参照ください-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
<!--ボタンのCSS-->
<style type="text/css">
button.buttonA {
font-size: 24px;
background-color: #248;
color: #fff;
}
</style>
</head>
<body style="background-color: #cae4ff;">
<h1>SAMPLE(Vue.js)</h1>
<p>サンプルです。こちらは表示されます</p>
<!--Vue.jsで定義したタグの指定。idで囲まれた部分のうち{{message}}がVue.jsで置き換わります
詳しくはscriptの部分で解説します。-->
<div id="app">
<p>サンプルです。appで囲まれた部分が置き換わるのでこちらは表示されません</p>
{{message}}
</div>
<hr>
<button class = "buttonA" style="width:150px;height:50px"onclick='doAction();'>クリック</button>
<!--切り替えの為の変数をhiddenで保持 -->
<input type="hidden" value="0" id="flg1">
</body>
<script>
/* １．Vue.jsのオブジェクトに設定する変数の定義 */
var data1 = {
message : 'Hello Vue!',
items:['SHINAGAWA','OOSAKI','GOTANDA','MEGURO','YEBISU']
};
/* ２．Vue.jsのオブジェクトを定義します。*/
var app = new Vue({
/* CSSセレクタで紐付けるタグをIDで設定します。#appのシャープを忘れずに*/
el:'#app',
/* ２のオブジェクトのdataに１でつくったdata1を設定します*/
data:data1,
/* レンダリング処理 data1を編集してappタグの中を置き換えます*/
render:(element)=>{
/* elementの関数：(タグ名,(属性情報,)表示内容)*/
var p1 = element ("p",{style:'font-size:20pt;'},data1.message);
var li1 = data1.items.map(item => element('li',{style:'font-size:24pt;'},item));
var ol1 =element("ol",li1);
var div1 =element("div",[p1,ol1]);
/* appにVNODE（子NODE message,items）を設定*/
return div1;
}
})
/*ボタンを押したときのアクション*/
function doAction() {
var flg1 = document.getElementById("flg1").value;
/*hiddenで保持しているフラグを判定条件に利用*/
if (flg1 == '0'){
/*変数を変えるだけで画面に反映されます*/
var newdata = [
'しながわ','おおさき','ごたんだ','めぐろ','えびす'
];
data1.message = "ひらがな";
for (n in data1.items){
data1.items[n] = newdata[n]
};
document.getElementById("flg1").value = "1";
}else{
/*変数を変えるだけで画面に反映されます*/
var newdata = ['SHINAGAWA','OOSAKI','GOTANDA','MEGURO','YEBISU'];
data1.message = "ALPHABET";
for (n in data1.items){
data1.items[n] = newdata[n];
}
document.getElementById("flg1").value = "0";}
}
</script>
</html>
Reference
이 문제에 관하여(Vue.js 예시 페이지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kankigyo2/items/3c06fc0cb8ebca7d0675텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
