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实战记录(二)-  vue实现购物车功能之创建vue实例

三、创建vue实例

1.静态文件

将public文件夹里面原有的全部删除,然后将慕课网的素材放置到public文件夹里面,也可以自己写 ,放置于此:

vue实战记录(二)-  vue实现购物车功能之创建vue实例

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 代表要显示的页面,可以得到结果,证明实例创建挂载成功。

vue实战记录(二)-  vue实现购物车功能之创建vue实例

上一篇:linux下vi编辑某文件时,操作出现 错误提示: E325: ATTENTION 2, Found a swap file by the name ".p1.c.swp"


下一篇:JS中 obj.style.left 与 obj.offsetLeft 的区别