【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

【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

【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

【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
【生產地】
亞特蘭提斯
印度

【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