欢迎访问 生活随笔!

生活随笔

当前位置: 首页 >

非nodejs方式的vue.js的使用

发布时间:2023/12/31 37 豆豆
生活随笔 收集整理的这篇文章主要介绍了 非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" }}});

 

总结

以上是生活随笔为你收集整理的非nodejs方式的vue.js的使用的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。