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

});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM