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. Http 压测工具 wrk 基本使用

    Http 压测工具 wrk 基本使用 Intro wrk 是一款现代HTTP基准测试工具,能够在单个多核CPU上运行时产生显着负载.它将多线程设计与可扩展事件通知系统(如epoll和kqueue)结合 ...

  2. 会话固定攻击 - yxcms session固定漏洞

    目录 会话固定攻击 e.g. yxcms session固定攻击 分析 了解更多 会话固定攻击 Session fixation attack(会话固定攻击)是利用服务器的session不变机制,借他 ...

  3. 第一个 java 程序

    java程序的运行机制 JVM实现了跨平台 JDK > JRE > JVM java Development Kit(JDK)包含:JRE,以及增加编译器和调试器等用于程序开发的文件 Ja ...

  4. Left Jion等价SQL猜想验证

    猜想:以下两条SQL等价 select * from A left join B on A.ID=B.BID and B.BName=N'小明' select * from A left join ( ...

  5. Asp.Net登陆记住用户功能实现

    1.效果和原理 原理是利用Asp.net的Cookies.选中CheckBox,把输入的用户名和密码用Cookies存储起来,设置过期时间7天,超过时间自动清除Cookie信息. 2.前台代码 < ...

  6. Cherrypy文件上传非ASCII文件名乱码问题解决

    Cherrypy 版本: 18.0.1 由于某些特殊原因(可能是与标准兼容的问题),Cherrypy对上传文件的原文件名使用 ISO-8859-1 编码方式解码,导致非 ASCII 的文件名显示为乱码 ...

  7. Python模块time、datetime

    模块: 模块是一系列常用功能的集合体,一个py文件就是一个模块. 一.模块的作用: 1.从文件级别组织程序,方便管理,随着程序的发展,功能越来越多,我们通常将程序分成一个个py文件,这样做程序的结构更 ...

  8. Python开发【第二篇】运算符

    "+" 加号 __author__ = 'Tang' a = 8 b = 9 c = a + b a = 8.0 b = 9 c = a + b print(c) # 17.0 a ...

  9. Linux-基础学习（三）-Nginx学习

    1.nginx安装与部署 1.1 nginx入门 Web 网络服务是一种被动访问的服务程序,即只有接收到互联网中其他主机发出的 请求后才会响应,最终用于提供服务程序的 Web 服务器会通过 HTTP( ...

  10. CentOS 7 软件安装简记

    Install SW Record ================= $ sudo yum install vim-X11.x86_64 $ sudo yum install clang.x86_6 ...