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. Dagger2源码浅析

    dagger2是目前android端比较火的一款依赖注入框架,先来看下基本的用法吧: 首先提供module,类似于工厂: @Module public class ApiServiceModule { ...

  2. Linux 配置本地源 （Ubuntu / CentOS）

    目录 Linux local source list A. Ubuntu 1. 本地ISO 2. 制作本地源 B. CentOS 1. 本地ISO Linux local source list A. ...

  3. MongoDB 聚合分组取第一条记录的案例及实现

    关键字:MongoDB: aggregate:forEach 今天开发同学向我们提了一个紧急的需求,从集合mt_resources_access_log中,根据字段refererDomain分组,取分 ...

  4. 数据库之redis篇（2）—— redis配置文件，常用命令，性能测试工具

    redis配置 如果你是找网上的其他教程来完成以上操作的话,相信你见过有的启动命令是这样的: 启动命令带了这个参数:redis.windows.conf,由于我测试环境是windows平台,所以是这个 ...

  5. javaweb学习--javabean

    阅读电子书<Java Web从入门到精通>密码:461c,学习JavaWeb基础知识 JavaBean类似于.net的实体类,但是规则上稍复杂一些,能实现的功能也多一些 一.介绍 1.规则 ...

  6. python爬虫 | 一条高效的学习路径

    数据是创造和决策的原材料,高质量的数据都价值不菲.而利用爬虫,我们可以获取大量的价值数据,经分析可以发挥巨大的价值,比如: 豆瓣.知乎:爬取优质答案,筛选出各话题下热门内容,探索用户的舆论导向. 淘宝 ...

  7. LeetCode算法题-Construct the Rectangle（Java实现）

    这是悦乐书的第243次更新,第256篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第110题(顺位题号是492).对于Web开发人员,了解如何设计网页的大小非常重要.因此 ...

  8. Maven的简单使用

    Maven使用 在官网下载maven: http://maven.apache.org/download.cgi 解压到D盘(位置随便) 配置环境变量 打开dos窗口,检测是否成功,出现如下画面表示配 ...

  9. 【English】20190321

    Keep in mind记住[kip ɪn maɪnd]  maintenance维护[ˈmentənəns] Also Keep in mind that table maintenance use ...

  10. Linux：Day12(下) 进程、任务计划

    vmstat命令: vmstat [options] [delay [ count]] procs: r:等待运行的进程的个数: b:处于不可中断睡眠态的进程个数:(被阻塞的队列的长度): memor ...