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

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>一直主要用vue做spa,有工程化,可以受益于<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>语法的高效。但是我们还提供开发服务,这里仅通过<br />样例代码说明梗概。</p> <p>首先你得有个页面,暂命名为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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <!-- 引入样式 --> <link rel=&quot;stylesheet&quot; href=&quot;lib/lfbp-element/lib/theme-default/index.css&quot;> <style> fieldset{ border:none; } </style> <p></head><br /> <body></p> <div id=&quot;app&quot;></div> <p></body><br /> <!-- 引入组件库 --><br /> <script src=&quot;lib/vue.js&quot;></script><br /> <script src=&quot;lib/jquery.js&quot;></script><br /> <script type=&quot;text/javascript&quot; src=&quot;index.js&quot;></script><br /> </html><br /> " 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">charset</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">link</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-element/lib/theme-default/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/javascript"</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><br /> <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">function</span>(<span class="hljs-params"><span class="hljs-built_in">window</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(window,<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>,$);<br /> new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" el: '#app', template:' <div>*******</div> <p>',<br /> data:function() {<br /> return {</p> <p> list:'',<br /> originalValue:'',<br /> currentValue:'',<br /> searchKey:'关键字',<br /> };<br /> },<br /> methods:{<br /> request:function(){</p> <p> },<br /> changeHandle:function(index,value){</p> <p> },<br /> set:function(){<br /> this.isEdit = true;<br /> },<br /> del:function(){</p> <p> },<br /> confirm:function(){</p> <p> },<br /> cancel:function(){</p> <p> }<br /> },<br /> created:function() {<br /> this.request();<br /> }<br /> })" 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">return</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">true</span>; }, del:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ }, confirm:<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%的人都看过