Vue基础认识

<p><strong><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>基础认识</strong></p> <h3 id="articleHeader0">搭建环境</h3> <ul> <li> <p>全局安装</p> </li> </ul> <blockquote> <p>这里我推荐大家使用淘宝镜像装,也就是cnpm;</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="cnpm install -g vue-cli" 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> -g vue-cli</code></pre> <ul> <li> <p>使用“webpack”样板创建一个项目</p> </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="vue init webpack my-first-vue-project" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs perl"><code style="word-break: break-word; white-space: initial;">vue init webpack <span class="hljs-keyword">my</span>-first-vue-project</code></pre> <ul> <li> <p>进入项目目录</p> </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="cd my-first-vue-project" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs perl"><code style="word-break: break-word; white-space: initial;">cd <span class="hljs-keyword">my</span>-first-vue-project</code></pre> <ul> <li> <p>运行</p> </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="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> <h3 id="articleHeader1">编写程序</h3> <blockquote> <p>在src目录下创建components文件夹,然后在components里面创建componentA.vue</p> </blockquote> <ul> <li> <p>componentA.vue</p> </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="<template></p> <div class=&quot;hello&quot;> <h1>{{ msg }}</h1> <h1>{{ msgfromfather }}</h1> <p> <button v-on:click=&quot;onClickMe&quot;>open mouse!</button> </div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'hello', data: function () { return { msg: 'hellow from cpmponent a ' } }, props: ['msgfromfather'], events: { 'onAddnew': function (items) { console.log(items); } }, methods: { onClickMe: function () { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$emit('child-tell-me-something',<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.msg); } } } </script></p> <p><!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --></p> <style scoped> h1, h2 { font-weight: normal; } </style> <p>&#8221; title=&#8221;&#8221; data-original-title=&#8221;复制&#8221;></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">"hello"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{ msg }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{ msgfromfather }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">v-on:click</span>=<span class="hljs-string">"onClickMe"</span>&gt;</span>open mouse!<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-attr">name</span>: <span class="hljs-string">'hello'</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">msg</span>: <span class="hljs-string">'hellow from cpmponent a '</span> } }, <span class="hljs-attr">props</span>: [<span class="hljs-string">'msgfromfather'</span>], <span class="hljs-attr">events</span>: { <span class="hljs-string">'onAddnew'</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) </span>{ <span class="hljs-built_in">console</span>.log(items); } }, <span class="hljs-attr">methods</span>: { <span class="hljs-attr">onClickMe</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'child-tell-me-something'</span>,<span class="hljs-keyword">this</span>.msg); } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- Add "scoped" attribute to limit CSS to this component only --&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-selector-tag">h2</span> { <span class="hljs-attribute">font-weight</span>: normal; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <ul> <li> <p>Hello.vue</p> </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="<template></p> <div class=&quot;hello&quot;> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li><a href=&quot;https://vuejs.org&quot; target=&quot;_blank&quot;>Core Docs</a></li> <li><a href=&quot;https://forum.vuejs.org&quot; target=&quot;_blank&quot;>Forum</a></li> <li><a href=&quot;https://gitter.im/vuejs/vue&quot; target=&quot;_blank&quot;>Gitter Chat</a></li> <li><a href=&quot;https://twitter.com/vuejs&quot; target=&quot;_blank&quot;>Twitter</a></li> <p></p> <li><a href=&quot;http://vuejs-templates.github.io/webpack/&quot; target=&quot;_blank&quot;>Docs for This Template</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a href=&quot;http://router.vuejs.org/&quot; target=&quot;_blank&quot;>vue-router</a></li> <li><a href=&quot;http://vuex.vuejs.org/&quot; target=&quot;_blank&quot;>vuex</a></li> <li><a href=&quot;http://vue-loader.vuejs.org/&quot; target=&quot;_blank&quot;>vue-loader</a></li> <li><a href=&quot;https://github.com/vuejs/awesome-vue&quot; target=&quot;_blank&quot;>awesome-vue</a></li> </ul></div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'hello', data () { return { msg: 'Welcome to Your <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js App' } } } </script></p> <p><!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --></p> <style scoped> h1, h2 { font-weight: normal; }</p> <p>ul { list-style-type: none; padding: 0; }</p> <p>li { display: inline-block; margin: 0 10px; }</p> <p>a { color: #42b983; } </style> <p>&#8221; title=&#8221;&#8221; data-original-title=&#8221;复制&#8221;></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">"hello"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{ msg }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Essential Links<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</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">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://vuejs.org"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>Core Docs<span class="hljs-tag">&lt;/<span class="hljs-name">a</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>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://forum.vuejs.org"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>Forum<span class="hljs-tag">&lt;/<span class="hljs-name">a</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>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://gitter.im/vuejs/vue"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>Gitter Chat<span class="hljs-tag">&lt;/<span class="hljs-name">a</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>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://twitter.com/vuejs"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>Twitter<span class="hljs-tag">&lt;/<span class="hljs-name">a</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">br</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">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://vuejs-templates.github.io/webpack/"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>Docs for This Template<span class="hljs-tag">&lt;/<span class="hljs-name">a</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> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Ecosystem<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</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">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://router.vuejs.org/"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>vue-router<span class="hljs-tag">&lt;/<span class="hljs-name">a</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>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://vuex.vuejs.org/"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>vuex<span class="hljs-tag">&lt;/<span class="hljs-name">a</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>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://vue-loader.vuejs.org/"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>vue-loader<span class="hljs-tag">&lt;/<span class="hljs-name">a</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>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://github.com/vuejs/awesome-vue"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>awesome-vue<span class="hljs-tag">&lt;/<span class="hljs-name">a</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> <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">name</span>: <span class="hljs-string">'hello'</span>, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">'Welcome to Your Vue.js App'</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- Add "scoped" attribute to limit CSS to this component only --&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-selector-tag">h2</span> { <span class="hljs-attribute">font-weight</span>: normal; } <span class="hljs-selector-tag">ul</span> { <span class="hljs-attribute">list-style-type</span>: none; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>; } <span class="hljs-selector-tag">li</span> { <span class="hljs-attribute">display</span>: inline-block; <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">10px</span>; } <span class="hljs-selector-tag">a</span> { <span class="hljs-attribute">color</span>: <span class="hljs-number">#42b983</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <blockquote> <p>在src目录下创建store.js文件;</p> </blockquote> <ul> <li> <p>store.js</p> </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="const STORAGE_KEY = 'todos-vuejs' export default{ fetch: function () { return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save: function (items) { window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)) } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">const</span> STORAGE_KEY = <span class="hljs-string">'todos-vuejs'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span>{ <span class="hljs-attr">fetch</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-built_in">JSON</span>.parse(<span class="hljs-built_in">window</span>.localStorage.getItem(STORAGE_KEY) || <span class="hljs-string">'[]'</span>) }, <span class="hljs-attr">save</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) </span>{ <span class="hljs-built_in">window</span>.localStorage.setItem(STORAGE_KEY,<span class="hljs-built_in">JSON</span>.stringify(items)) } }</code></pre> <blockquote> <p>修改App.vue;</p> </blockquote> <ul> <li> <p>App.vue</p> </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="<template></p> <div id=&quot;app&quot;> <h1 v-text=&quot;title&quot;></h1> <p> <input v-model=&quot;newItem&quot; v-on:keyup.enter=&quot;addNew&quot;/></p> <ul> <li v-for=&quot;item in items&quot; v-bind:class=&quot;{finished: item.isFinished}&quot; v-on:click=&quot;toggleFinish(item)&quot;> {{item.label}} </li> </ul> <p>child tells me: {{ childWorlds }}</p> <p> <component-a msgfromfather='you die!' v-on:child-tell-me-something='listenToMyBoy'></component-a> </div> <p></template></p> <p><script> import Store from './store'; import ComponentA from './components/ComponentA';</p> <p>export default { name: 'hello', data: function () { return { title: 'this is a todo list', items: Store.fetch(), newItem: '', childWorlds: '' } }, components: {ComponentA}, watch: { items: { handler: function (items) { Store.save(items) }, deep: true } }, events: { 'child-tell-me-something': function (msg) { this.childWorlds = msg; } }, methods: { toggleFinish: function(item){ item.isFinished = !item.isFinished }, addNew: function (){ this.items.push({ label: this.newItem, isFinished: false }) this.newItem='' this.$broadcast('onAddnew', this.items) }, listenToMyBoy: function (msg) { this.childWorlds = msg; } } } </script></p> <style> .finished{ text-decoration:underline; } #app { margin-left:50px; } </style> <p>&#8221; title=&#8221;&#8221; data-original-title=&#8221;复制&#8221;></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">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">v-text</span>=<span class="hljs-string">"title"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"newItem"</span> <span class="hljs-attr">v-on:keyup.enter</span>=<span class="hljs-string">"addNew"</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span> <span class="hljs-attr">v-bind:class</span>=<span class="hljs-string">"{finished: item.isFinished}"</span> <span class="hljs-attr">v-on:click</span>=<span class="hljs-string">"toggleFinish(item)"</span>&gt;</span> {{item.label}} <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> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>child tells me: {{ childWorlds }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">component-a</span> <span class="hljs-attr">msgfromfather</span>=<span class="hljs-string">'you die!'</span> <span class="hljs-attr">v-on:child-tell-me-something</span>=<span class="hljs-string">'listenToMyBoy'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">component-a</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> Store <span class="hljs-keyword">from</span> <span class="hljs-string">'./store'</span>; <span class="hljs-keyword">import</span> ComponentA <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/ComponentA'</span>; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'hello'</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">title</span>: <span class="hljs-string">'this is a todo list'</span>, <span class="hljs-attr">items</span>: Store.fetch(), <span class="hljs-attr">newItem</span>: <span class="hljs-string">''</span>, <span class="hljs-attr">childWorlds</span>: <span class="hljs-string">''</span> } }, <span class="hljs-attr">components</span>: {ComponentA}, <span class="hljs-attr">watch</span>: { <span class="hljs-attr">items</span>: { <span class="hljs-attr">handler</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) </span>{ Store.save(items) }, <span class="hljs-attr">deep</span>: <span class="hljs-literal">true</span> } }, <span class="hljs-attr">events</span>: { <span class="hljs-string">'child-tell-me-something'</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">msg</span>) </span>{ <span class="hljs-keyword">this</span>.childWorlds = msg; } }, <span class="hljs-attr">methods</span>: { <span class="hljs-attr">toggleFinish</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">item</span>)</span>{ item.isFinished = !item.isFinished }, <span class="hljs-attr">addNew</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">this</span>.items.push({ <span class="hljs-attr">label</span>: <span class="hljs-keyword">this</span>.newItem, <span class="hljs-attr">isFinished</span>: <span class="hljs-literal">false</span> }) <span class="hljs-keyword">this</span>.newItem=<span class="hljs-string">''</span> <span class="hljs-keyword">this</span>.$broadcast(<span class="hljs-string">'onAddnew'</span>, <span class="hljs-keyword">this</span>.items) }, <span class="hljs-attr">listenToMyBoy</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">msg</span>) </span>{ <span class="hljs-keyword">this</span>.childWorlds = msg; } } } </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>&gt;</span><span class="css"> <span class="hljs-selector-class">.finished</span>{ <span class="hljs-attribute">text-decoration</span>:underline; } <span class="hljs-selector-id">#app</span> { <span class="hljs-attribute">margin-left</span>:<span class="hljs-number">50px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <ul> <li> <p>main.js</p> </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="// 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 App from './App' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App></span>&#8216;,<br /> components: { App }<br /> })<br /> &#8221; title=&#8221;&#8221; data-original-title=&#8221;复制&#8221;></span> </div> </p></div> <pre class="hljs sql"><code>// The Vue build version to <span class="hljs-keyword">load</span> <span class="hljs-keyword">with</span> the <span class="hljs-string">`import`</span> command // (runtime-<span class="hljs-keyword">only</span> <span class="hljs-keyword">or</span> <span class="hljs-keyword">standalone</span>) has been <span class="hljs-keyword">set</span> <span class="hljs-keyword">in</span> webpack.base.conf <span class="hljs-keyword">with</span> an alias. <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> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-comment">/* eslint-disable no-new */</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, <span class="hljs-keyword">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span>, components: { App } }) </code></pre> <hr> <h3 id="articleHeader2">知识点总结</h3> <ul> <li> <p>new一个vue对象的时候你可以设置它的属性,其中最重要的包括三个,分别是data,methods,watch。</p> </li> <li> <p>其中data代表vue对象的数据,methods代表vue对象的方法,watch设置了对象监听的方法。</p> </li> <li> <p>Vue对象里的设置通过html指令进行关联。</p> </li> <li> <p>对象的指令包括</p> </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=" - v-text 渲染数据 - v-if 控制显示 - v-on 绑定事件 - v-for 循环渲染 等" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs markdown"><code> - v-text 渲染数据 <span class="hljs-bullet">- </span>v-if 控制显示 <span class="hljs-bullet">- </span>v-on 绑定事件 <span class="hljs-bullet">- </span>v-for 循环渲染 等</code></pre> <blockquote> <p>如何划分组件</p> </blockquote> <ul> <li> <p>功能模块 &#8211; select,pagenation&#8230;.</p> </li> <li> <p>页面区域 &#8211; header,footer,sidebar&#8230;.</p> </li> </ul> <hr> <blockquote> <p>接下来就看看我们的效果吧:</p> </blockquote> <p><span class="img-wrap"><img data-src="/img/bVSwWz?w=826&amp;h=425" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p>
脚本宝典为你提供优质服务
脚本宝典 » Vue基础认识

发表评论

提供最优质的资源集合

立即查看 了解详情