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服务限定,生效的伸缩配置中只能对应一种实例规格,这样就会存在如果生效的配置中的实例规格的库存不足(高配实例规格通常更容易出现库存不足的情况)时, 用户配置好的伸缩规则以及伸缩组对 ...

随机推荐

Docker 镜像编排并部署SpringBoot应用
Docker-compose是一个基于Docker的编排工具,所谓编排个人理解就是将不同的镜像通过配置,组成一个新的运行环境,官方定义是:Compose is a tool for defining ...
huffman树即Huffma编码的实现
自己写的Huffman树生成与Huffman编码实现 (实现了核心功能 ,打出了每个字符的huffman编码其他的懒得实现了,有兴趣的朋友可以自己在我的基础增加功能 ) /* 原创文章转载请附上原 ...
Oracle 统计信息收集
官网网址参考: https://docs.oracle.com/cd/B19306_01/appdev.102/b14258/d_stats.htm#CIHBIEII https://docs.ora ...
web渗透学习计划（转载）
作者:向生李链接:https://www.zhihu.com/question/21914899/answer/39344435来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
nginx内置变量总结
nginx内置变量 2019-02-28 变量名称变量用途 $atg_PARAMETER 客户端GET请求中 PARAMETER字段的值 ...
eclipse设置新建jsp默认编码格式utf-8
Redis操作list
来自:http://www.cnblogs.com/alex3714/articles/6217453.html List操作,redis中的List在在内存中按照一个name对应一个List来存储. ...
vue 用less
https://blog.csdn.net/u013746071/article/details/79655042
golang web实战之一（beego,mvc postgresql）
想写个小网站,听说MVC过时了,流行MVVM,但是看了一下gin+vue+axios方式,发现还有一堆知识点要掌握,尤其是不喜欢nodejs和javascript方式的写法.算了,还是用beego来写 ...
SDOI 2019 R1游记
$SDOI$ $2019$ $R1$游记昨天才刚回来,今天就来写游记啦! Day -5: 做了一下去年省选的Day1,感觉很神仙. Day -4: 做了一下去年省选的Day2,感觉还是很神仙. Da ...