脚本宝典收集整理的这篇文章主要介绍了

新手入坑VUE

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>我是做PHP的,偶然遇到了VUE,觉得好强大,就想知道它到底是如何工作的。然后就入了VUE的坑。<br />下面就把学习VUE中遇到的一些问题,结合自己的理解做个整理。<br />如果您觉得哪里不正确,欢迎交流。</p> <h2 id="articleHeader0"><strong>一、VUE 和 vue.js的区别</strong></h2> <p>我的理解是:VUE 是一个前端框架,可以做模块化开发;vue.js属于VUE框架的一个核心文件,可以拿出来单独使用。<br />遵从由易到难的原则,从VUE.js开始学习,因为如果直接开始 vue-cli (我认为这个东东,是vue框架的安装包,安装它需要用到npm【使用npm安装文件,需要先装<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>.js】),里面包含很多东西会不理解,学习起来会很头疼。所以建议从 vue.js开始学起。<br />1.vue.js 官方的文档:<a href="https://cn.vuejs.org/" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/</a><br />2.我认为写的很好的学习记录文章:<a href="https://segmentfault.com/u/eraitianshi/articles">https://segmentfault.com/u/er...</a>,里面有很详细的学习笔记,放的例子也很有代表性。</p> <h2 id="articleHeader1"><strong>二、 安装vue-cli步骤</strong></h2> <p>尽管不从这里开始学习,不过工具先装上还是可以的。<br />安装vue-cli步骤:</p> <p>1.装node.js: <a href="http://nodejs.cn/download/" rel="nofollow noreferrer" target="_blank">http://nodejs.cn/download/</a> 注意:下载 .msi 文件,这个是安装文件,下载好,一路下一步,就能够完成安装;.zip文件,下载下来,不知道怎么用 o(╯□╰)o,如果你知道的话,欢迎留言,共同交流</p> <p>2.装好后,打开cmd命令窗,使用命令查看版本号,如果显示版本号,就证明安装成功了</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm -v // 查看npm版本 node -v // 查看node版本 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code>npm -v <span class="hljs-comment">// 查看npm版本</span> node -v <span class="hljs-comment">// 查看node版本</span> </code></pre> <p>3.全局安装vue-cli,找资源的话,打开npm网站:<a href="https://www.npmjs.com/" rel="nofollow noreferrer" target="_blank">https://www.npmjs.com/</a> 在左上角的放大镜处搜索:vue-cli,会显示详细的页面</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install -g vue-cli " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword"><a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>st<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a></span> -g vue-cli </code></pre> <p>4.测试vue安装成功,注意:-V 是大写</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vue -V vue list " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">vue</span> <span class="hljs-string">-V</span> <span class="hljs-attr">vue</span> <span class="hljs-string">list</span> </code></pre> <p>5.如果出现版本号,证明你的vue已经安装成功了,下面就创建项目,关于创建项目的步骤,请参考:<a href="https://segmentfault.com/a/1190000010960666">https://segmentfault.com/a/11...</a> 里面写的很详细,不再赘述。</p> <p>6.项目建好后,就启动项目,cmd进入项目目录(你建的项目index.html所在文件夹),启动项目</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm start " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">start</span> </code></pre> <p>cmd窗口会显示网址和端口,注意:在这过程中不要关闭cmd窗口!我的理解是:VUE类似与redis,在cmd中启动相关服务,如果关闭,一切以VUE为基础的服务就启动不了,所以就会报错。单独使用vue.js却没有这种情况,不知道是不是vue.js把所有需要的东西都已经封装好了,思考ing...</p> <h2 id="articleHeader2"><strong>三、回到初衷</strong></h2> <p>最开始学习的目的是为了知道vue是如何在页面加载的时候从后台获取数据,并实现页面的动态加载。</p> <p>1.index.html页面,引用vue.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="<script src=&quot;js/vue.js&quot;></script> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>2.因为使用的JQ的post请求,所以要引入JQ,这里用的是百度的静态资源库,具体可以根据自己项目的实际情况引用</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&quot;></script> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>3.具体实现代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> <a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a> url = url; //这里为请求的目标地址 var vm = <a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ el: '#box', //绑定的节点,这里使用的是ID,也可以是class等 data: { items:[] //初始化接收数据的参数 }, // created 里的方法能在创建VUE的时候执行 created:<a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a>(){ $.post(url,function(res){ <a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>(res.code == 0){ //如果请求成功,把请求到的数据放入接收的参数中,这里要使用 vm.items vm.items = res; } }); } }); </script> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">var</span> url = url; <span class="hljs-comment">//这里为请求的目标地址</span> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#box'</span>, <span class="hljs-comment">//绑定的节点,这里使用的是ID,也可以是class等</span> data: { <span class="hljs-attr">items</span>:[] <span class="hljs-comment">//初始化接收数据的参数</span> }, <span class="hljs-comment">// created 里的方法能在创建VUE的时候执行</span> created:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ $.post(url,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>)</span>{ <span class="hljs-keyword">if</span>(res.code == <span class="hljs-number">0</span>){ <span class="hljs-comment">//如果请求成功,把请求到的数据放入接收的参数中,这里要使用 vm.items</span> vm.items = res; } }); } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>4.解决跨域问题,在请求地址的控制器页面加上</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="header(&quot;Access-Control-Allow-Origin: *&quot;); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code>header(<span class="hljs-string">"Access-Control-Allow-Origin: *"</span>)<span class="hljs-comment">;</span> </code></pre> <p>然后就可以对请求到的数据按照vue.js的语法规则,进行动态加载了。<br />如果您觉得以上内容哪里不对,欢迎交流。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

新手入坑VUE

全部内容,希望文章能够帮你解决

新手入坑VUE

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过