Vue基础之数据绑定

<p>我们学习一门新语言或者框架时,第一件事是什么呢,那必然是向世界say Hello。</p> <h4>创建一个<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>应用</h4> <p>话不多说,先上代码,让我们感受一下<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>的核心功能</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="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;><br /> <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;><br /> <title>Document</title><br /> </head><br /> <body></p> <div id=&quot;app&quot;> <input type=&quot;text&quot; v-model=&quot;message&quot;></p> <h1>{{message}}</h1> <p> // {{message}}模板的输出方式 </p></div> <p> <script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;></script><br /> <script type=&quot;text/javascript&quot;> var app = new Vue({ el: '#app', // app是Vue实例的挂在对象 data: { message: &quot;Hello world&quot; // 字面量 } }) </script><br /> </body><br /> </html>&#8221; title=&#8221;&#8221; data-original-title=&#8221;复制&#8221;></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</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">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</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">h1</span>&gt;</span>{{message}}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue/dist/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">type</span>=<span class="hljs-string">"text/javascript"</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>, <span class="hljs-comment">// app是Vue实例的挂在对象</span> data: { message: <span class="hljs-string">"Hello world"</span> <span class="hljs-comment">// 字面量</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>当修改输入框内容时,h1标签内容也做相应改变,虽然代码很简单,还是能体会到<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> <h4><a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a>(面试考点)</h4> <ol> <li>通过构造函数创建一个Vue实例 new Vue(),此时app就相当于 new Vue;</li> <li> <p>传入el,el是Vue对象中必不可少的,需要把el挂载到页面已存在的<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>(可以是<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>元素,或者是<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>选择器)上;</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=" var app = new Vue({ el: '#app', // 或者document.getElementById('app') })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code> var app = new Vue({ el: '#app', // 或者document.getElementById('app') })</code></pre> </li> <li>在input标签上有一个v-model指令,它的值和Vue实例中data里的message对应,input可以修改message的值,同时当message改变时也可以体现在视图上;</li> </ol> <h4>生命周期(开发时必了解)</h4> <p>每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就Vue的生命周期。下面是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="beforeCreate: function () { console.group('beforeCreate 创建前状态===============》'); console.log(&quot;%c%s&quot;, &quot;color:red&quot; , &quot;el : &quot; + this.$el); //undefined console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;data : &quot; + this.$data); //undefined console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;message: &quot; + this.message) }, created: function () { console.group('created 创建完毕状态===============》'); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;el : &quot; + this.$el); //undefined console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;data : &quot; + this.$data); //已被初始化 console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;message: &quot; + this.message); //已被初始化 }, beforeMount: function () { console.group('beforeMount 挂载前状态===============》'); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;el : &quot; + (this.$el)); //已被初始化 console.log(this.$el); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;data : &quot; + this.$data); //已被初始化 console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;message: &quot; + this.message); //已被初始化 }, mounted: function () { console.group('mounted 挂载结束状态===============》'); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;el : &quot; + this.$el); //已被初始化 console.log(this.$el); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;data : &quot; + this.$data); //已被初始化 console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;message: &quot; + this.message); //已被初始化 }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态===============》'); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;el : &quot; + this.$el); console.log(this.$el); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;data : &quot; + this.$data); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;message: &quot; + this.message); }, updated: function () { console.group('updated 更新完成状态===============》'); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;el : &quot; + this.$el); console.log(this.$el); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;data : &quot; + this.$data); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;message: &quot; + this.message); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;el : &quot; + this.$el); console.log(this.$el); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;data : &quot; + this.$data); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;message: &quot; + this.message); }, destroyed: function () { console.group('destroyed 销毁完成状态===============》'); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;el : &quot; + this.$el); console.log(this.$el); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;data : &quot; + this.$data); console.log(&quot;%c%s&quot;, &quot;color:red&quot;,&quot;message: &quot; + this.message) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>beforeCreate: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.group(<span class="hljs-string">'beforeCreate 创建前状态===============》'</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span> , <span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el); <span class="hljs-comment">//undefined</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data); <span class="hljs-comment">//undefined </span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message) }, <span class="hljs-attr">created</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.group(<span class="hljs-string">'created 创建完毕状态===============》'</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el); <span class="hljs-comment">//undefined</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data); <span class="hljs-comment">//已被初始化 </span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message); <span class="hljs-comment">//已被初始化</span> }, <span class="hljs-attr">beforeMount</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.group(<span class="hljs-string">'beforeMount 挂载前状态===============》'</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"el : "</span> + (<span class="hljs-keyword">this</span>.$el)); <span class="hljs-comment">//已被初始化</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$el); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data); <span class="hljs-comment">//已被初始化 </span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message); <span class="hljs-comment">//已被初始化 </span> }, <span class="hljs-attr">mounted</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.group(<span class="hljs-string">'mounted 挂载结束状态===============》'</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el); <span class="hljs-comment">//已被初始化</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$el); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data); <span class="hljs-comment">//已被初始化</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message); <span class="hljs-comment">//已被初始化 </span> }, <span class="hljs-attr">beforeUpdate</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.group(<span class="hljs-string">'beforeUpdate 更新前状态===============》'</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el); <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$el); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message); }, <span class="hljs-attr">updated</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.group(<span class="hljs-string">'updated 更新完成状态===============》'</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el); <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$el); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message); }, <span class="hljs-attr">beforeDestroy</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.group(<span class="hljs-string">'beforeDestroy 销毁前状态===============》'</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el); <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$el); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message); }, <span class="hljs-attr">destroyed</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.group(<span class="hljs-string">'destroyed 销毁完成状态===============》'</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el); <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$el); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>,<span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message) }</code></pre> <p>下图是Vue生命周期过程中el、data以及data里面的message字段的变化<br /><span class="img-wrap"><img data-src="/img/remote/1460000017959713" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="1.png" title="1.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017959714" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="2.png" title="2.png" style="cursor: pointer;"></span></p> <p>以上是本期全部内容,欲知后事如何,请听下回分解&lt;( ̄︶ ̄)&#x2197;[GO!]</p>
脚本宝典为你提供优质服务
脚本宝典 » Vue基础之数据绑定

发表评论

提供最优质的资源集合

立即查看 了解详情