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

vue 项目开发要点总结

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">vue-cli 脚手架工具的使用</h2> <p><strong>vue-cli 的依赖</strong><br /><span class="img-wrap"><img data-src="/img/bV13r9?w=679&amp;h=316" src="/img/bV13r9?w=679&amp;h=316" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <p><strong>vue-cli 的使用流程</strong><br /><span class="img-wrap"><img data-src="/img/bV13sh?w=857&amp;h=492" src="/img/bV13sh?w=857&amp;h=492" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <p><strong><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a> 的安装</strong><br /><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a> 是通过js 操作系统接口的语言; npm 是<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>的包管理工具;所以,安装了node 就可以直接使用npm 下载我们需要的包;<br />node 可以直接去node官网下载对应系统的安装包,安装提示完成;<br />然后在 命令行中 通过 npm -v 查看npm 版本,如果有出来代表安装成功;</p> <p><strong>npm 代理 到cnpm</strong><br />你直接通过添加 npm 参数 alias 一个新命令:</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="alias cnpm=&quot;npm --registry=https://registry.npm.taobao.org --cache=$HOME/.npm/.cache/cnpm --disturl=https://npm.taobao.org/dist --userconfig=$HOME/.cnpmrc&quot;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>alias cnpm="npm <span class="hljs-comment">--regis<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a>=https://registry.npm.taobao.org </span> <span class="hljs-comment">--cache=$HOME/.npm/.cache/cnpm </span> <span class="hljs-comment">--disturl=https://npm.taobao.org/dist </span> <span class="hljs-comment">--userconfig=$HOME/.cnpmrc"</span></code></pre> <p>然后运行</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="cnpm install xx -g //全局安装xx" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code style="word-break: break-word; white-space: initial;">cnpm <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> xx -g <span class="hljs-comment">//全局安装xx</span></code></pre> <p><strong>使用 vue-cli</strong></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="vue init webpack demoName //生成 webpack 为模板的vue项目" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;">vue <span class="hljs-keyword">init</span> webpack demoName <span class="hljs-comment">//生成 webpack 为模板的vue项目</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bV13NP?w=804&amp;h=444" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><strong>运行热更新页面</strong></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="npm run dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">npm</span> run dev</code></pre> <p>生成项目可以直接通过 <a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080/?#/ 访问</p> <p>如果你是拉别人的项目运行的,要先运行下面的命令,安装依赖包</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="npm install //或者 npm i" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code><span class="hljs-built_in">npm</span> install <span class="hljs-regexp">//</span>或者 <span class="hljs-built_in">npm</span> i</code></pre> <p><strong>生成一个 静态项目文件(直接打开的静态页面)</strong></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="npm run build" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">npm</span> run build</code></pre> <blockquote><p>大多数情况 ,生成的页面是不可以直接打开的;提示只能部署到 服务器上才能正常访问;<br />如果需要直接本地打开;到项目目录下的config文件夹里的<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.js文件中,将build对象下的assetsPublicPath中的“/”,改为“./”即可</p></blockquote> <p><span class="img-wrap"><img data-src="/img/bV13Vo?w=703&amp;h=487" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span><br />生成的文件都是经过压缩的,带md5的文件</p> <h2 id="articleHeader1"><a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a> 的引入与输出</h2> <blockquote><p><strong><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a>{} , module.<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a>s = {}, <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a>s { }</strong></p></blockquote> <p>在node 的模块中,<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a>s 是 module.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s 的引用;但是在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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="exports = { porps:['text'] } // 提示 text 未定义;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs java"><code><span class="hljs-keyword">exports</span> = { porps:[<span class="hljs-string">'<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>'</span>] } <span class="hljs-comment">// 提示 text 未定义;</span></code></pre> <p>exports <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> {} 定义的输出;可以通过 <a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> xx 直接使用(标准ES6);写法是:</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="exports default {a:123} import a; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">exports</span> <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> {<span class="hljs-attribute">a</span>:<span class="hljs-number">123</span>} <span class="hljs-selector-tag">import</span> <span class="hljs-selector-tag">a</span>; </code></pre> <p><strong>module.exports = {} 与 exports default 是等价的</strong></p> <p><strong>但是如果 同一个js 同时出现 module.exports ={} 和 <a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> 就会报错</strong></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=" module.exports = {a:123} //定义和导出 import a; //引入 //上面两个关键词 不能同时出现在同一个js 中 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs java"><code> <span class="hljs-keyword">module</span>.<span class="hljs-keyword">exports</span> = {a:<span class="hljs-number">123</span>} <span class="hljs-comment">//定义和导出</span> <span class="hljs-keyword">import</span> a; <span class="hljs-comment">//引入</span> <span class="hljs-comment">//上面两个关键词 不能同时出现在同一个js 中</span> </code></pre> <p><strong>报错原因如下:</strong></p> <blockquote><p>webpack可以使用require和export ,但是不能混合使用import 和module.exports ,不然会报错Cannot<br /><a href="http://www.js-code.com/tag/assign" title="assign" target="_blank">assign</a> to read only property 'exports' of object '#&lt;<a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a>&gt;'<br />ES6 统一的写法 是 import 和 exports default<br />如果你要import 组件 ;建议 统一使用 exports default {} 编写组件</p></blockquote> <p><span class="img-wrap"><img data-src="/img/bV2eNY?w=753&amp;h=390" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bV2eRK?w=741&amp;h=153" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h2 id="articleHeader2">vue-router 路由插件安装</h2> <p><strong>安装</strong></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="cnpm install vue-router " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">cnpm <span class="hljs-keyword">install</span> vue-router </code></pre> <p><strong>引入为全局插件</strong></p> <p><span class="img-wrap"><img data-src="/img/bV15IG?w=878&amp;h=405" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h2 id="articleHeader3">配置路由表</h2> <p><span class="img-wrap"><img data-src="/img/bV15KG?w=699&amp;h=451" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>可以通过router-<a href="http://www.js-code.com/tag/link" title="link" target="_blank">link</a> 组件 链接到 对应组件;它会解析成类似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="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<router-link :to=&quot;{path:'forms'}&quot;><a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a>ms</router-link> //注意书写格式一定要正确<br /> <router-link :to=&quot;{path:'father'}&quot;>father</router-link>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">router-<a href="http://www.js-code.com/tag/link" title="浏览关于“link”的文章" target="_blank" class="tag_link">link</a></span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"{path:'<a href="http://www.js-code.com/tag/forms" title="浏览关于“forms”的文章" target="_blank" class="tag_link">forms</a>'}"</span>&gt;</span><a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a>s<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span> //注意书写格式一定要正确 <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"{path:'father'}"</span>&gt;</span>father<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bV15N5?w=707&amp;h=391" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>注意到 生成的url 中前面自动加了个 “#”;可以通过添加 mode:'<a href="http://www.js-code.com/tag/history" title="history" target="_blank">history</a>', 去掉<br /><span class="img-wrap"><img data-src="/img/bV2as9?w=341&amp;h=183" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>原理:<a href="https://router.vuejs.org/zh-cn/essentials/history-mode.html" rel="nofollow noreferrer" target="_blank">https://router.vuejs.org/zh-c...</a></p> <p>路由配置中,path 可以设置 url 带参;</p> <p><strong>带参path定义</strong><br /><span class="img-wrap"><img data-src="/img/bV15PH?w=636&amp;h=288" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><em>表示 apple 后面跟的是参数,不是路径;</em></p> <p><strong>带参路径</strong><br /><span class="img-wrap"><img data-src="/img/bV15P7?w=434&amp;h=28" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><strong>获取参数</strong><br /><span class="img-wrap"><img data-src="/img/bV15PY?w=755&amp;h=155" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h2 id="articleHeader4">使用路由要注意的地方</h2> <ul> <li>所有的路由都是定义在 routes 生成的页面中的;不能在子组件中重新定义;例子如下:</li> </ul> <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="var router = new VueRouter() import browseMode from './components/browse-mode.vue' import blogList from './components/blog-list.vue' import blogArticle from './components/blog-article.vue' import writePanel from './components/write-panel.vue' router.map({ '/': { component: browseMode, subRoutes: { '/': { component: blogList }, '/details/:artId': { component: blogArticle } } }, '/edit/:mode': { component: writePanel }, '/search/tag/:tag': { component: browseMode, subRoutes: { '/': { component: blogList } } }, '/search/time/:time': { component: browseMode, subRoutes: { '/': { component: blogList } } }, '/search/title/:title': { component: browseMode, subRoutes: { '/': { component: blogList } } }, }) router.start(App, 'app')" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> router = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>Router() <span class="hljs-keyword">import</span> browseMode <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/browse-mode.vue'</span> <span class="hljs-keyword">import</span> blogList <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/blog-list.vue'</span> <span class="hljs-keyword">import</span> blogArticle <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/blog-article.vue'</span> <span class="hljs-keyword">import</span> writePanel <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/write-panel.vue'</span> router.map({ <span class="hljs-string">'/'</span>: { component: browseMode, subRoutes: { <span class="hljs-string">'/'</span>: { component: blogList }, <span class="hljs-string">'/details/:artId'</span>: { component: blogArticle } } }, <span class="hljs-string">'/edit/:mode'</span>: { component: writePanel }, <span class="hljs-string">'/search/tag/:tag'</span>: { component: browseMode, subRoutes: { <span class="hljs-string">'/'</span>: { component: blogList } } }, <span class="hljs-string">'/search/time/:time'</span>: { component: browseMode, subRoutes: { <span class="hljs-string">'/'</span>: { component: blogList } } }, <span class="hljs-string">'/search/title/:title'</span>: { component: browseMode, subRoutes: { <span class="hljs-string">'/'</span>: { component: blogList } } }, }) router.start(App, <span class="hljs-string">'app'</span>)</code></pre> <ul> <li>路由不是最适合做tab切换的;最适合做tab的是 components 内置组件 ;通过is 控制切换;</li> </ul> <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="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<component v-bind:is=&quot;currentView&quot;></p> <p>var vm = new Vue({<br /> el: '#example',<br /> data: {<br /> currentView: 'home' //改变这个值就会切换内容;<br /> },<br /> components: {<br /> home: { /* ... */ },<br /> posts: { /* ... */ },<br /> archive: { /* ... */ }<br /> }<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code>&lt;component v-bind:<span class="hljs-keyword">is</span>=<span class="hljs-string">"currentView"</span>&gt; <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#example'</span>, data: { currentView: <span class="hljs-string">'home'</span> <span class="hljs-comment">//改变这个值就会切换内容;</span> }, components: { home: { <span class="hljs-comment">/* ... */</span> }, posts: { <span class="hljs-comment">/* ... */</span> }, archive: { <span class="hljs-comment">/* ... */</span> } } })</code></pre> <ul> <li>定义带参路由 的时候 注意格式是 path:'/box1/:text', 不是path:'/box1:text',(可以理解为/: 后面是参数 ,/后面是路径;)</li> </ul> <p><span class="img-wrap"><img data-src="/img/bV16fV?w=322&amp;h=113" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <ul> <li>定义好路由后, router-l<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>k 是可以放在任何地方的;它就是一个a标签;点击会切换第一个父级的router-view 中的页面;还要注意格式和传参</li> </ul> <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="<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-text=" </p> <li class=&quot;tab1&quot;><router-link :to=&quot;{path:'box1/666'}&quot;>box1</router-link></li> <p> // to的 值是一个对象 ,key 固定是path ,value 是 一个字符串;<br /> // 后面的666 是参数;它的前面不是 “ ?或者 &amp; ” 而是 “ / ”;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code> &lt;li <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"tab1"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"{path:'box1/666'}"</span>&gt;</span>box1<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span> <span class="hljs-comment">// to的 值是一个对象 ,key 固定是path ,value 是 一个字符串;</span> <span class="hljs-comment">// 后面的666 是参数;它的前面不是 “ ?或者 &amp; ” 而是 “ / ”;</span></code></pre> <ul> <li>获取参数的时候,直接去到参数的值是 <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$route.params.text (text是你定义路由时的 :text )</li> </ul> <p><span class="img-wrap"><img data-src="/img/bV16fX?w=527&amp;h=138" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <ul> <li>因为$route 是一个全局变量,你还可以直接在html 中使用它的url参数</li> </ul> <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=" <div>{{$route.params.text}}</div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><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>&gt;</span>{{$route.params.text}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p>定义一个多参数 路由的 url<br /><span class="img-wrap"><img data-src="/img/bV2abq?w=580&amp;h=49" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>使用时的url可能是这样:</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="http://localhost:8080/#/apple/red/detail/fool //后面的detail 是固定的。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">http:</span><span class="hljs-comment">//localhost:8080/#/apple/red/detail/fool</span> <span class="hljs-comment">//后面的detail 是固定的。</span></code></pre> <p>获取的方法是一样的;</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="var a = $route.params; //结果 a={ color:red, type:fool }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-keyword">var</span> a = $route.params; <span class="hljs-comment">//结果</span> a={ color:red, <span class="hljs-class"><span class="hljs-keyword">type</span></span>:fool }</code></pre> <h2 id="articleHeader5">子路由的定义</h2> <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="{ path:'/box1', component:box1, children:[ { // 当 /box1/box1a匹配成功, // box1a会被渲染在 box1的 <router-view> 中<br /> path:'box1a', //这里不加 “ / ”<br /> component:box1a<br /> },<br /> {<br /> path:'box1b',<br /> component:box1b<br /> }<br /> ]<br /> },<br /> // 要注意,以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。</p> <p>//在box1 中定义一行 </p> <p><router-view></router-view></p> <p>//子组件 box1a 会自动渲染 到页面中;</p> <p>//如果添加两个 router-<a href="http://www.js-code.com/tag/link" title="link" target="_blank">link</a> 组件 就可以做tab切换(不建议用路由做tab)<br /> //router-link 只会切换 第一个父级的 router-view 中的内容,所以不会刷新整个 box1 ;</p> <ul> <li class=&quot;tab1&quot;><router-link :to=&quot;{path:'/box1/box1a'}&quot;>box1a</router-link></li> <li class=&quot;tab2&quot;><router-link :to=&quot;{path:'/box1/box1b'}&quot;>box1b</router-link></li> </ul> <p>//path 写成 /box1/box1a 是用了根路径(绝对路径)的形式;<br /> //如果写成 {path:'box1a'} 则是相对路径;这样写点击 浏览器的url会写成 http://localhost:8080/box1a<br /> //因为顶级路由中是没有定义 box1a 组件的;所以页面空白;<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>{ <span class="hljs-attr">path</span>:<span class="hljs-string">'/box1'</span>, <span class="hljs-attr">component</span>:box1, <span class="hljs-attr">children</span>:[ { <span class="hljs-comment">// 当 /box1/box1a匹配成功,</span> <span class="hljs-comment">// box1a会被渲染在 box1的 &lt;router-view&gt; 中</span> path:<span class="hljs-string">'box1a'</span>, <span class="hljs-comment">//这里不加 “ / ”</span> component:box1a }, { <span class="hljs-attr">path</span>:<span class="hljs-string">'box1b'</span>, <span class="hljs-attr">component</span>:box1b } ] }, <span class="hljs-comment">// 要注意,以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。</span> <span class="hljs-comment">//在box1 中定义一行 </span> &lt;router-view/&gt; <span class="hljs-comment">//子组件 box1a 会自动渲染 到页面中;</span> <span class="hljs-comment">//如果添加两个 router-link 组件 就可以做tab切换(不建议用路由做tab)</span> <span class="hljs-comment">//router-link 只会切换 第一个父级的 router-view 中的内容,所以不会刷新整个 box1 ;</span> &lt;ul&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab1"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"{path:'/box1/box1a'}"</span>&gt;</span>box1a<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"{path:'/box1/box1b'}"</span>&gt;</span>box1b<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> //path 写成 /box1/box1a 是用了根路径(绝对路径)的形式; //如果写成 {path:'box1a'} 则是相对路径;这样写点击 浏览器的url会写成 http://localhost:8080/box1a //因为顶级路由中是没有定义 box1a 组件的;所以页面空白; </span></code></pre> <blockquote><p><strong>带参子路由</strong></p></blockquote> <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="//路由定义 { path:'/box1/:text', component:box1, children:[ { path:'box1a', component:box1a }, { path:'box1b', component:box1b } ] }, //跳转到 box1 的写法 <li class=&quot;tab1&quot;><router-link :to=&quot;{path:'box1/789'}&quot;>box1</router-link></li> <p>//box1 中渲染 box1a/b 的写法</p> <ul> <li class=&quot;tab1&quot;><router-link :to=&quot;{path:url1}&quot;>box1a</router-link></li> <li class=&quot;tab2&quot;><router-link :to=&quot;{path:url2}&quot;>box1b</router-link></li> </ul> <p>//初始化的时候生成url<br /> mounted: function () {<br /> this.parms = this.$route.params.text;<br /> this.url1 = '/box1/'+this.parms+'/box1a'<br /> this.url2 = '/box1/'+this.parms+'/box1b'<br /> }," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cs"><code><span class="hljs-comment">//路由定义</span> { path:<span class="hljs-string">'/box1/:text'</span>, component:box1, children:[ { path:<span class="hljs-string">'box1a'</span>, component:box1a }, { path:<span class="hljs-string">'box1b'</span>, component:box1b } ] }, <span class="hljs-comment">//跳转到 box1 的写法</span> &lt;li <span class="hljs-keyword">class</span>=<span class="hljs-string">"tab1"</span>&gt;&lt;router-link :to=<span class="hljs-string">"{path:'box1/789'}"</span>&gt;box1&lt;/router-link&gt;&lt;/li&gt; <span class="hljs-comment">//box1 中渲染 box1a/b 的写法</span> &lt;ul&gt; &lt;li <span class="hljs-keyword">class</span>=<span class="hljs-string">"tab1"</span>&gt;&lt;router-link :to=<span class="hljs-string">"{path:url1}"</span>&gt;box1a&lt;/router-link&gt;&lt;/li&gt; &lt;li <span class="hljs-keyword">class</span>=<span class="hljs-string">"tab2"</span>&gt;&lt;router-link :to=<span class="hljs-string">"{path:url2}"</span>&gt;box1b&lt;/router-link&gt;&lt;/li&gt; &lt;/ul&gt; <span class="hljs-comment">//初始化的时候生成url</span> mounted: <a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a> () { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.parms = <span class="hljs-keyword">this</span>.$route.<span class="hljs-keyword">params</span>.text; <span class="hljs-keyword">this</span>.url1 = <span class="hljs-string">'/box1/'</span>+<span class="hljs-keyword">this</span>.parms+<span class="hljs-string">'/box1a'</span> <span class="hljs-keyword">this</span>.url2 = <span class="hljs-string">'/box1/'</span>+<span class="hljs-keyword">this</span>.parms+<span class="hljs-string">'/box1b'</span> },</code></pre> <ul> <li>router-link 中的to 属性,如果只是简单的跳转可以直接写成 to=“box1”;</li> <li>如果加上:绑定属性;后面的属性可以是简短的 表达式,因此上面的例子可以简化为:</li> </ul> <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="//路由定义 { path:'/box1/:text', component:box1, children:[ { path:'box1a', component:box1a }, { path:'box1b', component:box1b } ] }, //跳转到 box1 的写法 <li class=&quot;tab1&quot;><router-link :to=&quot;{path:'box1/789'}&quot;>box1</router-link></li> <p>//box1 中渲染 box1a/ b 的写法<br /> //to 属性会自动 运算出来;</p> <ul> <li class=&quot;tab1&quot;><router-link :to=&quot;/box1/'+parms+'/box1a'&quot;>box1a</router-link></li> <li class=&quot;tab2&quot;><router-link :to=&quot;'/box1/'+parms+'/box1b'&quot;>box1b</router-link></li> </ul> <p>//初始化的时候生成url<br /> mounted: function () {<br /> this.parms = this.$route.params.text;<br /> }," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">//路由定义</span> { <span class="hljs-attr">path</span>:<span class="hljs-string">'/box1/:text'</span>, <span class="hljs-attr">component</span>:box1, <span class="hljs-attr">children</span>:[ { <span class="hljs-attr">path</span>:<span class="hljs-string">'box1a'</span>, <span class="hljs-attr">component</span>:box1a }, { <span class="hljs-attr">path</span>:<span class="hljs-string">'box1b'</span>, <span class="hljs-attr">component</span>:box1b } ] }, <span class="hljs-comment">//跳转到 box1 的写法</span> &lt;li <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"tab1"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"{path:'box1/789'}"</span>&gt;</span>box1<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span> <span class="hljs-comment">//box1 中渲染 box1a/ b 的写法</span> <span class="hljs-comment">//to 属性会自动 运算出来;</span> &lt;ul&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab1"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"/box1/'+parms+'/box1a'"</span>&gt;</span>box1a<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"'/box1/'+parms+'/box1b'"</span>&gt;</span>box1b<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> //初始化的时候生成url mounted: function () { this.parms = this.$route.params.text; },</span></code></pre> <blockquote><p><strong>具名路由</strong></p></blockquote> <p>router-link 还可以通过 <a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a> 指定跳转(具名路由);通过例如 tag="li" 指定包裹标签为a以为的tag;</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=" children:[ { path:'box1a', <a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>:&quot;<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>Box&quot;,<br /> component:box1a<br /> }<br /> ]</p> <p> <router-link :to=&quot;{name:'nameBox'}&quot; tag=&quot;li&quot;>nameBox</router-link> </p> <p>//结果:会生成li, 点击router-view 会渲染出 box1a ;注意,path是不可缺少的<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code> children:[ { <span class="hljs-built_in">path</span>:<span class="hljs-string">'box1a'</span>, name:<span class="hljs-string">"nameBox"</span>, component:box1a } ] &lt;router-link :to=<span class="hljs-string">"{name:'nameBox'}"</span> tag=<span class="hljs-string">"li"</span>&gt;nameBox&lt;/router-link&gt; //结果:会生成li, 点击router-view 会渲染出 box1a ;注意,<span class="hljs-built_in">path</span>是不可缺少的 </code></pre> <h2 id="articleHeader6">用具名路由布局(代替<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>rame的方式)</h2> <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="export default <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Router({<br /> mode:'<a href="http://www.js-code.com/tag/history" title="history" target="_blank">history</a>',<br /> routes: [<br /> {<br /> path:'/index',<br /> components:{ //注意这里是有 “ s ” 的<br /> default:vuexIndex, //对应 <router-view></span><br /> left:vuexLeft, // 对应<router-view name=&quot;left&quot;></router-view><br /> right:vuexRight //对应<router-view name=&quot;right&quot;></router-view><br /> }<br /> }<br /> ]<br /> })</p> <p><template></p> <div id=&quot;app&quot;> <router-view></router-view></p> <div class=&quot;content&quot;> <router-view name=&quot;left&quot;></router-view><br /> <router-view name=&quot;right&quot;></router-view> </div> </p></div> <p></template></p> <p>//注意访问的路径 是在components 中定义的path ;<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({ <span class="hljs-attr">mode</span>:<span class="hljs-string">'<a href="http://www.js-code.com/tag/history" title="浏览关于“history”的文章" target="_blank" class="tag_link">history</a>'</span>, <span class="hljs-attr">routes</span>: [ { <span class="hljs-attr">path</span>:<span class="hljs-string">'/index'</span>, <span class="hljs-attr">components</span>:{ <span class="hljs-comment">//注意这里是有 “ s ” 的</span> <span class="hljs-keyword">default</span>:vuexIndex, <span class="hljs-comment">//对应 &lt;router-view/&gt;</span> left:vuexLeft, <span class="hljs-comment">// 对应&lt;router-view name="left"&gt;&lt;/router-view&gt;</span> right:vuexRight <span class="hljs-comment">//对应&lt;router-view name="right"&gt;&lt;/router-view&gt;</span> } } ] }) &lt;template&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</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">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> //注意访问的路径 是在components 中定义的path ; </span></code></pre> <h3 id="articleHeader7">在某个页面中定义具名路由</h3> <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="{ path:'/layout', name:'layout', component:layout, children: [ { path: '/', components:{ default:main, leftView:leftView, topBar:topBar }, } ] } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">{</span> <span class="hljs-attr">path</span>:<span class="hljs-string">'/layout',</span> <span class="hljs-attr">name</span>:<span class="hljs-string">'layout',</span> <span class="hljs-attr">component</span>:<span class="hljs-string">layout,</span> <span class="hljs-attr">children</span>: <span class="hljs-string">[</span> <span class="hljs-attr">{</span> <span class="hljs-attr">path</span>: <span class="hljs-string">'/',</span> <span class="hljs-attr">components</span>:<span class="hljs-string">{</span> <span class="hljs-attr">default</span>:<span class="hljs-string">main,</span> <span class="hljs-attr">leftView</span>:<span class="hljs-string">leftView,</span> <span class="hljs-attr">topBar</span>:<span class="hljs-string">topBar</span> <span class="hljs-attr">},</span> <span class="hljs-attr">}</span> <span class="hljs-attr">]</span> <span class="hljs-attr">}</span> </code></pre> <blockquote><p><strong>路由的重定向</strong></p></blockquote> <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=" routes: [ { path:'/', redirect:'/box' //路径不存在就跳转到box }, { path: '/a', redirect: '/b' } //访问a的路径,都跳转到b ]" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-symbol"> routes:</span> [ { <span class="hljs-string">path:</span><span class="hljs-string">'/'</span>, <span class="hljs-string">redirect:</span><span class="hljs-string">'/box'</span> <span class="hljs-comment">//路径不存在就跳转到box</span> }, { <span class="hljs-string">path:</span> <span class="hljs-string">'/a'</span>, <span class="hljs-string">redirect:</span> <span class="hljs-string">'/b'</span> } <span class="hljs-comment">//访问a的路径,都跳转到b</span> ]</code></pre> <h2 id="articleHeader8">vuex 状态管理插件安装</h2> <p>当vue项目中 组件过多并设计到功能某些数据的时候,管理数据变得复杂,VUEX 就是通过自身的一套数据管理流程帮助你管理 项目数据(状态);</p> <p><span class="img-wrap"><img data-src="/img/bV2enH?w=942&amp;h=576" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><strong>安装</strong></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="cnpm install vuex --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">cnpm <span class="hljs-keyword">install</span> vuex <span class="hljs-comment">--save</span></code></pre> <p><strong>实例化</strong></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="//在main.js 中 import <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>x from 'vuex'</p> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.use(Vuex);<br /> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> store = <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vuex.Store({ //Store 是vuex 方法<br /> state:{ //存放变量的地方<br /> total:0,<br /> appleTotal:0,<br /> bananaTotal:0,<br /> },<br /> mutations:{ //定义同步变量的方法<br /> aSetValue(state,value){<br /> state.appleTotal = value<br /> state.total = state.appleTotal + state.bananaTotal;<br /> },<br /> bSetValue(state,value){<br /> state.bananaTotal = value<br /> state.total = state.appleTotal + state.bananaTotal;<br /> }<br /> }<br /> })</p> <p>new Vue({<br /> el: '#app',<br /> store, //在实例中 引入<br /> router,<br /> components: { App },<br /> template: '<App></span>'<br /> })<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cs"><code><span class="hljs-comment">//在main.js 中</span> import Vuex <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span> Vue.use(Vuex); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> store = <span class="hljs-keyword">new</span> Vuex.Store({ <span class="hljs-comment">//Store 是vuex 方法</span> state:{ <span class="hljs-comment">//存放变量的地方</span> total:<span class="hljs-number">0</span>, appleTotal:<span class="hljs-number">0</span>, bananaTotal:<span class="hljs-number">0</span>, }, mutations:{ <span class="hljs-comment">//定义同步变量的方法</span> aSetValue(state,<span class="hljs-keyword">value</span>){ state.appleTotal = <span class="hljs-keyword">value</span> state.total = state.appleTotal + state.bananaTotal; }, bSetValue(state,<span class="hljs-keyword">value</span>){ state.bananaTotal = <span class="hljs-keyword">value</span> state.total = state.appleTotal + state.bananaTotal; } } }) <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, store, <span class="hljs-comment">//在实例中 引入</span> router, components: { App }, template: <span class="hljs-string">'&lt;App/&gt;'</span> }) </code></pre> <p><strong>获取值</strong></p> <p>vuex 的变量store 全局以后可以通过以下语句获取</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="<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$Store.state.total </p> <p>//组件中</p> <h3>总价:<span>{{$store.state.total}}</span></h3> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>this.$Store.state.total //组件中 <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>总价:<span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{$store.state.total}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span></code></pre> <p>还可以通过设置getter函数 暴露对应的值</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=" getters:{ getTotal(state){ <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> state.total<br /> }<br /> },</p> <p>//组件中</p> <h3>总价:<span>{{$store.getters.getTotal}}</span></h3> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> getters:{ getTotal(state){ <a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a> state.total } }, //组件中 <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>总价:<span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{$store.getters.getTotal}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span></code></pre> <h2 id="articleHeader9">改变vuex变量的值</h2> <p>通过在组件中调用以下特定语句改变</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=" methods:{ add(){ this.cnt += 1; //bSetValue 是在vuex实例的mutations中定义的方法 //通过 bSetValue方法 去改变实例的值 this.$store.commit('bSetValue',this.cnt*5) }, minus(){ this.cnt-=1; this.$store.commit('bSetValue',this.cnt*5) } }, // 在vuex 中只有 commit 方法可以改变数据;这里是不建议直接在组件中调用 cmmit 的 // 因为cmmit中只能是同步操作;但是交互往往需要同步数据库 // 更加好的方法是在 actions的方法 中触发 commit;actions 方法支持异步操作; // 所有涉及 后端API 的接口都是放在actions 中进行 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code> methods:{ add(){ <span class="hljs-keyword">this</span>.cnt += <span class="hljs-number">1</span>; <span class="hljs-comment">//bSetValue 是在vuex实例的mutations中定义的方法</span> <span class="hljs-comment">//通过 bSetValue方法 去改变实例的值</span> <span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">'bSetValue'</span>,<span class="hljs-keyword">this</span>.cnt*<span class="hljs-number">5</span>) }, minus(){ <span class="hljs-keyword">this</span>.cnt-=<span class="hljs-number">1</span>; <span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">'bSetValue'</span>,<span class="hljs-keyword">this</span>.cnt*<span class="hljs-number">5</span>) } }, <span class="hljs-comment">// 在vuex 中只有 commit 方法可以改变数据;这里是不建议直接在组件中调用 cmmit 的</span> <span class="hljs-comment">// 因为cmmit中只能是同步操作;但是交互往往需要同步数据库</span> <span class="hljs-comment">// 更加好的方法是在 actions的方法 中触发 commit;actions 方法支持异步操作;</span> <span class="hljs-comment">// 所有涉及 后端<a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a> 的接口都是放在actions 中进行 </span></code></pre> <p><strong>actions 属性</strong></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=" mutations:{ aSetValue(state,value){ state.appleTotal = value state.total = state.appleTotal + state.bananaTotal; }, bSetValue(state,value){ state.bananaTotal = value state.total = state.appleTotal + state.bananaTotal; } }, actions:{ // 定义doAfn 方法,间接触发 aSetValue; // 在doAfn 方法是可以用ajax 的 doAfn(context,price){ context.commit('aSetValue',price) }, doBfn(context,price){ context.commit('bSetValue',price) } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cs"><code> mutations:{ aSetValue(state,<span class="hljs-keyword">value</span>){ state.appleTotal = <span class="hljs-keyword">value</span> state.total = state.appleTotal + state.bananaTotal; }, bSetValue(state,<span class="hljs-keyword">value</span>){ state.bananaTotal = <span class="hljs-keyword">value</span> state.total = state.appleTotal + state.bananaTotal; } }, actions:{ <span class="hljs-comment">// 定义<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>Afn 方法,间接触发 aSetValue;</span> <span class="hljs-comment">// 在doAfn 方法是可以用ajax 的</span> doAfn(context,price){ context.commit(<span class="hljs-string">'aSetValue'</span>,price) }, doBfn(context,price){ context.commit(<span class="hljs-string">'bSetValue'</span>,price) } } </code></pre> <p>组件中的触发方式 通过 dispatch 触发<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>Afn;</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="this.$store.dispatch('doAfn',val*10)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">this</span>.$store.dispatch(<span class="hljs-string">'doAfn'</span>,<span class="hljs-keyword">val</span>*<span class="hljs-number">10</span>)</code></pre> <h2 id="articleHeader10">vuex 的 modules</h2> <p>Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:</p> <p>官方文档代码</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="const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态<br /> store.state.b // -> moduleB 的状态" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> <span class="hljs-string">moduleA = {</span> <span class="hljs-attr">state</span>: <span class="hljs-string">{ ... },</span> <span class="hljs-attr">mutations</span>: <span class="hljs-string">{ ... },</span> <span class="hljs-attr">actions</span>: <span class="hljs-string">{ ... },</span> <span class="hljs-attr">getters</span>: <span class="hljs-string">{ ... }</span> <span class="hljs-attr">}</span> <span class="hljs-attr">const</span> <span class="hljs-string">moduleB = {</span> <span class="hljs-attr">state</span>: <span class="hljs-string">{ ... },</span> <span class="hljs-attr">mutations</span>: <span class="hljs-string">{ ... },</span> <span class="hljs-attr">actions</span>: <span class="hljs-string">{ ... }</span> <span class="hljs-attr">}</span> <span class="hljs-attr">const</span> <span class="hljs-string">store = new Vuex.Store({</span> <span class="hljs-attr">modules</span>: <span class="hljs-string">{</span> <span class="hljs-attr">a</span>: <span class="hljs-string">moduleA,</span> <span class="hljs-attr">b</span>: <span class="hljs-string">moduleB</span> <span class="hljs-attr">}</span> <span class="hljs-attr">})</span> <span class="hljs-meta">store.state.a</span> <span class="hljs-string">// -&gt; moduleA 的状态</span> <span class="hljs-meta">store.state.b</span> <span class="hljs-string">// -&gt; moduleB 的状态</span></code></pre> <p>官方的文档组织建议:</p> <ul> <li>应用层级的状态应该集中到单个 store 对象中。</li> <li>提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。</li> <li>异步逻辑都应该封装到 action 里面。</li> </ul> <p>对于大型应用,我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例:</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="├── index.html ├── main.js ├── api │ └── ... # 抽取出API请求 ├── components │ ├── App.vue │ └── ... └── store ├── index.js # 我们组装模块并导出 store 的地方 ├── actions.js # 根级别的 action ├── mutations.js # 根级别的 mutation └── modules ├── cart.js # 购物车模块 └── products.js # 产品模块" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>├── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.html</span> ├── <span class="hljs-selector-tag">main</span><span class="hljs-selector-class">.js</span> ├── <span class="hljs-selector-tag">api</span> │ └── ... # 抽取出<span class="hljs-selector-tag">API</span>请求 ├── <span class="hljs-selector-tag">components</span> │ ├── <span class="hljs-selector-tag">App</span><span class="hljs-selector-class">.vue</span> │ └── ... └── <span class="hljs-selector-tag">store</span> ├── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.js</span> # 我们组装模块并导出 <span class="hljs-selector-tag">store</span> 的地方 ├── <span class="hljs-selector-tag">actions</span><span class="hljs-selector-class">.js</span> # 根级别的 <span class="hljs-selector-tag">action</span> ├── <span class="hljs-selector-tag">mutations</span><span class="hljs-selector-class">.js</span> # 根级别的 <span class="hljs-selector-tag">mutation</span> └── <span class="hljs-selector-tag">modules</span> ├── <span class="hljs-selector-tag">cart</span><span class="hljs-selector-class">.js</span> # 购物车模块 └── <span class="hljs-selector-tag">products</span><span class="hljs-selector-class">.js</span> # 产品模块</code></pre> <p><a href="https://vuex.vuejs.org/zh-cn/structure.html" rel="nofollow noreferrer" target="_blank">https://vuex.vuejs.org/zh-cn/...</a></p> <h2 id="articleHeader11">一个 vuex 小例子</h2> <p><span class="img-wrap"><img data-src="/img/bV2fPQ?w=490&amp;h=159" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <blockquote><p><strong>父组件</strong></p></blockquote> <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="<template></p> <div class=&quot;left&quot;> <h1>我是left</h1> <div class=&quot;tips&quot;>(我是{{text?text:'路由的方式'}}来的)</div> <div class=&quot;left-content&quot;> <div class=&quot;item-box&quot;> <apple></apple><br /> <banana></banana> </div> <div class=&quot;price&quot;> <h3>总价:<span>{{$store.getters.getTotal}}</span></h3> </p></div> </p></div> </p></div> <p></template><br /> <script> import apple from '@/components/vuex/apple.vue' import banana from '@/components/vuex/banana.vue' export default { data: <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> () { <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> { } }, components:{ apple, banana }, props:['text'] } </script></p> <style scoped> h1{ text-align: center; } .left-content{ margin-top: 20px; } .item-box{ width: 48%; display: inline-block; } .price{ width: 50%; display: inline-block; vertical-align: bottom; } .item{ font-size: 15px; margin-top: 20px; margin-left: 20px; }</p> </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"left"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>我是left<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tips"</span>&gt;</span>(我是{{text?text:'路由的方式'}}来的)<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"left-content"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-box"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">apple</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">banana</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"price"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>总价:<span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{$store.getters.getTotal}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h3</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">div</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">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> apple <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/vuex/apple.vue'</span> <span class="hljs-keyword">import</span> banana <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/vuex/banana.vue'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">data</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> { } }, <span class="hljs-attr">components</span>:{ apple, banana }, <span class="hljs-attr">props</span>:[<span class="hljs-string">'text'</span>] } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-selector-tag">h1</span>{ <span class="hljs-attribute">text-align</span>: center; } <span class="hljs-selector-class">.left-content</span>{ <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">20px</span>; } <span class="hljs-selector-class">.item-box</span>{ <span class="hljs-attribute">width</span>: <span class="hljs-number">48%</span>; <span class="hljs-attribute">display</span>: inline-block; } <span class="hljs-selector-class">.price</span>{ <span class="hljs-attribute">width</span>: <span class="hljs-number">50%</span>; <span class="hljs-attribute">display</span>: inline-block; <span class="hljs-attribute">vertical-align</span>: bottom; } <span class="hljs-selector-class">.item</span>{ <span class="hljs-attribute">font-size</span>: <span class="hljs-number">15px</span>; <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">20px</span>; <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">20px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <blockquote><p><strong>apple 组件</strong></p></blockquote> <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="<template></p> <div class=&quot;item&quot;> <span>苹果</span><br /> <button @click=&quot;add&quot;>add</button><br /> <button @click=&quot;minus&quot;>minus</button><br /> <input v-model.number.lazy=&quot;cnt&quot;><br /> <span v-if=&quot;noEnough&quot; class=&quot;red&quot;>库存不够</span> </div> <p></template><br /> <script> module.exports = { data: function () { return { cnt:0, noEnough:false } }, methods:{ add(){ this.cnt += 1; }, minus(){ this.cnt-=1; } }, watch:{ cnt(val){ if(val>10){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.noEnough = <a href="http://www.js-code.com/tag/true" title="true" target="_blank">true</a>; } <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>(val<0){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.cnt=0 } <a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>(val<10){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.noEnough = <a href="http://www.js-code.com/tag/false" title="false" target="_blank">false</a>; } <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$store.dispatch('<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>Afn',val*10) } } } </script></p> <style scoped> .item input{ width: 40px; display: inline-block; } .red{ color:red; font-size: 12px; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>苹果<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"add"</span>&gt;</span>add<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"minus"</span>&gt;</span>minus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">v-model.number.lazy</span>=<span class="hljs-string">"cnt"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"noEnough"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"red"</span>&gt;</span>库存不够<span class="hljs-tag">&lt;/<span class="hljs-name">span</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">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-built_in">module</span>.exports = { <span class="hljs-attr">data</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> { <span class="hljs-attr">cnt</span>:<span class="hljs-number">0</span>, <span class="hljs-attr">noEnough</span>:<span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span> } }, <span class="hljs-attr">methods</span>:{ add(){ <span class="hljs-keyword">this</span>.cnt += <span class="hljs-number">1</span>; }, minus(){ <span class="hljs-keyword">this</span>.cnt-=<span class="hljs-number">1</span>; } }, <span class="hljs-attr">watch</span>:{ cnt(val){ <span class="hljs-keyword">if</span>(val&gt;<span class="hljs-number">10</span>){ <span class="hljs-keyword">this</span>.noEnough = <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>; } <span class="hljs-keyword">if</span>(val&lt;<span class="hljs-number">0</span>){ <span class="hljs-keyword">this</span>.cnt=<span class="hljs-number">0</span> } <span class="hljs-keyword">if</span>(val&lt;<span class="hljs-number">10</span>){ <span class="hljs-keyword">this</span>.noEnough = <span class="hljs-literal">false</span>; } <span class="hljs-keyword">this</span>.$store.dispatch(<span class="hljs-string">'doAfn'</span>,val*<span class="hljs-number">10</span>) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.item</span> <span class="hljs-selector-tag">input</span>{ <span class="hljs-attribute">width</span>: <span class="hljs-number">40px</span>; <span class="hljs-attribute">display</span>: inline-block; } <span class="hljs-selector-class">.red</span>{ <span class="hljs-attribute">color</span>:red; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <blockquote><p><strong>banana 组件</strong></p></blockquote> <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="<template></p> <div class=&quot;item&quot;> <span>香蕉</span><br /> <button @click=&quot;add&quot;>add</button><br /> <button @click=&quot;minus&quot;>minus</button><br /> <input v-model.number.lazy=&quot;cnt&quot;><br /> <span v-if=&quot;noEnough&quot; class=&quot;red&quot;>库存不够</span> </div> <p></template><br /> <script> module.exports = { data: function () { return { cnt:0, noEnough:false } }, methods:{ add(){ this.cnt += 1; }, minus(){ this.cnt-=1; } }, watch:{ cnt(val){ if(val>10){ this.noEnough = <a href="http://www.js-code.com/tag/true" title="true" target="_blank">true</a>; } if(val<10){ this.noEnough = <a href="http://www.js-code.com/tag/false" title="false" target="_blank">false</a>; } if(val<0){ this.cnt=0 } this.$store.dispatch('doBfn',val*5) } } } </script></p> <style scoped> .item input{ width: 40px; display: inline-block; } .red{ color:red; font-size: 12px; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>香蕉<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"add"</span>&gt;</span>add<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"minus"</span>&gt;</span>minus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">v-model.number.lazy</span>=<span class="hljs-string">"cnt"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"noEnough"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"red"</span>&gt;</span>库存不够<span class="hljs-tag">&lt;/<span class="hljs-name">span</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">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-built_in">module</span>.exports = { <span class="hljs-attr">data</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> { <span class="hljs-attr">cnt</span>:<span class="hljs-number">0</span>, <span class="hljs-attr">noEnough</span>:<span class="hljs-literal">false</span> } }, <span class="hljs-attr">methods</span>:{ add(){ <span class="hljs-keyword">this</span>.cnt += <span class="hljs-number">1</span>; }, minus(){ <span class="hljs-keyword">this</span>.cnt-=<span class="hljs-number">1</span>; } }, <span class="hljs-attr">watch</span>:{ cnt(val){ <span class="hljs-keyword">if</span>(val&gt;<span class="hljs-number">10</span>){ <span class="hljs-keyword">this</span>.noEnough = <span class="hljs-literal">true</span>; } <span class="hljs-keyword">if</span>(val&lt;<span class="hljs-number">10</span>){ <span class="hljs-keyword">this</span>.noEnough = <span class="hljs-literal">false</span>; } <span class="hljs-keyword">if</span>(val&lt;<span class="hljs-number">0</span>){ <span class="hljs-keyword">this</span>.cnt=<span class="hljs-number">0</span> } <span class="hljs-keyword">this</span>.$store.dispatch(<span class="hljs-string">'doBfn'</span>,val*<span class="hljs-number">5</span>) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.item</span> <span class="hljs-selector-tag">input</span>{ <span class="hljs-attribute">width</span>: <span class="hljs-number">40px</span>; <span class="hljs-attribute">display</span>: inline-block; } <span class="hljs-selector-class">.red</span>{ <span class="hljs-attribute">color</span>:red; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <blockquote><p><strong>main.js</strong></p></blockquote> <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="// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import Vuex from 'vuex' import App from './App' import router from './router' Vue.config.productionTip = false Vue.use(Vuex); <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> store = new Vuex.Store({<br /> state:{<br /> total:0,<br /> appleTotal:0,<br /> bananaTotal:0,<br /> },<br /> getters:{<br /> getTotal(state){<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> state.total<br /> }<br /> },<br /> mutations:{<br /> aSetValue(state,value){<br /> state.appleTotal = value<br /> state.total = state.appleTotal + state.bananaTotal;<br /> },<br /> bSetValue(state,value){<br /> state.bananaTotal = value<br /> state.total = state.appleTotal + state.bananaTotal;<br /> }<br /> },<br /> actions:{<br /> doAfn(context,price){<br /> context.commit('aSetValue',price)<br /> },<br /> doBfn(context,price){<br /> context.commit('bSetValue',price)<br /> }<br /> }<br /> })</p> <p>/* esl<a href="http://www.js-code.com/tag/int" title="int" target="_blank">int</a>-disable no-new */<br /> new Vue({<br /> el: '#app',<br /> store,<br /> router,<br /> components: { App },<br /> template: '<App></span>'<br /> })<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">// The Vue build version to load with the `import` command</span> <span class="hljs-comment">// (runtime-only or standalone) has been set in webpack.base.conf with an alias.</span> <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> Vuex <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span> Vue.config.productionTip = <span class="hljs-literal">false</span> Vue.use(Vuex); <span class="hljs-keyword">let</span> store = <span class="hljs-keyword">new</span> Vuex.Store({ state:{ total:<span class="hljs-number">0</span>, appleTotal:<span class="hljs-number">0</span>, bananaTotal:<span class="hljs-number">0</span>, }, getters:{ getTotal(state){ <span class="hljs-keyword">return</span> state.total } }, mutations:{ aSetValue(state,value){ state.appleTotal = value state.total = state.appleTotal + state.bananaTotal; }, bSetValue(state,value){ state.bananaTotal = value state.total = state.appleTotal + state.bananaTotal; } }, actions:{ doAfn(context,price){ context.commit(<span class="hljs-string">'aSetValue'</span>,price) }, doBfn(context,price){ context.commit(<span class="hljs-string">'bSetValue'</span>,price) } } }) <span class="hljs-comment">/* esl<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a>-disable no-new */</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, store, router, components: { App }, template: <span class="hljs-string">'&lt;App/&gt;'</span> }) </code></pre> <p></code></p>

总结

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

vue 项目开发要点总结

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

vue 项目开发要点总结

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

80%的人都看过