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

vue入门

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<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" class="tag_link">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 文件,然后通过如下方式引入 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> <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-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="<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>你也可以下载开发版本或生产版本,然后通过如下方式引入 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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;js/vue.js&quot;></script>//开发版本 <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.m<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>.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" class="tag_link">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> <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> <a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a> app = <a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a> Vue({ el: '#app', data: { msg: 'Hello Vue!' } }) </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" class="tag_link">双向绑定</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> <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-<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a> 条件</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> <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> </p></div> <p> var app= new Vue({ el: '#app', data: { seen: true } }) //输出:现在你看到我了" 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: <a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a> } }) /</span><span class="hljs-regexp">/输出:现在你看到我了</span></code></pre> <h3 id="articleHeader6">v-<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a> 循环</h3> <blockquote><p>可以绑定<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</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> <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;> {{ to<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>.text }} </li> </ol></div> <p> var app = new Vue({ el: '#app', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) " 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> <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({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) " 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"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></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> <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>' }) " 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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <ol> <!-- 创建一个 todo-item 组件的实例 --> <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> <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>' }) " 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> <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> <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> </p></div> <p> <script> Vue.component('tou',{ props:[&quot;<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>&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>

总结

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

vue入门

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

vue入门

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

80%的人都看过