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服务限定,生效的伸缩配置中只能对应一种实例规格,这样就会存在如果生效的配置中的实例规格的库存不足(高配实例规格通常更容易出现库存不足的情况)时, 用户配置好的伸缩规则以及伸缩组对 ...
随机推荐
- vue中input输入框的模糊查询实现
最近在使用vue写webapp在,一些感觉比较有意思的分享一下. 1:input输入框: <input class="s-search-text" placeholder=& ...
- nodejs 使用 js 模块
nodejs 使用 js 模块 Intro 最近需要用 nodejs 做一个爬虫,Google 有一个 Puppeteer 的项目,可以用它来做爬虫,有关 Puppeteer 的介绍网上也有很多,在这 ...
- C#List<object>排序
//定义一个集合 var list = new List<Object>();//这里的Object为对象类型 //假设list已经有数据存进去,根据对象的某个字段升序或降序 var or ...
- SQLServer之函数简介
用户定义函数定义 与编程语言中的函数类似,SQL Server 用户定义函数是接受参数.执行操作(例如复杂计算)并将操作结果以值的形式返回的例程. 返回值可以是单个标量值或结果集. 用户定义函数准则 ...
- laravel部署创建新项目 助记
打开进入homestead虚拟机,并进入code文件夹 cd ~/homestead && vagrant up && vagrant ssh cd ~/Code 进行 ...
- DWH中增量数据的抽取
1. Truncate-Load 全量加载 简单直观.不易出错,适合数据量不太大的操作 性能问题 2. Increamental-Load 只考虑新增.修改.删除的记录 良好的数据源设计(主要是 ...
- 日志切割之Logrotate
1.关于日志切割 日志文件包含了关于系统中发生的事件的有用信息,在排障过程中或者系统性能分析时经常被用到.对于忙碌的服务器,日志文件大小会增长极快,服务器会很快消耗磁盘空间,这成了个问题.除此之外,处 ...
- 移动端无限滚动 TScroll.vue组件
// 先看使用TScroll.vue的几个demo 1.https://sorrowx.github.io/TScroll/#/ 2. https://sorrowx.github.io/TScrol ...
- 看门狗芯片--SP706SEN--调试记录
一.前因后果 工程中,设备为了稳定可靠,会增加外部看门狗,但是外部看门狗一旦启动,就停不下来,必须在固定的时间范围内进行喂狗,不然看门狗芯片就会产生一个复位信号复位MCU.以前大家都认为看门狗一旦工作 ...
- 分享数百个 HT 工业互联网 2D 3D 可视化应用案例
过去的 2018 年,我们认为是国内工业互联网可视化的元年,图扑软件作为在工业可视化领域的重度参与者,一线见证了众多 HTML5/Web 化.2D/3D 化的项目在工业界应用落地,我们觉得有必要在此分 ...