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 代表要显示的页面，可以得到结果，证明实例创建挂载成功。
vue实战记录（二）- vue实现购物车功能之创建vue实例的更多相关文章
-
centos 安装oracle 11g r2（二）-----监听配置与创建数据库实例
centos 安装oracle 11g r2(二)-----监听配置与创建数据库实例 一.监听配置(命令:netca) 1.以 oracle 用户输入命令,启动图形化工具配置监听 [oracle@lo ...
-
vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...
-
vue实战记录（三）- vue实现购物车功能之渲染商品列表
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...
-
vue实战记录（一）- vue实现购物车功能之前提准备
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(一) GitHub:sue ...
-
vue实战记录（六）- vue实现购物车功能之地址列表选配
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...
-
vue实战记录（四）- vue实现购物车功能之过滤器的使用
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...
-
【Vue实战之路】一、Vue-cli入门及Vue工程目录全解。
全面的Vue-cli学习,这一篇就够了! 一.下载 使用vue-cli前,需先安装node.js,node的安装就不赘述,不过在此需要注意: 1. node版本需在4.x以上,首推6.x以上版本(no ...
-
python UI自动化实战记录二：请求接口数据并提取数据
该部分记录如何获取预期结果-接口响应数据,分成两步: 1 获取数据源接口数据 2 提取后续页面对比中要用到的数据 并且为了便于后续调用,将接口相关的都封装到ProjectApi类中. 新建python ...
-
ESS控制台发布新功能：创建多实例规格的伸缩配置
背景 原弹性伸缩ESS服务限定,生效的伸缩配置中只能对应一种实例规格,这样就会存在如果生效的配置中的实例规格的库存不足(高配实例规格通常更容易出现库存不足的情况)时, 用户配置好的伸缩规则以及伸缩组对 ...
随机推荐
-
所有的cursor图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
-
DirectX12 Samples 学习笔记 – PredicationQueries
一.效果 这是一个比较简单的sample,运行sample可以看到,当红橙色长方形完全覆盖白色正方形时,白色正方形不显示,其他情况,均显示白色正方形. 二.实现 Render主要由三个部分组成 1.F ...
-
Java的Random类详解
Random类专门用于生成一个伪随机数,它有两个构造器:一个构造器使用默认的种子(以当前时间作为种子),另一个构造器需要程序员显示传入一个long型整数的种子. Random类比Math类的rando ...
-
null引用，有时候是实现了父类的方法，方法体没写任何实现
null引用,有时候是实现了父类的方法,方法体没写任何实现 /* @Override public void attachView(MonthListContract.View view) { } * ...
-
[Java Web学习]Spring MVC使用普通类对象，声明的对象为null
由于对Spring还不熟悉,目前还处于学习阶段,因此经常会遇到一些小白问题,这个问题需要在Spring文件中将普通对象注入bean,然后在MVC中添加set方法,填充普通对象.
-
svn服务器镜像备份
server master 192.168.0.100-->源版本库 server slave 192.168.0.101-->镜像版本库 1.初始化svnsync init s ...
-
ZOJ 1259 Rails
stack的应用 #include<iostream> #include<cstdio> #include<stack> using namespace std; ...
-
【Ansible 文档】【译文】主机清单文件
Inventory 主机清单文件 Ansible 可以对你的基础设施中多个主机系统同时进行操作.通过选择在Ansible的inventory列出的一部分主机来实现.inventory默认保存在/etc ...
-
iosclient发现_世界杯送流量活动项目总结
世界杯如火如荼的进行.视频站点相似于门户站点.须要高速依据外部环境更新内容. 产品经理须要策划活动,并安排实施.这个活动就是在这样背景下产生的,爱奇艺与运营商合作,实现双赢.爱奇艺能够通过运营商 ...
-
linux的chmod,chown命令详解
指令名称 : chmod 使用权限 : 所有使用者 使用方式 : chmod [-cfvR] [--help] [--version] mode file... 说明 : Linux/Unix 的档案 ...