<p><code></p> <h2 id="articleHeader0">基本信息</h2> <blockquote><p>vue是mvvm框架 (model view viewmodel) <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。</p></blockquote> <p>model 视图/模板 <br />view 模型/数据 <br />viewmodel 视图模型 <br />model与view通过viewModel之间相互检测</p> <h3 id="articleHeader1">起步</h3> <blockquote><p>你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>:</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="<script src=&quot;https://unpkg.com/vue&quot;</script> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue"</span>&lt;/<span class="hljs-attr">script</span>&gt;</span><span class="undefined"> </span></code></pre> <blockquote><p>你也可以下载开发版本或生产版本,然后通过如下方式引入 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>:</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="<script src=&quot;js/vue.js&quot;></script>//开发版本<br /> <script src=&quot;js/vue.min.js&quot;></script>//生产版本 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>//开发版本 <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/vue.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>//生产版本 </code></pre> <h3 id="articleHeader2">声明式渲染</h3> <blockquote><p>Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>:</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=" <div id=&quot;app&quot;>{{msg}} </div> <p><script> var app = new Vue({ el: '#app', data: { msg: 'Hello Vue!' } })</p> <p></script>//输出Hello Vue!" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> id=<span class="hljs-string">"app"</span>&gt;{{msg}} &lt;<span class="hljs-regexp">/div&gt; &lt;script&gt; var app = new Vue({ el: '#app', data: { msg: 'Hello Vue!' } }) &lt;/</span>script&gt;<span class="hljs-comment">//输出Hello Vue!</span></code></pre> <h2 id="articleHeader3">学习vue更多的是学习指令和组件</h2> <blockquote><p>指令(directives)是带有 v- 前缀的特殊属性。</p></blockquote> <h3 id="articleHeader4">v-model 在input中</h3> <blockquote><p>能轻松实现表单输入和应用状态之间的<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a></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="![ <div id=&quot;app&quot;> <p>{{ msg }}</p> <p> <input v-model=&quot;msg&quot;> </div> <p><script> var app = new Vue({ el: '#app', data: { msg: 'Hello Vue!' } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">![<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">p</span>&gt;</span>{{ msg }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">"msg"</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">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data: { msg: <span class="hljs-string">'Hello Vue!'</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></code></pre> <h3 id="articleHeader5">v-if 条件</h3> <blockquote><p>控制切换一个元素的显示也相当简单:</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=" <div id=&quot;app&quot;> <p v-if=&quot;seen&quot;>现在你看到我了</p> </div> <p>var app= new Vue({<br /> el: '#app',<br /> data: {<br /> seen: true<br /> }<br /> }) //输出:现在你看到我了" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;div id=<span class="hljs-string">"app"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"seen"</span>&gt;</span>现在你看到我了<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span> &lt;<span class="hljs-regexp">/div&gt; var app= new Vue({ el: '#app', data: { seen: true } }) /</span><span class="hljs-regexp">/输出:现在你看到我了</span></code></pre> <h3 id="articleHeader6">v-for 循环</h3> <blockquote><p>可以绑定<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>的数据来渲染一个项目列表:</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=" <div id=&quot;app&quot;> <ol> <li v-for=&quot;todo in todos&quot;> {{ todo.text }} </li> </ol> </div> <p>var app = new Vue({<br /> el: '#app',<br /> data: {<br /> todos: [<br /> { text: '学习 JavaScript' },<br /> { text: '学习 Vue' },<br /> { text: '整个牛项目' }<br /> ]<br /> }<br /> }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;div id=<span class="hljs-string">"app"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ol</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">"todo in todos"</span>&gt;</span> {{ todo.text }} <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span></span> &lt;<span class="hljs-regexp">/div&gt; var app = new Vue({ el: '#app', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) </span></code></pre> <h3 id="articleHeader7">v-on 处理用户输入</h3> <blockquote><p>为了让用户和你的应用进行互动,我们可以用 v-on 指令绑定一个事件监听器,通过它调用我们 Vue 实例中定义的方法:</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=" <div id=&quot;app&quot;> <p>{{ message }}</p> <p> <button v-on:click=&quot;reverseMessage&quot;>逆转消息</button> </div> <p>var app = new Vue({<br /> el: '#app',<br /> data: {<br /> message: 'Hello Vue.js!'<br /> },<br /> methods: {<br /> reverseMessage: function () {<br /> this.message = this.message.split('').reverse().join('')<br /> }<br /> }<br /> }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;div id=<span class="hljs-string">"app"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ message }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span> &lt;button v-on:click=<span class="hljs-string">"reverseMessage"</span>&gt;逆转消息&lt;<span class="hljs-regexp">/button&gt; &lt;/</span>div&gt; <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>, <span class="hljs-attr">data</span>: { <span class="hljs-attr">message</span>: <span class="hljs-string">'Hello Vue.js!'</span> }, <span class="hljs-attr">methods</span>: { <span class="hljs-attr">reverseMessage</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.message = <span class="hljs-keyword">this</span>.message.split(<span class="hljs-string">''</span>).reverse().join(<span class="hljs-string">''</span>) } } }) </code></pre> <h3 id="articleHeader8">组件化应用构建</h3> <blockquote><p>组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。 <br />在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例,在 Vue 中注册组件很简单:</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="// 定义名为 todo-item 的新组件 Vue.component('todo-item', { template: ' <li>这是个待办项</li> <p>'<br /> }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// 定义名为 todo-item 的新组件</span> Vue.component(<span class="hljs-string">'todo-item'</span>, { <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;li&gt;这是个待办项&lt;/li&gt;'</span> }) </code></pre> <blockquote><p>现在你可以用它构建另一个组件模板:</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=" <ol> <!-- 创建一个 todo-item 组件的实例 --><br /> <todo-item></todo-item> </ol> <p> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;ol&gt; <span class="xml"><span class="hljs-comment">&lt;!-- 创建一个 todo-item 组件的实例 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">todo-item</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">todo-item</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span> </span></code></pre> <blockquote><p>但是这样会为每个待办项渲染同样的文本,这看起来并不炫酷,我们应该能将数据从父作用域传到子组件。让我们来修改一下组件的定义,使之能够接受一个属性:</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="Vue.component('todo-item', { // todo-item 组件现在接受一个 // &quot;prop&quot;,类似于一个自定义属性 // 这个属性名为 todo。 props: ['todo'], template: ' <li>{{ todo.text }}</li> <p>'<br /> }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">Vue.component(<span class="hljs-string">'todo-item'</span>, { <span class="hljs-comment">// todo-item 组件现在接受一个</span> <span class="hljs-comment">// "prop",类似于一个自定义属性</span> <span class="hljs-comment">// 这个属性名为 todo。</span> props: [<span class="hljs-string">'todo'</span>], <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;li&gt;{{ todo.text }}&lt;/li&gt;'</span> }) </code></pre> <blockquote><p>现在,我们可以使用 v-bind 指令将 todo 传到每一个重复的组件中:</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=" <div id=&quot;app&quot;> <tou name=&quot;shitu&quot;></tou><br /> <zhong></zhong></p> <ol> <todo-item txt=&quot;item.shixiang&quot; v-for=&quot;(item,index) in todos&quot; key=&quot;index&quot;></todo-item> </ol> </div> <p><script> Vue.component('tou',{ props:[&quot;name&quot;], template:'</p> <div>这是头部<a>{{name}}</a></div> <p>' }) Vue.component('zhong',{ template:'</p> <div>这是zhong部<a>logo</a></div> <p>' }) Vue.component('todo-item',{ props:[&quot;txt&quot;], template:'</p> <li>{{txt}}</li> <p>' }) new Vue({ el:&quot;#app&quot;, data:{ todos:[ {shixiang:&quot;chifan&quot;}, {shixiang:&quot;shuijiao&quot;}, {shixiang:&quot;dayouxi&quot;}, ] }, }); </script> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;div id=<span class="hljs-string">"app"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">tou</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"shitu"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tou</span>&gt;</span></span> &lt;zhong&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">zhong</span>&gt;</span></span> &lt;ol&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">todo-item</span> <span class="hljs-attr">txt</span>=<span class="hljs-string">"item.shixiang"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(item,index) in todos"</span> <span class="hljs-attr">key</span>=<span class="hljs-string">"index"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">todo-item</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span></span> &lt;<span class="hljs-regexp">/div&gt; &lt;script&gt; Vue.component('tou',{ props:["name"], template:'&lt;div&gt;这是头部&lt;a&gt;{{name}}&lt;/</span>a&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><span class="hljs-string">' }) Vue.component('</span>zhong<span class="hljs-string">',{ template:'</span>&lt;div&gt;这是zhong部&lt;a&gt;logo&lt;<span class="hljs-regexp">/a&gt;&lt;/</span>div&gt;<span class="hljs-string">' }) Vue.component('</span>todo-item<span class="hljs-string">',{ props:["txt"], template:'</span>&lt;li&gt;{{txt}}&lt;<span class="hljs-regexp">/li&gt;' }) new Vue({ el:"#app", data:{ todos:[ {shixiang:"chifan"}, {shixiang:"shuijiao"}, {shixiang:"dayouxi"}, ] }, }); &lt;/</span>script&gt; </code></pre> <blockquote><p>这只是一个假设的例子,但是我们已经设法将应用分割成了两个更小的单元,子单元通过 props 接口实现了与父单元很好的解耦。我们现在可以进一步为我们的 todo-item 组件实现更复杂的模板和逻辑的改进,而不会影响到父单元。</p></blockquote> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26309.html