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实例的更多相关文章

  1. centos 安装oracle 11g r2(二)-----监听配置与创建数据库实例

    centos 安装oracle 11g r2(二)-----监听配置与创建数据库实例 一.监听配置(命令:netca) 1.以 oracle 用户输入命令,启动图形化工具配置监听 [oracle@lo ...

  2. vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  3. vue实战记录(三)- vue实现购物车功能之渲染商品列表

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...

  4. vue实战记录(一)- vue实现购物车功能之前提准备

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(一) GitHub:sue ...

  5. vue实战记录(六)- vue实现购物车功能之地址列表选配

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...

  6. vue实战记录(四)- vue实现购物车功能之过滤器的使用

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...

  7. 【Vue实战之路】一、Vue-cli入门及Vue工程目录全解。

    全面的Vue-cli学习,这一篇就够了! 一.下载 使用vue-cli前,需先安装node.js,node的安装就不赘述,不过在此需要注意: 1. node版本需在4.x以上,首推6.x以上版本(no ...

  8. python UI自动化实战记录二:请求接口数据并提取数据

    该部分记录如何获取预期结果-接口响应数据,分成两步: 1 获取数据源接口数据 2 提取后续页面对比中要用到的数据 并且为了便于后续调用,将接口相关的都封装到ProjectApi类中. 新建python ...

  9. ESS控制台发布新功能:创建多实例规格的伸缩配置

    背景 原弹性伸缩ESS服务限定,生效的伸缩配置中只能对应一种实例规格,这样就会存在如果生效的配置中的实例规格的库存不足(高配实例规格通常更容易出现库存不足的情况)时, 用户配置好的伸缩规则以及伸缩组对 ...

随机推荐

  1. 从零学习Fluter(五):Flutter中手势滑动拖动已经网络请求

    从六号开始搞Flutter,到今天写这篇blog已经过了4天时间,文档初步浏览了一遍,写下了这个demo.demo源码分享在github上,现在对flutter有种说不出的喜欢了.大家一起搞吧! 废话 ...

  2. Pycharm使用技巧(转载)

    Pycharm使用技巧(转载) 转载自:http://www.cnblogs.com/cloudtj/articles/5980666.html pycharm使用技巧 https://python. ...

  3. C#中Skip和Take的用法

    Skip()和Take()方法都是IEnumerable<T> 接口的扩展方法,包括C#中的所有Collections类,如ArrayList,Queue,Stack等等,还有数组和字符串 ...

  4. python实例二

    https://www.cnblogs.com/evablogs/p/6754974.html 题目:企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于 ...

  5. table 的宽度设置无效

    1.在table 标签添加样式 table-layout: fixed; 必须设置width的值:<table style="table-layout: fixed"> ...

  6. C# -- 结构、访问修饰符

    C# -- 结构.访问修饰符 1. 结构: struct 类型 对于结构,不像类那样存在继承. 一个结构不能从另一个结构或类继承,而且不能作为一个类的基. 但是,结构从基类 Object 继承. 结构 ...

  7. 2017 百度杯丶二月场第一周WP

    1.祸起北荒 题目: 亿万年前 天子之子华夜,被父神之神末渊上神告知六荒十海之北荒西二旗即将发生一场"百度杯"的诸神之战 他作为天族的太子必须参与到此次诸神之战定六荒十海 华夜临危 ...

  8. android开发学习 ------- 关于getSupportFragmentManager()不可用的问题

    在Android开发中,少不了Fragment的运用. 目前在实际运用中,有v-4包下支持的Fragment以及app包下的Fragment,这两个包下的FragmentManager获取方式有点区别 ...

  9. Openwrt无线中继设置并访问外网

    Openwrt无线中继设置并访问外网 本篇博文参考来自:http://blog.csdn.net/pifangsione/article/details/13162023 配置目标 主路由器使用AP模 ...

  10. 读书笔记---<<图解HTTP>>(一)

    一.了解Web及网络基础 1. 网络基础TCP/IP 通常使用的网络包括互联网都是在TCP/IP协议族的基础上运作的,而HTTP属于它内部的一个子集. 1.1 TCP/IP协议族 像这样吧与互联网关联 ...