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服务限定,生效的伸缩配置中只能对应一种实例规格,这样就会存在如果生效的配置中的实例规格的库存不足(高配实例规格通常更容易出现库存不足的情况)时, 用户配置好的伸缩规则以及伸缩组对 ...
随机推荐
- 如何在linux下使用sudo命令不用输入密码
用过linux的小伙伴可能都知道,每次使用sudo的时候需要输入密码,这样很耽误事,那么接下来我会教大家如何去设置 一.1.输入su root进入root模式 2.输入visudo会打开/etc/su ...
- JHipster技术栈定制 - 基于UAA的微服务之间安全调用
本文通过代码实例演示如何通过UAA实现微服务之间的安全调用. uaa: 身份认证服务,同时也作为被调用的资源服务.服务端口9999. microservice1: 调用uaa的消费者服务,服务端口80 ...
- c#核心基础-委托
委托是一个类型.C#中的委托是面向对象的,并且它是类型安全的 当创建委托实例的时候,创建的实例会包含一个调用列表,在调用列表中可以包含多个方法.每个方法称作一个调用实体.调用实体可以是静态方法,也可以 ...
- 20180903 - Python Pip 工具下载whl包与离线安装
20180903 - Python Pip 工具下载whl包与离线安装 1. 我的Blog 博客园 https://www.cnblogs.com/piggybaba 个人网站 http://pigg ...
- 指定IP地址进行远程访问服务器设置方法(windows系统)
我们有很多服务器经常受到外界网络的干扰,入侵者们通过扫描3389端口爆破密码非法进入我们的服务器,这时,我们可以配置服务器IP 安全策略来限制一些IP访问,大大提高了服务器的安全. 实验环境: ...
- 两种动态SQL
参考:http://www.cnblogs.com/wanyuan8/archive/2011/11/09/2243483.htmlhttp://www.cnblogs.com/xbf321/arch ...
- PHAR系列之导言
由于之前都是在现成的PHP框架下写web项目,一般都只专注于框架内部的使用跟优化.但是对于一些PHP很有特色的功能跟特性很少过多的深入了解.最近做项目调研的时候偶尔注意到一个PHP中一个比较常见的概念 ...
- win 10 Hbuilder1.2.1连接Genymotion 调试Android 软件
这里记录一下 Hbuilder1.2.1连接Genymotion 调试Android 软件 的过程: 步骤一:把Genymotion 的 adb.exe 路径配置到 Hbuilder 中 在 菜单栏 ...
- 面向对象_del
老师的博客http://www.cnblogs.com/Eva-J/articles/7351812.html#_label7 内置的方法有很多不一定全都在object中 #python3中,所有类都 ...
- 距离放弃python又近了一大步，而然只是第四天
今天是周末后的第一天,周末四处浪浪浪,所以在周一的时候就要狠狠的复习之前的东西了,之后从第一天的计算机基础开始复习,具体内容请翻阅前三篇随笔,主要是要仔细看看,怕学了后面的忘了前面的,今天引进的第一个 ...