vue实战记录（二）- vue实现购物车功能之创建vue实例
vue實(shí)戰(zhàn)，一步步實(shí)現(xiàn)vue購(gòu)物車功能的過程記錄，課程與素材來(lái)自慕課網(wǎng)，自己搭建了express本地服務(wù)器來(lái)請(qǐng)求數(shù)據(jù)
作者：狐貍家的魚
本文鏈接：vue實(shí)戰(zhàn)-實(shí)現(xiàn)購(gòu)物車功能（二）
GitHub：sueRimn
一、前言
上一篇講解了如何運(yùn)用node.js+express搭建本地服務(wù)器，解決chrome瀏覽器跨域而導(dǎo)致無(wú)法獲取本地?cái)?shù)據(jù)的問題，這章講解如何創(chuàng)建本地實(shí)例。
二、安裝vue依賴
在vs code終端輸入以下命令安裝vue依賴：
npm install vue --save
結(jié)束后繼續(xù)輸入以下命令安裝vue-resource依賴：
npm install vue-resource --save
打開package.json文件就能看見：
三、創(chuàng)建vue實(shí)例
1.靜態(tài)文件
將public文件夾里面原有的全部刪除，然后將慕課網(wǎng)的素材放置到public文件夾里面，也可以自己寫 ，放置于此：
2.新建cart.js文件
在public/js里新建一個(gè)名叫cart.js的文件
var vm = new Vue({el:'#app',data: {title:"hello vue"},filters: {},mounted: function() {//掛載 鉤子 實(shí)例插入文檔this.cartView();},methods: {cartView: function() {this.title = 'Vue hello'//更改了data的數(shù)據(jù)}}, })在cart.html中新建一個(gè)標(biāo)題，檢測(cè)實(shí)例是否掛載成功：
... <body><div class="checkout"><div id="app"><h2>{{title}}</h2>//這是檢測(cè)代碼 ... </body>在瀏覽器中輸入http://localhost:3000/cart.html 代表要顯示的頁(yè)面，可以得到結(jié)果，證明實(shí)例創(chuàng)建掛載成功。
?
轉(zhuǎn)載于:https://www.cnblogs.com/suRimn/p/10338495.html
總結(jié)
以上是生活随笔為你收集整理的vue实战记录（二）- vue实现购物车功能之创建vue实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 意大利罗马银行连环抢劫案告破 一名警察涉
- 下一篇： 欧几里得及扩展欧几里得算法