“vue學習筆記&購物車的實現”

阿新 • • 發佈：2018-11-19

“vue學習筆記”

學習網站：1.https://cn.vuejs.org/v2/guide/
2. http://www.runoob.com/vue2/vue-tutorial.html

下載vue.js
方法1：http://unpkg.com/[email protected]/dist/vue.js
方法2：gitup下載
2.入門操作：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title> 

	<!--引入vue.js -->
	<script src="../vue.js"></script>
</head>
<body>
<!-- vue的容器 -->
	<div id="app">
	<!-- 通過mustache語法展示 -->
		{{msg}}
	</div>
	<script>
	// 例項化vue
		var app=new Vue({
			el:'#app',//相當於document.getElementById('app');
			data:{//核心資料放置位置 

				msg:'Hellow,Vue'
			}
		})
	</script>
</body>
</html>

3.vue的幾種常用語句
v-text；v-html；v-show；v-on；v-bind；v-if；v-for；v-model；v-once；v-pre；v-cloak;
1)	v-text： 需要繫結在html標籤上，以v-開頭，“v”代表vue ,text代表文字 
2)	v-html ：更新內部的innerHTML,但需要注意：v-html會把一些標籤元素內容data資料，暴露給外部，會造成一些XSS攻擊，在渲染賬號密碼等隱私資料時請不要採用這種方式  
3 
)	v-show ：表示通過資料的true&false，來控制標籤的顯示隱藏。
4)	v-on ：通過事件監聽來實現相應的操作功能 "v-on" ==>可簡寫為@
5)	v-bind：表示繫結標籤的屬性內容  v-bind==>':'
6)	v-if表示條件判斷，當條件滿足時，自動執行v-if內容，否則執行v-else的內容。
// 注意：
 // 1.當v-if滿足時，v-else內容不被渲染  
 // 2.v-if&v-else之間不能有其他語句，除非它是v-else-if
 // 3.v-show 只是簡單的控制display：none&display:block，它的原理就是把所有標籤渲染成功之後，通過css來操作顯示隱藏
// v-if 屬於條件判斷語句，當條件滿足渲染某一個頁面標籤，否則直接不渲染
// 選取原則：
// 當擁有頻繁的tab切換時，建議你使用v-show
// 當你有較高的渲染需求時，為了節省你的初始渲染開銷，建議你使用v-if
// 4.一個迴圈體內應該包含至少有一個v-if,至多有一個v-else，可以含有多個v-else-if.
7)	v-for:可以繫結陣列的資料來渲染一個專案列表：
8)	v-model:用於實現表單空間的資料雙向繫結//限制範圍為：input textarea ,select  
9)	v-once:只被用來載入那些初始渲染頁面需要載入一次的資料，之後不再更改，可以用於優化頁面載入。
10)	v-pre:
11)	v-cloak:
//購物車程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <div class="container">
      <table class="table">
  <thead>
    <tr>
      <th class="text-center">
          全選
      <input type="checkbox" v-model="allSelected" @click="selecteAll(allSelected)">   
      </th>
      <th class="text-center">商品</th>
      <th class="text-center">數量</th>
      <th class="text-center">單價(元)</th>
      <th class="text-center">金額(元)</th>
      <th class="text-center">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item,index) in items" :key="index">
      <th class="text-center">
        <input type="checkbox" v-model="item.selected">     
      </th>
      <td class="text-center">{{item.name}}</td>
      <td class="text-center">
         <button @click="item.quanlity<=0?item.quanlity=0:item.quanlity--">-</button> 
         <input type="number" v-model.number="item.quanlity" style="width:100px;text-align:center;">
         <button @click="item.quanlity>=20?item.quanlity=20:item.quanlity++">+</button>
        </td>
      <td class="text-center">{{item.price}}</td>
      <td class="text-center">{{item.price*item.quanlity}}</td>
      <td class="text-center">
        <template v-if="index%2==0">
          <button type="button" class="btn btn-primary" @click="del(index)">Delete</button> 
        </template>
        <template v-if="index%2==1">
          <button type="button" class="btn btn-warning" @click="del(index)">Delete</button>  
        </template>    
      </td>
    </tr>
    <tr>
        <td colspan="2" class="text-center">
          <button type="button" class="btn btn-danger" @click="delSelected">刪除所選商品</button>  
        </td>
        <td colspan="2" class="text-center">商品總件數(件)：{{TotalNum}}</td>
        <td colspan="2" class="text-center">商品總金額(元)：{{TotalPrice}}</td>
    </tr>
  </tbody>
</table>   
    </div>  
  </div>
  <script>
    var app = new Vue({
      el:'#app',
      data:{
        items:[
         {selected:true,name:'iphone5',quanlity:3,price:1000},
         {selected:false,name:'iphone6',quanlity:6,price:2000},
         {selected:false,name:'iphone7',quanlity:4,price:3000},
         {selected:true,name:'iphone8',quanlity:3,price:4000},
         {selected:true,name:'iphoneX',quanlity:8,price:5000}   
        ]  
      },
      computed:{
        allSelected:{
          get(){
            return this.items.every((item,index)=>{
            return item.selected
          })
          },
          set(){}  
        },
        TotalNum(){
          return this.items.filter((item,index)=>{
            return item.selected
          }).length 
        },
        TotalPrice(){
          var selectedItems = this.items.filter((item,index)=>{
            return item.selected 
          })
        //   console.log(selectedItems)
          return selectedItems.reduce((sum,item)=>{
            return sum+item.quanlity*item.price
          },0)
        }  
      },
      methods:{
        del(index){
          this.items.splice(index,1)  
        },
        selecteAll(value){
          //1.當全選未勾選，點選，所有項都應該被勾選
          //2.當全選已勾選，點選，所有項都應該取消勾選
          this.items.map((item,index)=>{
            item.selected=!value
          })    
        },
        delSelected(){
          var result=this.items.filter((item,index)=>{
            return !item.selected   
          })
          this.items=result
        }  
      }  
    })
  </script>  
</body>
</html>

“vue學習筆記&購物車的實現”

“vue學習筆記” 學習網站：1.https://cn.vuejs.org/v2/guide/ 2. http://www.runoob.com/vue2/vue-tutorial.html 下載vue.js 方法1：http://unpkg.com/[email

CTR學習筆記&程式碼實現1-深度學習的前奏LR->FFM

CTR學習筆記系列的第一篇，總結在深度模型稱王之前經典LR，FM, FFM模型，這些經典模型後續也作為元件用於各個深度模型。模型分別用自定義Keras Layer和estimator來實現，哈哈一個是舊愛一個是新歡。特徵工程依賴feature_column實現，這裡做的比較簡單在後面的深度模型再好好搞。完整程

CTR學習筆記&程式碼實現2-深度ctr模型 MLP->Wide&Deep

## 背景這一篇我們從基礎的深度ctr模型談起。我很喜歡Wide&Deep的框架感覺之後很多改進都可以納入這個框架中。Wide負責樣本中出現的頻繁項挖掘，Deep負責樣本中未出現的特徵泛化。而後續的改進要麼用不同的IFC讓Deep更有效的提取特徵互動資訊，要麼是讓Wide更好的記憶樣本資訊 ##

CTR學習筆記&程式碼實現3-深度ctr模型 FNN->PNN->DeepFM

這一節我們總結FM三兄弟FNN/PNN/DeepFM，由遠及近，從最初把FM得到的隱向量和權重作為神經網路輸入的FNN，到把向量內/外積從預訓練直接遷移到神經網路中的PNN，再到參考wide&Deep框架把人工特徵互動替換成FM的DeepFM，我們終於來到了2017年。。。 FNN FNN算是把FM和

CTR學習筆記&程式碼實現5-深度ctr模型 DeepCrossing -> DCN

之前總結了PNN,NFM,AFM這類兩兩向量乘積的方式，這一節我們換新的思路來看特徵互動。DeepCrossing是最早在CTR模型中使用ResNet的前輩，DCN在ResNet上進一步創新，為高階特徵互動提供了新的方法並支援任意階數的特徵交叉。以下程式碼針對Dense輸入更容易理解模型結構，針對spar

CTR學習筆記&程式碼實現6-深度ctr模型後浪 xDeepFM/FiBiNET

xDeepFM用改良的DCN替代了DeepFM的FM部分來學習組合特徵資訊，而FiBiNET則是應用SENET加入了特徵權重比NFM，AFM更進了一步。在看兩個model前建議對DeepFM, Deep&Cross, AFM，NFM都有簡單瞭解，不熟悉的可以看下文章最後其他model的部落格連結。

Vue學習筆記（1）——在頁面右上角實現可懸浮/隱藏的系統選單

轉自榕樹島本文不能算一個教程，而是記錄一隻Vue菜鳥踩坑心路歷程的筆記，對於正在踩坑的新手或許會有一點小幫助。作為第一篇正經八百的技術部落格，歡迎大家發表看法，關愛菜鳥，請輕拍很久以後回來更一下，這個功能可以用Vuex輕鬆搞定，此文就當練習父子元件通訊了吧，emmm…… 原文：這是個

vue學習筆記(八)元件校驗&通訊

前言在上一章部落格的內容中vue學習筆記(七)元件我們初步的認識了元件，並學會了如何定義區域性元件和全域性元件，上一篇內容僅僅只是對元件一個簡單的入門，並沒有深入的瞭解元件當中的其它機制，本篇部落格將會帶大家深入瞭解元件的其它知識，元件的校驗，元件的通訊等等。本章目標學會元件簡單的校驗學會父元件向子

學習筆記TF016:CNN實現、數據集、TFRecord、加載圖像、模型、訓練、調試

quest oba lose 神經元 byte 足夠 jpg eight 值轉換 AlexNet(Alex Krizhevsky,ILSVRC2012冠軍)適合做圖像分類。層自左向右、自上向下讀取，關聯層分為一組，高度、寬度減小，深度增加。深度增加減少網絡計算量。訓練模

ESP8266學習筆記2：實現ESP8266的局域網內通信

pro reg sad net nts 理解模式 curl ont 上一篇熟悉了編譯下載操作。如今就以實例入手。project使用的是IOT_DEMO，據DEMO文檔能夠知道ESP8266初始工作模式為softAP+station共存的模式。於是這邊我們就先以soft

MVC學習筆記：MVC實現用戶登錄驗證ActionFilterAttribute用法並實現統一授權

重置 ids filter .config detail close login out gif 在項目下新建一個文件夾來專門放過濾器類，首先創建一個類LoginFilter,這個類繼承ActionFilterAttribute。用來檢查用戶是否登錄和用戶權限。： u

學習筆記TF024:TensorFlow實現Softmax Regression(回歸)識別手寫數字

概率 none nump 簡單測試數據 python dice bat desc TensorFlow實現Softmax Regression(回歸)識別手寫數字。MNIST(Mixed National Institute of Standards and Techno

Vue學習筆記入門篇——組件的內容分發(slot)

節點 pan 如何 new 深入接收 span 初始特殊屬性本文為轉載，原文：Vue學習筆記入門篇——組件的內容分發(slot) 介紹為了讓組件可以組合，我們需要一種方式來混合父組件的內容與子組件自己的模板。這個過程被稱為內容分發 (或 “transclus

Vue學習筆記進階篇——多元素及多組件過渡

之前 bsp lan ssa 當前好的 can cancel 簽名本文為轉載，原文：Vue學習筆記進階篇——多元素及多組件過渡多元素的過渡對於原生標簽可以使用 v-if/v-else.但是有一點需要註意：當有相同標簽名的元素切換時，需要通過 key 特性設置唯一

Vue學習筆記進階篇——Render函數

resp targe 無效數據 iso 簡潔如果 som cimage 本文為轉載，原文：Vue學習筆記進階篇——Render函數基礎 Vue 推薦在絕大多數情況下使用 template 來創建你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全

Vue學習筆記進階篇——過渡狀態

節點 val start 學習筆記 update 設置 hub reat res 本文為轉載，原文：Vue學習筆記進階篇——過渡狀態Vue 的過渡系統提供了非常多簡單的方法設置進入、離開和列表的動效。那麽對於數據元素本身的動效呢，比如：數字和運算顏色的顯示 SVG 節

Vue學習筆記進階篇——列表過渡及其他

absolut compute top sla 做的有一個 .cn -s cas 本文為轉載，原文：Vue學習筆記進階篇——列表過渡及其他本文將介紹Vue中的列表過渡，動態過渡，以及可復用過渡是實現。列表過渡目前為止，關於過渡我們已經講到：單個節點同一時間渲染

## vue學習筆記--簡單父子組件--

his scrip 變量 event cli 通訊按鈕 itl 事件 ## vue學習筆記 ### 組件之間的通訊1. 父組件到子組件```js //father <div> <son msg="父組件的信息寫在這">&l

tensorflow學習筆記(三)：實現自編碼器

sea start ear var logs cos soft 編碼 red 黃文堅的tensorflow實戰一書中的第四章，講述了tensorflow實現多層感知機。Hiton早年提出過自編碼器的非監督學習算法，書中的代碼給出了一個隱藏層的神經網絡，本人擴展到了多層，改進

算法(第四版)學習筆記之java實現可以動態調整數組大小的棧

length pub move sta gen font -c @override lifo 下壓(LIFO)棧：可以動態調整數組大小的實現 import java.util.Iterator; public class ResizingArrayStack&l

“vue學習筆記&購物車的實現”

“vue學習筆記”

相關推薦