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

Vue学习笔记1

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">声明式渲染</h2> <p>vue的引入<br /><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;</code></p> <p>初步使用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=" <div id=&quot;app&quot;> {{message}} </div> <p> <script> var app=new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app', data:{ message:&quot;hello vue&quot; } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <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> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> {{message}} <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> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ el: <span class="hljs-string">'#app'</span>, data:{ message:<span class="hljs-string">"hello vue"</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>错误笔记:1.new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>中的V忘记大写,2.el的#app忘了加引号以及忘了在末尾加逗号</p> <p><code>v-bind</code>指令</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=" <div id=&quot;app&quot;> <span v-bind:title=&quot;message&quot;><br /> 鼠标悬停几秒钟查看此处动态绑定的提示信息!<br /> </span> </div> <p> <script> var app2=new Vue({ el: '#app', data:{ message: 'v-bind特性被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。' } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <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">span</span> <span class="hljs-attr">v-bind:title</span>=<span class="hljs-string">"message"</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">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> app2=<span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data:{ message: <span class="hljs-string">'v-bind特性被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。'</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><code>v-bind</code> 特性被称为<strong>指令</strong>。指令带有前缀 <code>v-</code>,以表示它们是 Vue 提供的特殊特性。在这里,该指令的意思是:“将这个元素节点的 <code>title</code> 特性和 Vue 实例的 <code>message</code> 属性保持一致”。</p> <h2 id="articleHeader1">条件与循环</h2> <p><code>v-if</code></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=" <div id=&quot;app&quot;> <p v-if=&quot;seen&quot;>seen为false时就会消失</p> </p></div> <p> <script> var app2=new Vue({ el: '#app', data:{ seen: true } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <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> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"seen"</span>&gt;</span>seen为false时就会消失<span class="hljs-tag">&lt;/<span class="hljs-name">p</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> app2=<span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data:{ seen: <span class="hljs-literal">true</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><code>v-for</code></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=" <div id=&quot;app&quot;> <p v-for=&quot;todo in todos&quot;>{{todo.text}}</p> </p></div> <p> <script> var app2=new Vue({ el: '#app', data:{ todos:[ {text:'学习JavaScript'}, {text:'学习Vue'}, {text:'整个牛项目'} ] } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <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> <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">p</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> app2=<span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data:{ todos:[ {text:<span class="hljs-string">'学习JavaScript'</span>}, {text:<span class="hljs-string">'学习Vue'</span>}, {text:<span class="hljs-string">'整个牛项目'</span>} ] } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>"{{}}"中就是想要显示Vue实例中属性提供的内容</p> <h2 id="articleHeader2">处理用户输入</h2> <p>为了让用户和你的应用进行交互,我们可以用 <code>v-on</code> 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法:<br /><code>v-on</code></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=" <div id=&quot;app&quot;> <p>{{message}}</p> <p> <button v-on:click=&quot;reverseMessage&quot;>反转字符串</button> </div> <p> <script> var app2=new Vue({ el: '#app', data:{ message:'hello v-on' }, methods:{ reverseMessage:function(){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.message=<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.message.split('').reverse().join('') } } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <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>{{message}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">"reverseMessage"</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">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> app2=<span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data:{ message:<span class="hljs-string">'hello v-on'</span> }, methods:{ reverseMessage:<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>) } } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>Vue 还提供了 <code>v-model</code> 指令,它能轻松实现表单输入和应用状态之间的<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a>。<br /><code>v-model</code></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=" <div id=&quot;app&quot;> <p>{{message}}</p> <p> <input v-model=&quot;message&quot;> </div> <p> <script> var app2=new Vue({ el: '#app', data:{ message:'hello v-model' } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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>{{message}}<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">"message"</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> app2=<span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data:{ message:<span class="hljs-string">'hello v-model'</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>当修改<code>input</code>中的内容时,标签<code>p</code>中的message在页面上显示的文字也跟着改变。</p> <p></code></p>

总结

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

Vue学习笔记1

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

Vue学习笔记1

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

80%的人都看过