vue實戰記錄（二）- vue實現購物車功能之建立vue實例

時間 2020-07-07

標籤 vue 實戰記錄實現購物車功能建立實例简体版

原文原文鏈接

vue實戰，一步步實現vue購物車功能的過程記錄，課程與素材來自慕課網，本身搭建了express本地服務器來請求數據html

做者：狐狸家的魚vue

本文連接：vue實戰-實現購物車功能（二）node

GitHub：sueRimngit

1、前言

上一篇講解了如何運用node.js+express搭建本地服務器，解決chrome瀏覽器跨域而致使沒法獲取本地數據的問題，這章講解如何建立本地實例。github

2、安裝vue依賴

在vs code終端輸入如下命令安裝vue依賴：chrome

npm install vue --saveexpress

結束後繼續輸入如下命令安裝vue-resource依賴：npm

npm install vue-resource --savejson

打開package.json文件就能看見：跨域

3、建立vue實例

1.靜態文件

將public文件夾裏面原有的所有刪除，而後將慕課網的素材放置到public文件夾裏面，也能夠本身寫，放置於此：

2.新建cart.js文件

在public/js裏新建一個名叫cart.js的文件

var vm = new Vue({ el:'#app', data: { title:"hello vue" }, filters: { }, mounted: function() {//掛載 鉤子 實例插入文檔
        this.cartView(); }, methods: { cartView: function() { this.title = 'Vue hello'//更改了data的數據 } }, })

在cart.html中新建一個標題，檢測實例是否掛載成功：

... <body>
    <div class="checkout">
      <div id="app">
        <h2>{{title}}</h2>//這是檢測代碼 ... </body>

在瀏覽器中輸入http://localhost:3000/cart.html 表明要顯示的頁面，能夠獲得結果，證實實例建立掛載成功。

相關標籤/搜索