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实例相关推荐

Vue实战篇二十八：实现一个手机版的购物车
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇二十九：模拟一个简易留言板
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇二十七：实现走马灯效果的商品轮播图
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇二十六：创建动态仪表盘
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
vue实战入门基础篇五：从零开始仿门户网站实例-关于我们实现
上一篇:vue实战入门基础篇四:从零开始仿门户网站实例-网站首页实现https://blog.csdn.net/m0_37631110/article/details/123045334 一.目录第 ...
vue实战记录（六）- vue实现购物车功能之地址列表选配
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据作者:狐狸家的鱼本文链接:vue实战-实现购物车功能(六) GitHub:sue ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
ESS控制台发布新功能：创建多实例规格的伸缩配置
摘要: 背景原弹性伸缩ESS服务限定,生效的伸缩配置中只能对应一种实例规格,这样就会存在如果生效的配置中的实例规格的库存不足(高配实例规格通常更容易出现库存不足的情况)时, 用户配置好的伸缩规则以及 ...
Vue实战开发二（个人中心实现）
文章目录前言效果预览项目结构个人页面框架总结前言本来是想要说一下那个如何整合那个vue的Markdown编辑器的,但是由于这个后端没有搭建起来,所以图片上传做不了,所以先不介绍,后面在介 ...

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

一、前言

二、安装vue依赖

三、创建vue实例

vue实战记录（二）- vue实现购物车功能之创建vue实例相关推荐

最新文章

热门文章