【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",
   success: function(res){
    vm.items=JSON.parse(res); //轉換成JSON格式
    }
   })
 }
 
})

Display

  • 【吹風機】$300
  • 【麥克筆】$9000
  • 【筆記型電腦】$54555
  • 【Iphone 9】$32000
  • 【神奇海螺】$5000
  • 【PSP1007】$2000
  • 【鍵盤】$3500

【JavaScript】Ajax

説明

jQuery版本
使用原生的JavaScript串接Ajax

  1. 建立HTTPRequest請求  new XMLHttpRequest()
  2. 建立回應函式  onreadystatechange
  3. 確認readyState、status(HTTP狀態碼)OK
  4. 執行回應動作,回應的值為responseText
  5. 定義後端api網址與method  open()
  6. 前端傳送資料  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

哈囉!! 這邊是你用AJAX載入的純文字公告!!

jQuery版

p#p
$.ajax({
 url: "https://awiclass.monoame.com/api/command.php?type=get&name=notifydata",
 success: function(res){
  p.textContent=res;
 }
})

Display

哈囉!! 這邊是你用AJAX載入的純文字公告!!

用ajax取得header, menu等共用HTML

#header
var headerXhr=new XMLHttpRequest();

headerXhr.open('GET', 'header.html', true);
headerXhr.send();

headerXhr.onreadystatechange=function(){
    if(headerXhr.readyState==4 && headerXhr.status==200){
        header.innerHTML = headerXhr.responseText;
    }
};

用ajax傳送JSON

TIPS: 先把JSON轉成string格式,再傳送

var xmlhttp=new XMLHttpRequest();

xmlhttp.open('POST', 'http://9.102.60.125:5000/api/bbinqcan', true);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.onreadystatechange=function(){

    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        res.textContent=xmlhttp.responseText;
    }
};

xmlhttp.send(
        //checkedJSON是一個JSON格式的變數
    JSON.stringify(checkedJSON);
)

【Vue.js】v-on

説明

methods寫在JS裡面,v-on寫在HTML裡面。
功能類似原生JS的addEventListener。

範例

#app
 button(v-on:click="show") click me
 p#vueText some text
#vueText
 color: #fff
var vm=new Vue({
 el: "#app",
 methods: {
 show: function(){
  vueText.style.color="#000"
  }
 }
})

Display

some text

【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

the value of show is false


【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"
 }
});

陣列用法

#app
 p 喜歡的書:
 //渲染3次
 div(v-for="(id, book) in books")
  label 【{{id+1}}】
 //印出書名
  input(v-model="book")
 
/******************/
p 喜歡的書
 ul 
 li(v-for="book in books") {{book}}
var vm=new Vue({
 el: "#app",
 data: {
  books: ["雨天的艾莉絲", "鋼鍊", "天地明察"]
 }
});

Display

CODEPEN

 

【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: ["美國", "日本"]
 },
 {
 name: "banana",
 price: 500,
 origin: ["台灣", "韓國", "菲律賓"]
 },
 {
 name: "papaya", 
 price: 300,
 origin: ["亞特蘭提斯", "印度"]
 }
});

Display

  • 1. apple
    $1000
  • 2. banana
    $500
  • 3. papaya
    $300

使用第二層v-for

#app
 ul
  li(v-for="(id, item) in shoplist2") 【編號】{{id+1}} 
  br
  |【品名】{{item.name}}
  br
  |【價錢】${{item.price}}
  br
  |【生產地】
  span(v-for="place in item.origin") </br>{{place}}
var vm=new Vue({
 el: "#app",
 data: shoplist2: {
 name: "apple",
 price: 1000,
 origin: ["美國", "日本"]
 },
 {
 name: "banana",
 price: 500,
 origin: ["台灣", "韓國", "菲律賓"]
 },
 {
 name: "papaya", 
 price: 300,
 origin: ["亞特蘭提斯", "印度"]
 }
});

Display

  • 【編號】1
    【品名】apple
    【價錢】$1000
    【生產地】
    美國
    日本
  • 【編號】2
    【品名】banana
    【價錢】$500
    【生產地】
    台灣
    韓國
    菲律賓
  • 【編號】3
    【品名】papaya
    【價錢】$300
    【生產地】
    亞特蘭提斯
    印度

 

 

【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

 

 


解決法:周邊的元素指定clear。

ul 
 li 縱向排列不填滿 
 li 縱向排列不填滿 
 li 縱向排列不填滿 

p 這段文字想要放在清單下方,成功。
ul
 float: left
li
 border: 1px solid #000

p 
 clear: both 
 //該元素的左邊(left)、右邊(right)、兩邊(both)都不可以有任何東西,若有的話,該元素會自動往下移。

Display

  • 縱向排列不填滿
  • 縱向排列不填滿
  • 縱向排列不填滿
這段文字想要放在清單下方,成功

【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,
他其實就像是一個資料置換法

Vue.js的代換可以用物件來表示,甚至陣列來判斷。
只要在裡面用兩個大括號{{變數名稱}}包起來就可以了。

陣列與v-for列表渲染

#app
 p 我的技能有:
 /**************
 非v-for法
 ul 
  li {{skills[0]}}
  li {{skills[1]}}
  li {{skills[2]}}
  li {{skills[3]}}
 ****************/
 //v-for法
 ul
  li(v-for="skill in skills") {{skill}}
  //skill 可以自己命名
  //skills要根據vue撰寫的内容指定
var vm=new Vue({
 el: "#app",
 data: {
 skills: ["程式開發", "網頁設計", "翻譯", "口譯"],
});

Display

我的技能有:

  • 程式開發
  • 網頁設計
  • 翻譯
  • 口譯

 使用物件資料

#app
 p 我踏入網頁設計已經有{{infos.year}}年了,希望可以持續進步。
var vm=new Vue({
 el: "#app",
 data: {
 infos:{
 year: 1
  },
 }
});

Display
我踏入網頁設計已經有1年了,希望可以持續進步。

代入HTML程式碼

使用3組大括號代入HTML程式碼

#app
 p Vue.js除了預設帶入是一般的純文字以外,三組大括號可以代入HTML原始碼
 div {{{html}}}
.block
 width: 100px
 padding: 10px
 border: 1px solid #000
var vm=new Vue({
 el: "#app",
 data: {
  html: "<div class='block'>代入HTML</div>"
  //雙引號内的HTML字串裡面要改單引號
 }
});

Display

代入HTML