vue实战记录（二）- vue实现购物车功能之建立vue实例

时间 2020-07-07

标签 vue 实战记录实现购物车功能建立实例繁體版

原文原文链接

vue实战，一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，本身搭建了express本地服务器来请求数据html

做者：狐狸家的鱼vue

本文连接：vue实战-实现购物车功能（二）node

GitHub：sueRimngit

1、前言

上一篇讲解了如何运用node.js+express搭建本地服务器，解决chrome浏览器跨域而致使没法获取本地数据的问题，这章讲解如何建立本地实例。github

2、安装vue依赖

在vs code终端输入如下命令安装vue依赖：chrome

npm install vue --saveexpress

结束后继续输入如下命令安装vue-resource依赖：npm

npm install vue-resource --savejson

打开package.json文件就能看见：跨域

3、建立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 表明要显示的页面，能够获得结果，证实实例建立挂载成功。