非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"
}
    }

});

 

posted @ 2017-04-16 00:14  HongMaJu  阅读(8568)  评论(0)  编辑  收藏  举报