zoukankan      html  css  js  c++  java
  • 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 代表要显示的页面,可以得到结果,证明实例创建挂载成功。

  • 相关阅读:
    吃透空洞卷积(Dilated Convolutions)
    CondInst:性能和速度均超越Mask RCNN的实例分割模型
    图像处理基础:颜色空间及其OpenCV实现
    caffe模型转rknn模型的方法
    探索 YOLO v3 源码
    探索 YOLO v3 源码
    事件
    组合,模板,bolck块
    WXSS学习
    其他组件
  • 原文地址:https://www.cnblogs.com/suRimn/p/10338495.html
Copyright © 2011-2022 走看看