新手入坑VUE

我是做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的语法规则,进行动态加载了。
如果您觉得以上内容哪里不对,欢迎交流。

    原文作者:一米阳光
    原文地址: https://segmentfault.com/a/1190000015871990
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞