程式學習: 3月 2019

2019年3月20日星期三

tick

https://ustbhuangyi.github.io/vue-analysis/reactive/next-tick.html#vue-%E7%9A%84%E5%AE%9E%E7%8E%B0

https://vuejsdevelopers.com/2019/01/22/vue-what-is-next-tick/

遞迴元件

<!-- 生产环境版本，优化了尺寸和速度 -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<style>

.fd:after{

content:'123'

}

.haha:before{

content:'55'

}

</style>

<div id="app">

<custom-input :count="1"></custom-input>

</div>

<script>

Vue.component('custom-input', {

name:'custom-input',

props:{

count:{

type:Number,

default:1

}

},

template:'<div class="fd">{{count}}\

  <custom-input class="haha"\

    :count="count + 1"\

    v-if="count <3">\

  </custom-input>\

</div>'

})

new Vue({

el:"#app"

})

</script>

結果

1

552

553 66

66

66

vue 看不懂的部分

refs只有在元件繪製完成後才填充，且他是非回應式的。他僅可做為一個直接存取子元件的應急方式，應避免再範本或計算屬性中使用。p.7-25

你之前待的大概是做什麼案子？
這其實是想知道前公司屬於?票券或博奕或機票或接案
在細節的，可以說為了保護客戶/公司的行銷手段，無法透漏

https://www.ptt.cc/bbs/Tech_Job/M.1518541798.A.3EF.html

※ 引述《askaleroux》之銘言： : 全世界資訊科技業的奇杷 : 其實就是日本了 : (這篇就不要戰了感恩) : 在這裡分享一下 : 新人給的還算不看年資的公司 : 或者底薪比較高一些的 : 數來數去其實真的不多 : 除此之外的大概都要看點年資 : 大概只有採中途採用才有可能談到各位理想的薪水 : 外商篇 : 1.Google :這個BJ4，能力夠破千是正常 : 2.Cisco : 新人488，有Network工程師職位 : 3.Oracle : 新人482 : 4.Amazon ：新人408 不過是AWS的 support engineer 應該不算 RorD : 5.IBM東京基礎研究所：網頁上沒寫，不過問過學長有700以上，收的人少，比辜狗少 : 6.Intel：不收新人。位置也不多，可能日本IC設計不強吧 Broadcom也只有營業 : 7.HP,IBM：基本上薪水差不多，都是在地化很深的企業，要拚年資， : 日本IBM底薪稍高但不超過400 基本顧問業在日本大多都是顧問比工程師薪水高 : 8.LINE：做什麼的大家大概都了解，新人501，不過招的人不多，算韓資日商 : 9.APPLE：工程師職位只有跟硬體有關的薪水不低但不明進去想跳總部的 : 10.M$：RD部分有600以上，但Team很小，去年不收人，今天不知道收不收 : 日商篇 : 1.DeNa：做手遊還有一堆雜七雜八，有能力可以給到900以上，但是招募蠻不Friendly : 除了要考很困難的邏輯測驗以外，還要回答日文讀解問題，我在這裡被刷 : 新人進去大概是日本人比較可能，不然就要用中途 : 2.Gree：一樣做手遊的，新人有500以上，但流動率頗高 : 3.Cyberagent：還是做手遊的，多虧日本人很會花手遊課金，新人460-500 : 流動率跟Gree一樣很高，很多人來就是要看妹還有拿個高薪而已 : 4.Dwango：NicoNico的公司，薪水稍低不過對工程師算友善的環境月薪34萬起跳 : 5.Recruit：很有錢的日本公司，包東包西的作，雖然品質不一定好 : 日本最大的人力招募公司還有一些生活周邊網站這間做的，起薪有500 : 6.Indeed：其實是被Recruit買下來的工作搜尋引擎 : 採用在Recruit之下不過可以用另外一個管道，薪水600up : 7.樂天：400up，不過流動率很高，然後老闆不太重視工程師(朋友說的) : 是一間Business company，技術含量不高，靠日本市場賺錢，好處是可以用英文上班 : 8.WorsApplication：SystemIntegrate的公司，寫Java，接案那種，有500up : 除此之外大概就沒了，其他可能就是我有缺漏沒補到抱歉 : 會去找這些公司主要是因為我也不想拚年資 : 做個幾年想回台灣或去其他地方 : 不希望第一年要拿超低底薪或者是去一些氣氛比較老的公司 : 上面的大多都比較沒有這些情形 : 上面幾間也是在面試就會考妳專業能力的公司 : 一般底薪很低的就是把妳當成什麼都不會的白痴大學生近來訓練妳 : 認為妳因為什麼都不會所以不應該領太多，可以活下去就好 : 大概這樣，有需求的大大可以去投 : ------------------------------------- : 有人來信問Yahoo. 日本雅虎現在跟全世界雅虎都沒關係 : 被軟體銀行買下來之後變成了純日商，我差點因為日文不夠好被刷 : 然後底薪比照其他日本公司就是23萬起跳，並不是外商價格 : ------------------------------------------------------- : 上述的幾間公司，有的做個幾年薪水會翻倍 : 例如Cisco Oracle MS這些大概三年後會到達700-900 : 其餘的則很可能進去幾年都是那個價格 : LINE可能進去四五年可能到600多手遊三家也可能 : 樂天的話是毫無疑問，薪水變動極少 : 也就是說在日本可能一開始給妳高的公司，但是後幾年就是那樣了 : 想要做久能高的，去老牌的公司可能會好一點，敖個七八年 : 有可能會出頭，我說的是有可能，因為不是每間都會讓妳翻倍 : 例如光榮(做三國志的)起薪一樣低，35歲年收只有670上下的很多 : 結論是 : 日本是很缺工程師 : 只是大多都拿不出有誠意的價格，或是跟世界接軌的制度 : 所以才會招不到，然後又來，又招不到 : 如果是有志於在日本長久待的話上面的有的公司就不用考慮了 : 去任天堂還是什麼NRI總合研究所 : 五六年之後應該會追過上面一半，但一樣要強調並不是全部老公司都有辦法 : 來日本找過資訊業工作後心得是 : 只能說雷很多比台灣多 : 給得起還可以的薪水的 : 除了少數幾間網路公司外不是手遊就是外商 : 在來就是要拚年資的系統廠 : 或者是技術力不足但在制度下可以拿錢的日本傳統IT顧問業 : 對工程師的重視度，其實是低於台美中 : 至少薪資的對比上是如此 : 所以很多中國朋友寧願回去奇虎360 所謂的BAT公司 : 不過當然也有為了生活環境留下在日本的 : 報告完畢感謝分享這篇赫然發現作者是認識的人（！）我在去年年初的時候結束求職目前在東京當data scientist 覺得可以補充一些資訊 - 作者所提供的資訊與我接觸到的毫無違和感補充 - amazon SWE 第一年750起 IBM我聽到的第一年是480 超過400滿多不過調薪幅度不高在裡面的人認識幾個抱怨很多 - 如果只是重視錢拿得多＆不太介意要在純軟業的話其實可以接觸看看金融業 or 管顧業裡面的工程師職位 [金融業] 金融的範圍滿廣的：保險銀行證券普遍來說日系/外商證券跟外商銀行的工程相關工作薪水較高日系銀行也是很傳統慢慢升上去（他們的系統應該大都外包）保險業進去要高的話大都是中途轉職 = 外商 = 幾間外商證券/銀行的Technology第一年都至少700起加班沒有像營業這麼操做到第十年的時候大概1500左右日語要求：如果是取代性很低的技術的話可以只用英語工作（日語不是必要） SWE很多大學就來唸的名校CS在競爭日語應該要流利以上 = 日商 = 日系證券的話有一些偏數量（quant)的部門獨立招募（裡面要寫code建模) 第一年600起做個5-6年加獎金薪水就破千了做個十年薪水在1500-2000滿正常的不過這種一年招人很少一間公司頂多十個左右大都東大工學碩士 or 博士進去日語要求：日文流利是基本 [ 管理顧問業 ] 管理顧問公司可以考慮幾間外商裡的engineer big4, accenture 等第一年大概500-550 職位公司不同會變有些會掛engineer, 有些掛analyst/consultant 這種升遷也是跟普通的consultant 一樣升遷方式每年固定加薪不過consultant是以服務客戶為重點的地方系統導入會比R&D的案件多有一些是寫一些prototype去外包給外面的廠商做求職的時候拿到兩間big4 的offer (一間做AI R&D 一間做人工智慧系統導入）實際上工程師在這種以營業為主的地方是否被重視因為沒進去沒辦法分享日語要求：取代性很低的技術的話日語可以溝通就可不過管理顧問公司普遍喜好日語可以直接跟客戶溝通的人選普遍的技術的話需要非常流利的日語 [ 職位不同 ] 如果以data scientist來說有一些公司開的薪水會比software engineer高 DeNA 可以開到6-700起跳 Preferrerd Network 600 起整體來說的薪資偏高 [ 其他 ] 如同原po所說日本很多公司很缺工程師但是又不重視工程師日本人心中認知的software engineer跟其他國家應該是有所出入的我們會覺得software engineer 是從設計到產出都有能力的職位不過日本分成software engineer 跟 programmer 前者是規劃整個系統設計的（地位高）後者是coding的工具（地位低被認爲不用腦導致有一些系統導入廠的SE大概有4-5成是文科畢業他們進去研修3個月學基本的java 就會說學完了這種公司基本上就是在靠大量的系統導入跟維護費用在撐的公司不過日本有系統導入、維護的需求很大所以大廠永遠不會倒相對系統廠而言普通（不是以IT為主）的企業裡面的SE就是做管理外包上的工作看外包商的系統設計有沒有問題與外包商洽談交涉等等完全不用親自coding 也不會有什麼問題的職位如果來日本求職想要避開這種類型的工作建議確認清楚工作內容以及責任範圍 ----------------------------------------------------------- 因為日本軟體業實在太低剛開始求職就是找外資管顧最後誤打誤撞跑到金融業現在第一年+ sign on拿年薪9開頭（日幣）做的也是偏quant 結合Machine Learning 方面的開發我身邊第一年拿很高的工程師大都是Amazon SWE, Google, Indeed, 外資證券這幾間以台灣人工程師的實力如果在日本中途沒談到7以上都不太建議來除非真的是很想要移民日本在這邊居住下去以上 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 133.202.80.84 ※ 文章網址: https://www.ptt.cc/bbs/Tech_Job/M.1518541798.A.3EF.html ※ 編輯: leighmeow (133.202.80.84), 02/14/2018 01:23:20

推 johnnyjana: 推推02/14 01:14

推 avgirl:02/14 01:17

※ 編輯: leighmeow (133.202.80.84), 02/14/2018 01:28:18

推 mouryou: 推 看來日本真的很不重視工程師…… 02/14 03:11

→ KurakiMaki: 不是日本不重視工程師，是台灣只重理輕視其他領域02/14 07:02

→ KurakiMaki: 在小島上還是去外面多看看吧，先進國家都是均衡發展02/14 07:03

推 f1986715: IT感覺真的不錯,實際機械類傳產的更低。。。，02/14 07:37

推 nelley: 日本的路子就是盡力避免屬人化，SE背景+顧問比較有辦法高02/14 08:57

→ nelley: 薪。另外SE因為是管整個開發專案(包含成本)，所以也可以決02/14 08:57

→ nelley: 定不發外包自己寫(像我那時就會把練功的部份自肥起來，但02/14 08:58

→ nelley: 通常自己的成本太高了所以自己寫的時數不能算進專案裡)。02/14 08:58

→ nelley: 。。不過也是那時後上長允許就是了。02/14 08:58

推 mouryou: 日本也不均衡吧……太偏重與人溝通的職缺了 純技術性的感02/14 09:31

→ mouryou: 覺就不重視02/14 09:31

接學校案子就能接到一個月三十幾萬以上了博士等級年薪700以上不難（最高聽到有人一個月一百萬）這些人沒什麼動力出去當新卒做自己不喜歡的工作很多不是創業就是繼續念博士只能說日本這種制度讓有能力的人根本不想進去企業被當狗 ※ 編輯: leighmeow (123.220.91.211), 02/14/2018 12:18:42

推 heuer: 推

2019年3月19日星期二

socket.io即時互動

https://www.youtube.com/watch?v=QVZcMx3jtG8

聽說屬於後端

search "vue upload"

https://www.youtube.com/watch?v=VqnJwh6E9ak

2019年3月13日星期三

元件props用object的寫法

<div id="example">

<component :data="{x:1}"></component>

</div>

<script>

// register the component

Vue.component('component', {

props: {

data: {

type: Object

}

},

template: '<div>Data: {{data}}</div>',

mounted: function () {

console.log(this.data)

}

})

new Vue({

el: '#example'

})

</script>

vue 頁碼

<span v-for="p in pageW" class="pagination">

<label :for="'h'+p" class="page-item" :class="[(p == currentPageW)?'active':'', ((p == '>') ||(p =='<'))?'bordernone':'']" style="display:inline-block;width:15px;height:15px;">{{p}}</label>

<input type="radio" style="display:none" v-model="((p == '>') ||(p =='<'))?'':currentPageW" @click="clickPageW" :value="p" :id="'h'+p">

</span>

<span class="laucnt2-1" >共{{weeksum}}条记录</span>

$(document).ready(function () {

Vue.http.options.emulateHTTP = true;

Vue.http.options.emulateHTTP = true;

  Vue.http.options.emulateJSON = true;

  var app = new Vue({

      el: '#container',

      data: {

up:[],

downmonth: [],

downweek: [],

username: '',

layerid: -1,

        downweek: [],

loading:true,

count:0,

weeksum:0,

monthsum:0,

// 頁數

pageSize:1,

currentPageW:1,        

totalPageW:1,

pageW:[],

rowW:[],

currentPageM:1,        

totalPageM:1,

pageM:[],

rowM:[],       

      },

      mounted: function () {

         window.setTimeout(function () {

$(".loading").fadeOut(500)

}, 400)

},

watch:{

currentPageW(){

let row1 = (this.currentPageW-1)*this.pageSize;

this.rowW = this.downweek.slice(row1, row1+this.pageSize);

if(this.totalPageW>3){

if(this.currentPageW>1 && this.currentPageW<this.totalPageW){  

this.pageW=[];     

this.pageW.push("<");           

for(let i=this.currentPageW-1;i<=this.currentPageW+1;i++){

this.pageW.push(i);

}

this.pageW.push(">");

}else if(this.currentPageW == 1){

this.pageW=[ 1, 2, 3, ">"];

}else{

this.pageW=[]; 

this.pageW.push("<");     

for(let i=this.totalPageW-2;i<=this.totalPageW;i++){

this.pageW.push(i);

}

}

}

},

currentPageM(){

let row2 = (this.currentPageM-1)*this.pageSize;

this.rowM = this.downmonth.slice(row2, row2+this.pageSize);

if(this.totalPageM>3){

if(this.currentPageM>1 && this.currentPageM<this.totalPageM){  

this.pageM=[];     

this.pageM.push("<");           

for(let i=this.currentPageM-1;i<=this.currentPageM+1;i++){

this.pageM.push(i);

}

this.pageM.push(">");

}else if(this.currentPageM == 1){

this.pageM=[ 1, 2, 3, ">"];

}else{

this.pageM=[]; 

this.pageM.push("<");     

for(let i=this.totalPageM-2;i<=this.totalPageM;i++){

this.pageM.push(i);

}

}

}

}

},   

      methods: {

clickPageW:function(e){

if(e.target.value == ">"){

this.currentPageW ++;

}

if(e.target.value == "<"){

this.currentPageW --;

}

},

clickPageM:function(e){

if(e.target.value == ">"){

this.currentPageM ++;

}

if(e.target.value == "<"){

this.currentPageM --;

}

},

query:function(){

//console.log(this.username)

this.$http.post("XXXXXXXXXXXXXXXXXXXXXXXXX, {

user_name: this.username

}).then(function (res) {

// console.log(res)

if(res.data) var totalsum = parseInt(res.data.count.week) + parseInt(res.data.count.month);

// console.log(totalsum)

// console.log(res.data)

if(res.data=="" || totalsum==0){              

layer.open({

type: 1,

skin: 'layui-layer-demo', 

area:[],

anim: 2,

title:"",

shadeClose: true, 

content: $('.layers')

});

//alert('您还不是我们的会员！')

}else{              

console.log(res)

this.layerid = 1;

this.up = res.data.up[0];

this.downweek = res.data.down.week.reverse();

this.downmonth = res.data.down.month.reverse();

this.weeksum = parseInt(res.data.count.week);

this.monthsum = parseInt(res.data.count.month);

this.count=parseInt(res.data.count.week)+parseInt(res.data.count.month);

// 周月數

this.totalPageW=Math.ceil(this.weeksum/this.pageSize);

for(let i=1;i<=this.totalPageW;i++){

this.pageW.push(i);

}

let row1 = (this.currentPageW-1)*this.pageSize;

this.rowW = this.downweek.slice(row1, row1+this.pageSize);

console.log(this.downweek);

// 處理頁數超過三個的

if(this.totalPageW>3){

if(this.currentPageW>1 && this.currentPageW<this.totalPageW){  

this.pageW=[];     

this.pageW.push("<");           

for(let i=this.currentPageW-1;i<=this.currentPageW+1;i++){

this.pageW.push(i);

}

this.pageW.push(">");

}else if(this.currentPageW == 1){

this.pageW=[ 1, 2, 3, ">"];

}else{

this.pageW=[]; 

this.pageW.push("<");     

for(let i=this.totalPageW-2;i<=this.totalPageW;i++){

this.pageW.push(i);

}

}

}

// 月頁數

this.totalPageM=Math.ceil(this.monthsum/this.pageSize);

for(let i=1;i<=this.totalPageM;i++){

this.pageM.push(i);

}

let row2 = (this.currentPageM-1)*this.pageSize;

this.rowM = this.downmonth.slice(row2, row2+this.pageSize);

console.log(this.downmonth);

// 處理頁數超過三個的

if(this.totalPageM>3){

if(this.currentPageM>1 && this.currentPageM<this.totalPageM){  

this.pageM=[];     

this.pageM.push("<");           

for(let i=this.currentPageM-1;i<=this.currentPageM+1;i++){

this.pageM.push(i);

}

this.pageM.push(">");

}else if(this.currentPageM == 1){

this.pageM=[ 1, 2, 3, ">"];

}else{

this.pageM=[]; 

this.pageM.push("<");     

for(let i=this.totalPageM-2;i<=this.totalPageM;i++){

this.pageM.push(i);

}

}

}

// console.log(this.count)

// console.log(this.up[0].rewardw)

}

}, function (res) {

// console.log(res.status)

});

},

}

    });

})

2019年3月12日星期二

輸入文字後還沒按enter就同步--@input

<div id="app" v-cloak>

  <input type="text" @input="handleinput" placeholder="輸入...">

  <p>{{msg}}</p>

  <input type="text" v-model="dealinput" placeholder="輸入...">

  <p>{{dealinput}}</p>

</div>

<script>

let app = new Vue({

  el:"#app",

  data:{

    msg:'',

    dealinput:''

  },

  methods:{

    handleinput(e){

      this.msg = e.target.value;

    }

  }

})

</script>

2019年3月11日星期一

vue購物車實戰(搭配json api引入，不過那資料不是適合購物車的，所以醜醜的)，watch!!

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

<script src="js/jquery-1.8.3.min.js"></script>

<style>

[v-clock]{

display:none;

}

</style>

<body>

<div id="app" v-cloak>

<table>

<tr>

<th>1</th>

<th><input type="checkbox" v-model="checkall"></th>

<th>商品名稱</th>

<th>單價</th>

<th>數量</th>

<th>操作</th>

</tr>

<tr v-for="(product, index) in products">

<td>{{index + 1}}</td>

<td><input type="checkbox" v-model="toggle" :value="parseInt(index)"></td>

<td>{{product.title}}</td>

<td>{{product.id}}</td>

<td>

<button @click="reduce(index)">-</button>  

{{product.userId}}

<button @click="add(index)">+</button>  

</td>

<td><button @click="rowremove(index)">刪除</button></td>

</tr>

</table>

<div>{{total}}</div>

</div>

<script>

let app = new Vue({

el:"#app",

data:{

products:[],

product:{

title:'',

userId:0,

id:0,

},

toggle:[],

checkall:false

},

created(){

console.log('1');

let vm = this;

$.ajax({

type:'get',

url:'https://jsonplaceholder.typicode.com/albums',

success:function(b){

vm.products=b;

}

})

},

watch:{  //想在某值改變時，執行動作，就用watch。錯誤案例：v-model在綁click，他似乎存在先执行click后操作v-model的优先级。實際上一般使用v-model绑定之后就不要自己去处理click了，可以用vue的watch。

checkall:function(){

if(this.checkall==true){

this.toggle=[];

for(let i=0;i<this.products.length;i++){

this.toggle.push(i);

}

}else{

this.toggle=[];

}

}

},

methods:{

reduce:function(i){

if(this.products[i].userId === 1 ) return;

this.products[i].userId--;

},

add:function(i){

this.products[i].userId++;

},

rowremove:function(i){

this.products.splice(i,1);

}

},

computed:{

total:function(){

var sum=0;

var vt=this.toggle;

for(let i=0;i<vt.length;i++){

sum += this.products[vt[i]].userId * this.products[vt[i]].id

}

return sum;

}

}

})

</script>

</body>

2019年3月7日星期四

MVVM

MVVM當然也是縮寫，也就是Model-View-ViewModel，簡稱MVVM，他也算是一種設計樣式，目的是為了讓各自的相依性降低，這樣以後也比較好維護與測試，而MVVM的意思如下。

Model是一個來自服務或資料庫數據的類別。
View就是一個顯示的介面，預計是要將資料展現出來。
ViewModel就如同膠水般，它把Model和View黏合起來。它將Model包裝起來，而且 ViewModel還會控制View的應用部分，例如在View那邊按下按鈕後，要處理的動作，實際上會放在ViewModel。

而它們之間的關係如下圖般，View也就是XAML，透過Data Binding技術與View Model繫結，但實際上ViewModel是不會知道哪個View繫結了它( ViewModel )；而ViewModel與Model的關係也是如此，Model永遠不知道他被哪個ViewModel所參考到，而ViewModel則會參考到Model；換言之，就是View會知道ViewModel，ViewModel會知道Model，這種單向的關係。

by reference介紹，物件介紹與使用

https://pjchender.blogspot.com/2016/03/javascriptby-referenceby-value.html

當我們在建立 primitive type （Boolean, String, Number, null, undefined）的變數時，假設我把a 指定成一個 primitive type 的時候，a 會在記憶體中存在一個自己的位置（假設叫做0x001）。這時候，當我指定另一個變數 b，它的值等同於 a 的時候，b 實際上會建立另一個獨立的記憶體位置（假設叫做0x002），接著再把 a 的值存在這個獨立的記憶體位置。也就是說， a 和 b 其實是存在於兩個不同的記憶體位置，因此彼此並不會乎相干擾影響，這種情況，我們就稱為 ++By Value++ ，而這種情形會發生在 primitive type 的變數。

當我將變數 a 設立成一個Object（Object, Array, Function）時，這時候，一樣會在記憶體中給它一個位置（假設叫做0x001）；但是當我建立一個變數 b，並且把變數 b 的值等同於 a 時，這時候並不會再給它一個新的位置，而是一樣指定到物件 a 的位置（即0x001），實際上是不會有新的東西被建立，變數 a 和 b 都會被指稱到相同的位置（即0x001），因此，當 a 的值改變的時候 b 的值也會改變，因為它們實際上是指稱到相同的位置，這種情形我們就稱為 ++By Reference++，這樣情況會發生在 Object 和 Function 這種變數。

一般來說，Primitive type 是 by value，而 Object 和 Function 則是 by reference，但有例外的情況。

以下是範例程式

// by value (primitives)

var a = 3;

var b;

b = a;

a = 2;

console.log(a);  //2

console.log(b);  //3

// by reference (all objects (including functions))

var c = {greeting : 'Hello'};

var d;

d = c;

console.log(c);  //Hello

console.log(d);  //Hello

c.greeting = "Hola";

console.log(c);  //Hola

console.log(d);  //Hola

// by reference (even as parameters)

function changeGreeting(obj){

  obj.greeting = 'Hi'; //mutate

}

changeGreeting(d);

console.log(c);  //Hi

console.log(d);  //Hi

// equal operator sets up new memory space (new address)

c = {greeting: "Hola"};

console.log(c);  //Hola，這是因為c = {greeting: "Hola"};新建了一個物件，新建的物件在記憶

體中存放的位子就跟之前的不同

console.log(d);  //Hi

※建立物件的方法有兩種
1. [ ] 在 JavaScript 中被稱做 Computed Member Access
例：
let a = new Object();
a['firstname'] = 'Lin' ;
b['lastname'] = 'david';
→這種可以用變數取代屬性名稱(ex: firstname, lastname)

2. .在 JavaScript 中被稱做 Member Access
例：
a.address = new Object();
a.address.country = 'taiwan';
a.address.city = 'taipei';
a.address.locate = 101;

並且，. 和 [ ] 是可以交替使用的。也就是說，Member Access建立的object可以用Computed Member Access的方式顯示(即console.log(a['address']['country']) // taiwin)，反之也可。

建議盡量使用 . 做為建立物件和呼叫物件的方法，這樣比較乾淨簡潔，在 debug 的時候也比較容易。

不建議用 new Object 的方式，而建議用object literal, 即{}建立物件。可以想成，{}和new Object是相同的意思
→上面的例子用{}寫出如下：
let a = {}
let a ={
firstname:'Lin',
lastname:'david'
}
a.address={
country:'taiwan',
city:'taipei',
locate:101
}

→或是寫在一起如下：
let a={
firstname:'Lin',
lastname:'david',
address:{
country:'taiwan',
city:'taipei',

locate:101
}
}

→搭配函式使用：
function sayhi(b){
console.log("hi, "+b.lastname)
}
sayhi(a); // hi, david

→也可以直接在呼叫函式時建立物件，這種方式被稱作 creating object on the fly：
sayhi({fistname:'Lin', lastname:'david'})

對物件的結論：
不論你使用的是new Object、" . "、或者直接用"{ }"來建立物件，其實在JavaScript轉譯之後，本質上做的都是同樣的事。它都會將這個物件建立在記憶體中，並建立該物件的屬性（property）和方法（method）在記憶體中

訂閱：文章 (Atom)

程式學習

文章加密

2019年3月20日星期三

tick

遞迴元件

v-for>v-if>v-bind 優先級

vue 看不懂的部分

面試常見問題　及　ｐｐｔ上说说各个大公司

2019年3月19日星期二

socket.io即時互動

search "vue upload"

2019年3月13日星期三

元件props用object的寫法

vue 頁碼

2019年3月12日星期二

輸入文字後還沒按enter就同步--@input

2019年3月11日星期一

vue購物車實戰(搭配json api引入，不過那資料不是適合購物車的，所以醜醜的)，watch!!

2019年3月7日星期四

MVVM

by reference介紹，物件介紹與使用

文章加密

2019年3月20日 星期三

2019年3月19日 星期二

2019年3月13日 星期三

2019年3月12日 星期二

2019年3月11日 星期一

2019年3月7日 星期四

2019年3月20日星期三

2019年3月19日星期二

2019年3月13日星期三

2019年3月12日星期二

2019年3月11日星期一

2019年3月7日星期四