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

给熟悉jquery,想使用vue的人的页面搭建建议

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>一直主要用vue做spa,有工程化,可以受益于<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>语法的高效。但是我们还提供开发服务,这里仅通过<br />样例代码说明梗概。</p> <p>首先你得有个页面,暂命名为<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex.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="<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>="<!DOCTYPE html> <html> <head> <meta charset=&quot;UTF-8&quot;> <!-- 引入样式 --> <link rel=&quot;stylesheet&quot; href=&quot;lib/lfbp-element/lib/theme-default/index.css&quot;> <style> fieldset{ border:none; } </style> <p> </head> <body> </p> <div id=&quot;app&quot;> </div> <p> </body> <!-- 引入组件库 --> <script src=&quot;lib/vue.js&quot;></script> <script src=&quot;lib/jquery.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;index.js&quot;></script> </html> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 引入样式 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/link" title="浏览关于“link”的文章" target="_blank" class="tag_link">link</a></span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"lib/lfbp-<a href="http://www.js-code.com/tag/element" title="浏览关于“element”的文章" target="_blank" class="tag_link">element</a>/lib/theme-<a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a>/index.css"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-tag">fieldset</span>{ <span class="hljs-attribute">border</span>:none; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-comment">&lt;!-- 引入组件库 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"lib/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"lib/jquery.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/<a href="http://www.js-code.com/tag/java" title="浏览关于“java”的文章" target="_blank" class="tag_link">java</a>script"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"index.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> </code></pre> <p>引入需要的jquery,vue.js文件后,建立自己的index.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="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=";(function(window,Vue,$){" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;">;(<span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>(<span class="hljs-params"><span class="hljs-built_in"><a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a></span>,<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>,$</span>)</span>{</code></pre> <p>console.log(win<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>w,Vue,$);<br /> <a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a> Vue({</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=" el: '#app', template:' <div>*******</div> <p>', data:function() { return { list:'', originalValue:'', currentValue:'', searchKey:'关键字', }; }, methods:{ request:function(){ }, changeHandle:function(index,value){ }, set:function(){ this.isEdit = true; }, del:function(){ }, confirm:function(){ }, cancel:function(){ } }, created:function() { this.request(); } })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code> el: <span class="hljs-string">'#app'</span>, template:<span class="hljs-string">'&lt;div&gt;*******&lt;/div&gt;'</span>, data:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> { list:<span class="hljs-string">''</span>, originalValue:<span class="hljs-string">''</span>, currentValue:<span class="hljs-string">''</span>, searchKey:<span class="hljs-string">'关键字'</span>, }; }, methods:{ request:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ }, changeHandle:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(index,value)</span></span>{ }, <span class="hljs-keyword">set</span>:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.isEdit = <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>; }, del:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ }, <a href="http://www.js-code.com/tag/confirm" title="浏览关于“confirm”的文章" target="_blank" class="tag_link">confirm</a>:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ }, cancel:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ } }, created:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">this</span>.request(); } })</code></pre> <p>}(window,Vue,$))</p> <p>这样就可以愉快的使用jquery+vue双重利剑了。</p> <p></code></p>

总结

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

给熟悉jquery,想使用vue的人的页面搭建建议

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

给熟悉jquery,想使用vue的人的页面搭建建议

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

80%的人都看过