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

基于vue+webpack的todo应用

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>项目目录如图所示</p> <p>1.搭建项目框架<br />创建一个项目目录 learnvue<br />初始化 npm init<br />下载相关依赖 npm i webpack vue vue-loader vue-template-compiler css-loader html-webpack-plugin</p> <hr> <h2 id="articleHeader0">构建项目框架的思路</h2> <p>创建index.js文件,将index.js文件打包生成新的js,再通过html-webpack-plugin编译成html页面。<br />而index.js文件引入负责各个业务逻辑的组件和公关组件。<br />主要代码如下,打包文件 webpack.config.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="const config = { target:'web', //输入文件 entry:path.(__dirname,'src/index.js'), //输出 output:{ filename:'bundle.js', path:path.join(__dirname,'dist') }, plugins:[ //编译成html new htmlPlugin() ] } module.exports = config" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs java"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> config = { target:<span class="hljs-string">'web'</span>, <span class="hljs-comment">//输入文件</span> entry:path.(__dirname,<span class="hljs-string">'src/index.js'</span>), <span class="hljs-comment">//输出</span> output:{ filename:<span class="hljs-string">'bundle.js'</span>, path:path.join(__dirname,<span class="hljs-string">'dist'</span>) }, plugins:[ <span class="hljs-comment">//编译成html</span> <span class="hljs-keyword">new</span> htmlPlugin() ] } <span class="hljs-keyword">module</span>.<span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s</span> = config</code></pre> <p>主入口文件 index.js 负责生成vue实例,引入各个vue组件,渲染,控制路由等。<br />主要代码</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="import Vue from 'vue' import App from './app.vue' import router from './router.js' import VueRouter from 'vue-router' import './assets/styles/common.css' const root = document.createElement('div') document.body.appendChild(root) new Vue({ router:router, render:(h)=> h(App)<br /> }).$mount(root)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./app.vue'</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router.js'</span> <span class="hljs-keyword">import</span> VueRouter <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> <span class="hljs-keyword">import</span> <span class="hljs-string">'./assets/styles/common.css'</span> <span class="hljs-keyword">const</span> root = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>'</span>) <span class="hljs-built_in">document</span>.body.appendChild(root) <span class="hljs-keyword">new</span> Vue({ router:router, render:<span class="hljs-function">(<span class="hljs-params">h</span>)=&gt;</span> h(App) }).$mount(root)</code></pre> <p>处理业务逻辑的思路<br />todo的主要功能有添加、勾选、删除事项,根据待办/已完成的状态查看待办事项</p> <p>2.创建index.vue<br />开发完成后如图所示<br /><span class="img-wrap"><img data-src="/img/bVbhQv4?w=636&amp;h=424" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>将页面分为图上三个部分,所以分成三个子组件开发</p> <p>将这几个操作分为input、items、tab三个部分</p> <p><span class="img-wrap"><img data-src="/img/bVbhQXm?w=382&amp;h=142" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><strong>todo/items.vue</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="<template></p> <div class=&quot;item&quot;> <input type=&quot;checkbox&quot; class=&quot;toggle&quot; v-model=&quot;todo.completed&quot; ><br /> <label :class=&quot;['',todo.completed===true?'completed':'']&quot;>{{todo.content}}</label><br /> <button class=&quot;delete&quot; @click=&quot;deleteItem&quot;></button> </div> <p></template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { // props定义 在父组件获得 回传给子组件的属性 props:{ todo:{ type:Object, require:true } }, methods: { de<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a>eItem(){ // $emit('在父组件触发的事件名',子组件传递给父组件的参数) <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$emit('del',<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.todo.id) } } } </script>" 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">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toggle"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"todo.comp<a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a>ed"</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"['',todo.completed===true?'completed':'']"</span>&gt;</span>{{todo.content}}<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"delete"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"deleteItem"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</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">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-comment">// props定义 在父组件获得 回传给子组件的属性</span> props:{ <span class="hljs-attr">todo</span>:{ <span class="hljs-attr">type</span>:<span class="hljs-built_in">Object</span>, <span class="hljs-attr">require</span>:<span class="hljs-literal">true</span> } }, <span class="hljs-attr">methods</span>: { deleteItem(){ <span class="hljs-comment">// $emit('在父组件触发的事件名',子组件传递给父组件的参数)</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$emit(<span class="hljs-string">'del'</span>,<span class="hljs-keyword">this</span>.todo.id) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>todo/tab.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="<template></p> <div id=&quot;tab&quot;> <span class=&quot;left&quot;>{{unFinishedTodoLength}} items left</span><br /> <span class=&quot;center&quot;><br /> <span v-for=&quot;state in states&quot; :key=&quot;state&quot; :class=&quot;[state,filter===state?'isActive':'']&quot; @click=&quot;toggleFilter(state)&quot;><br /> {{state}}<br /> </span><br /> </span><br /> <span class=&quot;right&quot; @click=&quot;clearItems&quot;><br /> clear<br /> </span> </div> <p></template><br /> <script> export default { props: { filter:{ type:String, require:true }, todos:{ type:Array, require:true } }, data(){ return { states:['all','active','complete'] } }, computed:{ //动态修改当前事项数量 unFinishedTodoLength(){ return this.todos.filter(todo=> !todo.computed).length } }, methods: { //切换筛选条件 active、comp<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a>e、all toggleFilter(state){ this.$emit('toggle',state) }, //清除全部 clearItems(){ this.$emit('clearAll'); } } } </script>" 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">id</span>=<span class="hljs-string">"tab"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"left"</span>&gt;</span>{{unFinishedTodoLength}} items left<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"center"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"state in states"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"state"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"[state,filter===state?'isActive':'']"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toggleFilter(state)"</span>&gt;</span> {{state}} <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">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"right"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"clearItems"</span>&gt;</span> clear <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-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">props</span>: { <span class="hljs-attr">filter</span>:{ <span class="hljs-attr">type</span>:<span class="hljs-built_in">String</span>, <span class="hljs-attr">require</span>:<span class="hljs-literal">true</span> }, <span class="hljs-attr">todos</span>:{ <span class="hljs-attr">type</span>:<span class="hljs-built_in"><a href="http://www.js-code.com/tag/array" title="浏览关于“Array”的文章" target="_blank" class="tag_link">Array</a></span>, <span class="hljs-attr">require</span>:<span class="hljs-literal">true</span> } }, data(){ <span class="hljs-keyword">return</span> { <span class="hljs-attr">states</span>:[<span class="hljs-string">'all'</span>,<span class="hljs-string">'active'</span>,<span class="hljs-string">'complete'</span>] } }, <span class="hljs-attr">computed</span>:{ <span class="hljs-comment">//动态修改当前事项数量</span> unFinishedTodoLength(){ <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.todos.filter(<span class="hljs-function"><span class="hljs-params">todo</span>=&gt;</span> !todo.computed).length } }, <span class="hljs-attr">methods</span>: { <span class="hljs-comment">//切换筛选条件 active、complete、all</span> toggleFilter(state){ <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'toggle'</span>,state) }, <span class="hljs-comment">//清除全部</span> clearItems(){ <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'clearAll'</span>); } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>将items.vue,tab.vue引入到todo.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="<template></p> <div class=&quot;todo&quot;> <input autofocus=&quot;autofocus&quot; type=&quot;text&quot; name=&quot;&quot; value=&quot;&quot; placeholder=&quot;接下来要做什么&quot; @keyup.enter = &quot;addTodo&quot; /><br /> <!-- @在子组件定义事件名=&quot;在父组件定义的方法名&quot; --><br /> <item v-for=&quot;todo in filteredTodos&quot; :todo=&quot;todo&quot; :key=&quot;todo.id&quot; @del=&quot;deleteTodo&quot; ></item><br /> <tabs :filter=&quot;filter&quot; :todos=&quot;todos&quot; @toggle=&quot;toggleFilter&quot; @clearAll=&quot;clearAllComplete&quot; ></tabs> </div> <p></template><br /> <script> import item from './items.vue' import tabs from './tabs.vue' let id = 0; export default { name: &quot;&quot;, data: function data() { return { todos:[], filter:'all' } }, components: { item, tabs }, computed:{ filteredTodos(){ if(this.filter==='all'){ return this.todos } const completed = this.filter === 'complete'; return this.todos.filter(todo => completed === todo.completed) } }, methods: { addTodo(e){ this.todos.unshift({ id:id++, content:e.target.value.trim(), completed:false }); e.target.value = ''; }, deleteTodo(id){ this.todos.splice(this.todos.findIndex(todo=> todo.id ===id),1) }, toggleFilter(state){ this.filter = state }, clearAllComplete(){ this.todos = this.todos.filter(todo=> !todo.completed); } } } </script>" 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">"todo"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">autofocus</span>=<span class="hljs-string">"autofocus"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">""</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"接下来要做什么"</span> @<span class="hljs-attr">keyup.enter</span> = <span class="hljs-string">"addTodo"</span> /&gt;</span> <span class="hljs-comment">&lt;!-- @在子组件定义事件名="在父组件定义的方法名" --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">item</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"todo in filteredTodos"</span> <span class="hljs-attr">:todo</span>=<span class="hljs-string">"todo"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"todo.id"</span> @<span class="hljs-attr">del</span>=<span class="hljs-string">"deleteTodo"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">tabs</span> <span class="hljs-attr">:filter</span>=<span class="hljs-string">"filter"</span> <span class="hljs-attr">:todos</span>=<span class="hljs-string">"todos"</span> @<span class="hljs-attr">toggle</span>=<span class="hljs-string">"toggleFilter"</span> @<span class="hljs-attr">clearAll</span>=<span class="hljs-string">"clearAllComplete"</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> item <span class="hljs-keyword">from</span> <span class="hljs-string">'./items.vue'</span> <span class="hljs-keyword">import</span> tabs <span class="hljs-keyword">from</span> <span class="hljs-string">'./tabs.vue'</span> <span class="hljs-keyword">let</span> id = <span class="hljs-number">0</span>; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">""</span>, <span class="hljs-attr">data</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">data</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> { <span class="hljs-attr">todos</span>:[], <span class="hljs-attr">filter</span>:<span class="hljs-string">'all'</span> } }, <span class="hljs-attr">components</span>: { item, tabs }, <span class="hljs-attr">computed</span>:{ filteredTodos(){ <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.filter===<span class="hljs-string">'all'</span>){ <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.todos } <span class="hljs-keyword">const</span> completed = <span class="hljs-keyword">this</span>.filter === <span class="hljs-string">'complete'</span>; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.todos.filter(<span class="hljs-function"><span class="hljs-params">todo</span> =&gt;</span> completed === todo.completed) } }, <span class="hljs-attr">methods</span>: { addTodo(e){ <span class="hljs-keyword">this</span>.todos.unshift({ <span class="hljs-attr">id</span>:id++, <span class="hljs-attr">content</span>:e.target.value.trim(), <span class="hljs-attr">completed</span>:<span class="hljs-literal">false</span> }); e.target.value = <span class="hljs-string">''</span>; }, deleteTodo(id){ <span class="hljs-keyword">this</span>.todos.splice(<span class="hljs-keyword">this</span>.todos.findIndex(<span class="hljs-function"><span class="hljs-params">todo</span>=&gt;</span> todo.id ===id),<span class="hljs-number">1</span>) }, toggleFilter(state){ <span class="hljs-keyword">this</span>.filter = state }, clearAllComplete(){ <span class="hljs-keyword">this</span>.todos = <span class="hljs-keyword">this</span>.todos.filter(<span class="hljs-function"><span class="hljs-params">todo</span>=&gt;</span> !todo.completed); } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>详细代码 <a href="https://github.com/lazyChan297/vue-demo" rel="nofollow noreferrer" target="_blank">https://github.com/lazyChan29...</a></p> <p></code></p>

总结

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

基于vue+webpack的todo应用

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

基于vue+webpack的todo应用

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

80%的人都看过