【Vue.js】ready指令 API串接

説明 用ready串接後台API 範例 API載入純文字 #app p {{text}} const vm=new Vue({ el: “#app”, data: { text: “” }, ready: function(){ $.ajax({ url: “https://awiclass.monoame.com/api/command.php?type=get&name=notifydata”, success: function(res){ vm.text=res; } }) } }) Display 哈囉!! 這邊是你用AJAX載入的純文字公告!! API載入JSON 要先轉換成JSON格式,否則會變成純字串 #app ul li(v-for=”item in items”) 【{{item.name}}】${{item.price}} const vm=new Vue({ el: “#app”, data: { items: [] }, ready: function(){ $.ajax({ url: “https://awiclass.monoame.com/api/command.php?type=get&name=itemdata”, […]

【JavaScript】Ajax

説明 jQuery版本 使用原生的JavaScript串接Ajax 建立HTTPRequest請求  new XMLHttpRequest() 建立回應函式  onreadystatechange 確認readyState、status(HTTP狀態碼)OK 執行回應動作,回應的值為responseText 定義後端api網址與method  open() 前端傳送資料  send() readyState  值  狀態  說明  0  UNSET  尚未讀取  1  OPENED  讀取中  2  HEADERS_RECEIVED  已下載完畢  3  LOADING  資訊交換中  4  DONE  成功 status status為200,表示成功 HTTP狀態碼一覽 範例 JavaScript版 p#p const xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function(){ if(this.readyState==4 && this.status==200){ p.textContent=this.responseText; //API連成功的動作 } }; xmlhttp.open(“GET”, “https://awiclass.monoame.com/api/command.php?type=get&name=notifydata”);//API網址 xmlhttp.send(); Display 哈囉!! […]

【JavaScript】子物件指定

説明 JS中有2種方式可以指定子物件。 方法一:dot連接 常用方法,利用dot連接母物件與子物件 const obj={ akasha: 222, typhoon: 15151515, tks: “33333333” } console.log(obj.akasha); //222 方法二:中括號 母物件後面用中括號,中括號裡面可以用字串指定,或是用變數代換 const obj={ akasha: 222, typhoon: 15151515, tks: “33333333” } //字串指定法 console.log(obj[“akasha”]); //222 /*****************************/ //變數代換法 const typ = “typhoon”; console.log(obj[typ]); //15151515  

【Vue.js】v-if

使用方法 ①data物件裡面建立會用到布林値的變數 ②用v-model操控使用者變更布林値 ③v-if=”變數名稱”,當布林値為真,顯示某些元素 範例 當核取方塊被點選,就會顯示下方文字 #app label Show text input(type=”checkbox” v-model=”show”) p the value of show is {{show}} hr p(v-if=”show”) Hey the box is clicked !! var vm=new Vue({ el: “#app”, data: { show: false } }); Display Show text the value of show is false Hey the box is clicked !!

【Vue.js】v-model 雙向綁定

說明 v-model的功能: 使用者輸入資料→JS物件同步更新→及時渲染 用法:v-model=”變數名稱” 範例 同步更新文字 #app label 姓名: input(v-model=”name”) /********************/ h4 您好,{{name}} var vm=new Vue({ el: “#app”, data: { name: “陳怡安” } }); 同步更新style #app label 顏色: input(v-model=”color”) /********************/ p 下面這個方塊的顏色是【{{color}}】 .block(style=”background-color: {{color}}”) .block border: 1px solid #000 width: 40px height: 40px var vm=new Vue({ el: “#app”, data: { color: “#C0C999” } }); 陣列用法 […]

【Vue.js】v-for

基本用法 v-for=”項目 in 陣列” #app ul li(v-for=”item in shoplist”) {{item}} var vm=new Vue({ el: “#app”, data: shoplist: [“apple”, “banana”, “papaya”] }); Display apple banana papaya 物件形式與存取編號 編號用id表示 #app ul li(v-for=”(id, item) in shoplist2″) {{id+1}}. {{item.name}} br |${{item.price}} //陣列的編號從0開始計算,但是一般商品的編號要從1開始,所以id+1 var vm=new Vue({ el: “#app”, data: shoplist2: { name: “apple”, price: 1000, origin: [“美國”, “日本”] }, { […]

【CSS】Width fix the list text

問題背景 <li>在不指定寬度的情況下,會自動填滿整行。 如果把border叫出來,就會很明顯。 例如: 填滿整行的li 填滿整行的li 可以佐以排版技巧來解決這個問題。 橫向排列:inblock 橫向排列只要指定display就可以解決問題 ul li 橫向排列不填滿 li 橫向排列不填滿 li 橫向排列不填滿 li border: 1px solid #000 display: inline Display 橫向排列不填滿 橫向排列不填滿 橫向排列不填滿 縱向排列:float 使用float完成縱向排列 ul li 縱向排列不填滿 li 縱向排列不填滿 li 縱向排列不填滿 ul float: left li border: 1px solid #000 Display 縱向排列不填滿 縱向排列不填滿 縱向排列不填滿   注意:周邊元素必須指定clear 如果不指定clear的話,會變成這樣↓↓ 縱向排列不填滿 縱向排列不填滿 縱向排列不填滿 這段文字想要放在清單下方,但是跑到左邊來了QQ […]

【Vue.js】變數代換

説明 Vue.js是前端框架,用JS解決HTML資料處理。 →技術文件 HTML:寫模板 JS:代入資料 →解決①HTML重複撰寫太多②資料即時更新問題 應用 引入Vue.js <head> <script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js”></script> </head> 建立模板與代入資料 #app //指定Vue作用區域 h1 Vue.js 使用大括號與變數代換 hr p 我的名字叫做{{name}},來自{{city}} //用兩個大括號{{}}建立模板 br |最近正在學習如何使用{{lang}}, br |他其實就像是一個{{text}} p Vue.js的代換可以用物件來表示,甚至陣列來判斷。 //建立一個Vue, 即時監測資料更新狀況 var vm=new Vue({ el: “#app”, //指定作用區域 data: { //用物件形式存放資料 name: “陳怡安”, city: “基隆市”, lang: “Vue.js”, text: “資料置換法”, notation: “兩個大括號{{變數名稱}}”, } }) Display 我的名字叫做陳怡安,來自基隆市 最近正在學習如何使用Vue.js, 他其實就像是一個資料置換法 […]