我是做PHP的,偶然遇到了VUE,觉得好强大,就想知道它到底是如何工作的。然后就入了VUE的坑。
下面就把学习VUE中遇到的一些问题,结合自己的理解做个整理。
如果您觉得哪里不正确,欢迎交流。
一、VUE 和 vue.js的区别
我的理解是:VUE 是一个前端框架,可以做模块化开发;vue.js属于VUE框架的一个核心文件,可以拿出来单独使用。
遵从由易到难的原则,从VUE.js开始学习,因为如果直接开始 vue-cli (我认为这个东东,是vue框架的安装包,安装它需要用到npm【使用npm安装文件,需要先装node.js】),里面包含很多东西会不理解,学习起来会很头疼。所以建议从 vue.js开始学起。
1.vue.js 官方的文档:https://cn.vuejs.org/
2.我认为写的很好的学习记录文章:https://segmentfault.com/u/er...,里面有很详细的学习笔记,放的例子也很有代表性。
二、 安装vue-cli步骤
尽管不从这里开始学习,不过工具先装上还是可以的。
安装vue-cli步骤:
1.装node.js: http://nodejs.cn/download/ 注意:下载 .msi 文件,这个是安装文件,下载好,一路下一步,就能够完成安装;.zip文件,下载下来,不知道怎么用 o(╯□╰)o,如果你知道的话,欢迎留言,共同交流
2.装好后,打开cmd命令窗,使用命令查看版本号,如果显示版本号,就证明安装成功了
npm -v // 查看npm版本
node -v // 查看node版本
3.全局安装vue-cli,找资源的话,打开npm网站:https://www.npmjs.com/ 在左上角的放大镜处搜索:vue-cli,会显示详细的页面
npm install -g vue-cli
4.测试vue安装成功,注意:-V 是大写
vue -V
vue list
5.如果出现版本号,证明你的vue已经安装成功了,下面就创建项目,关于创建项目的步骤,请参考:https://segmentfault.com/a/11... 里面写的很详细,不再赘述。
6.项目建好后,就启动项目,cmd进入项目目录(你建的项目index.html所在文件夹),启动项目
npm start
cmd窗口会显示网址和端口,注意:在这过程中不要关闭cmd窗口!我的理解是:VUE类似与redis,在cmd中启动相关服务,如果关闭,一切以VUE为基础的服务就启动不了,所以就会报错。单独使用vue.js却没有这种情况,不知道是不是vue.js把所有需要的东西都已经封装好了,思考ing...
三、回到初衷
最开始学习的目的是为了知道vue是如何在页面加载的时候从后台获取数据,并实现页面的动态加载。
1.index.html页面,引用vue.js
<script src="js/vue.js"></script>
2.因为使用的JQ的post请求,所以要引入JQ,这里用的是百度的静态资源库,具体可以根据自己项目的实际情况引用
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
3.具体实现代码:
<script>
var url = url; //这里为请求的目标地址
var vm = new Vue({
el: '#box', //绑定的节点,这里使用的是ID,也可以是class等
data: {
items:[] //初始化接收数据的参数
},
// created 里的方法能在创建VUE的时候执行
created:function(){
$.post(url,function(res){
if(res.code == 0){
//如果请求成功,把请求到的数据放入接收的参数中,这里要使用 vm.items
vm.items = res;
}
});
}
});
</script>
4.解决跨域问题,在请求地址的控制器页面加上
header("Access-Control-Allow-Origin: *");
然后就可以对请求到的数据按照vue.js的语法规则,进行动态加载了。
如果您觉得以上内容哪里不对,欢迎交流。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。