非nodejs方式的vue.js的使用

1、node环境

详细见我之前的文章，node的安装

2、git环境

git bash命令窗，支持bash命令，cmd不支持bash命令

3、cnpm安装

cnpm是针对国内使用npm网络慢的而使用的

在cmd中输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org
如果node的版本比较低，会执行不成功。需要升级node的版本，直接下载最新的node覆盖安装

4、下载vue.min.js和vue-resource.min.js

这是使用cnpm的方式

打开git bash，输入：cnpm install vue

　　　　　　　输入：cnpm install vue-resource

将下载到的vue.min.js和vue-resource.min.js放到项目中

5、截图说明

将title的值在data中绑定为hello vue，然后执行cartView方法，将title值修改为Vue hello

6、index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0">

    <title>Title</title>

</head>

<body>

<div id="app">

<h2>{{title}}</h2>

</div>

<script src="js/lib/vue.min.js"></script>

<script src="js/lib/vue-resource.min.js"></script>

<script src="js/cart.js"></script>

</body>

</html>

7、cart.js

/**

 * Created by kk on 2017/4/16.

 */

var vm =new Vue({

    el:"#app",

    data:{

        title:"hello vue"

    },

    filters:{

    },

    mounted:function () {

        //类似于jquery中的ready方法

        this.cartView();

    },

    methods:{

        cartView:function () {

    this.title="Vue hello"

}

    }

});

秒客网