vue实战记录（二）- vue实现购物车功能之创建vue实例
生活随笔
收集整理的這篇文章主要介紹了
vue实战记录（二）- vue实现购物车功能之创建vue实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
vue實戰，一步步實現vue購物車功能的過程記錄，課程與素材來自慕課網，自己搭建了express本地服務器來請求數據
作者：狐貍家的魚
本文鏈接：vue實戰-實現購物車功能（二）
GitHub：sueRimn
一、前言
上一篇講解了如何運用node.js+express搭建本地服務器，解決chrome瀏覽器跨域而導致無法獲取本地數據的問題，這章講解如何創建本地實例。
二、安裝vue依賴
在vs code終端輸入以下命令安裝vue依賴：
npm install vue --save
結束后繼續輸入以下命令安裝vue-resource依賴：
npm install vue-resource --save
打開package.json文件就能看見：
三、創建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 代表要顯示的頁面，可以得到結果，證明實例創建掛載成功。
?
轉載于:https://www.cnblogs.com/suRimn/p/10338495.html
總結
以上是生活随笔為你收集整理的vue实战记录（二）- vue实现购物车功能之创建vue实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 意大利罗马银行连环抢劫案告破 一名警察涉
- 下一篇： mpvue+vant app搭建微信小程