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 代表要显示的页面，可以得到结果，证明实例创建挂载成功。
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服务限定,生效的伸缩配置中只能对应一种实例规格,这样就会存在如果生效的配置中的实例规格的库存不足(高配实例规格通常更容易出现库存不足的情况)时, 用户配置好的伸缩规则以及伸缩组对 ...
随机推荐
- 深入理解Mysql索引的底层数据结构 B+ Tree （1）
关键字的个数等于路的个数减1. 一个二叉树节点可以存储4kb大小的数据,假如关键字是整型的一个关键字占用4byte,其他数据冗余4个字节 4 kb = 4*1024 byte = 4096 byte. ...
- mysql面试题
01. 列举常见的关系型数据库和非关系型都有那些? 1.关系型数据库通过外键关联来建立表与表之间的关系,---------常见的有:SQLite.Oracle.mysql 2.非关系型数据库通常指数据 ...
- About Pull Strings 英语走后门议论文
About pull strings Author : Pleiades_Antares 1. From ancient times to the present, the "going b ...
- git如何设置ssh密钥
git设置ssh密钥 目前git支持https和git两种传输协议,github分享链接时会有两种协议可选: 1.Clone with SSH 2.Clone with HTTPS git在使用htt ...
- MapReduce shuffle过程剖析及调优
MapReduce简介 在Hadoop MapReduce中,框架会确保reduce收到的输入数据是根据key排序过的.数据从Mapper输出到Reducer接收,是一个很复杂的过程,框架处理了所有问 ...
- 英特尔关闭PC计算卡项目—插个卡片就能升级个人电脑
在 2017 年的美国国际消费电子展上,电脑芯片巨头英特尔公司曾经推出一个名为“计算卡”的新产品,相当于把个人电脑的重要零部件整合到了一张信用卡大小的卡片设备中,未来用户升级个人电脑,只需要拔下旧卡片 ...
- Label Encoding vs One Hot Encoding
最近在刷kaggle的时候碰到了两种处理类别型特征的方法:label encoding和one hot encoding.我从stackexchange, quora等网上搜索了相关的问题,总结如下. ...
- 关于Jpa和Mybatis的一些看法
现在网络上充斥着Jpa和Mybatis的一些对比.其实狭义上来说是hibernate和mybatis之间的比较. 例如:为什么感觉国内比较流行的 mybatis 在国外好像没人用的样子? 下面是一些截 ...
- 相约南湖，南京都昌信息亮相南湖HIT论坛
金秋十月,雨过南湖水似油 ,烟雾蒙蒙净长空 2017年10月15日, 南湖HIT论坛迎来了第六届.本次论坛吸引了500名来自全国各地医疗机构.卫生行政主管部门的信息化主管和医疗IT企业的精英,齐聚嘉兴 ...
- 周末学习笔记——day01（函数，函数对象，嵌套调用，名称空间，作用域，闭包，装饰器）
一,复习 字符编码 文件头:py2—ASCII,py3—UTF-8 三种字符串:u' ' b ' ' r ' ' u' ' .endcode(' utf-8 ') b' '.deconde(' utf ...