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

vue.js实战书籍学习记录

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">第二章 数据绑定和第一个 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 应用</h2> <h3 id="articleHeader1">2.1.3 插值与表达式</h3> <p>如果想显示{{}}标签,而不进行替换 使用 v-pre即可跳 过这个元素和 它的子元素的 编译过程,<br />例如:</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=" <span v-pre >{{这里的内容是不会被编译的门}}</ span><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-pre</span> >{{这里的内容是不会被编译的门}}</ <span class="hljs-attr">span</span>&gt;</span> </code></pre> <h3 id="articleHeader2">2.1.4 过滤器</h3> <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=” app” > { { date | formatDate ) ) </div> <p> var app =new Vue({<br /> el : ’ #app ’ ,<br /> data: {<br /> date : new Date()<br /> filters : {<br /> formatDate : function (value) { //这里的 value 就是需要过滤的数据<br /> }<br /> })<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"> <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">”</span> <span class="hljs-attr">app</span>” &gt;</span> { { date | formatDate ) ) <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> var app =new <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ el : ’ #app ’ , data: { date : new Date() filters : { formatDate : function (value) { //这里的 value 就是需要过滤的数据 } }) </code></pre> <p>过滤器也可以串联,而且可以接收参数,例如:</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="<! 一串联一〉 { { message | filterA | filterB } } 〈!一接收参数一一〉 {{ message | flterA ('argl ’,’ arg2 ’)}} " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cmake"><code>&lt;! 一串联一〉 { { <span class="hljs-keyword">message</span> | filterA | filterB } } 〈!一接收参数一一〉 {{ <span class="hljs-keyword">message</span> | flterA ('argl ’,’ arg2 ’)}} </code></pre> <p>这里的字符argl arg2 将分别传给过滤器的第 2个和第 3个参数,因为第1 个是数据本身。</p> <p>**过滤器应当用于处理简单的文本转换,如果要实现更为复杂的数据变换,应该使用计<br />算属性;**</p> <h2 id="articleHeader3">2.2 指令与事件</h2> <h1 id="articleHeader4">第三章 计算属性</h1> <p>既然使用 methods 就可以实现,那么为什么还需要计算属性呢?原因就是<br />计算属性是基于它的依赖缓存的。 一个计算属性所依赖的数据发生变化时,它才会重新取值,所以<br />text 只要不改变,计算属性也就不更新</p> <h1 id="articleHeader5">第四章 v-bind及 class与 style 绑定</h1> <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 :class=”{’ active ’: isActive }”></div> <div : class=” [isActive ? activeCls :'', errorCls] ” ></div> <div :style ={’ color ’: color, ’ fontSize ’ : fontSize +’ px ’}”〉文本</ div> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">”{’</span> <span class="hljs-attr">active</span> ’<span class="hljs-attr">:</span> <span class="hljs-attr">isActive</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">div</span> <span class="hljs-attr">:</span> <span class="hljs-attr">class</span>=<span class="hljs-string">”</span> [<span class="hljs-attr">isActive</span> ? <span class="hljs-attr">activeCls</span> <span class="hljs-attr">:</span>'', <span class="hljs-attr">errorCls</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">div</span> <span class="hljs-attr">:style</span> ={’ <span class="hljs-attr">color</span> ’<span class="hljs-attr">:</span> <span class="hljs-attr">color</span>, ’ <span class="hljs-attr">fontSize</span> ’ <span class="hljs-attr">:</span> <span class="hljs-attr">fontSize</span> +’ <span class="hljs-attr">px</span> ’}”〉文本</ <span class="hljs-attr">div</span>&gt;</span> </code></pre> <h1 id="articleHeader6">第五章 内置指令</h1> <h3 id="articleHeader7">5.1.1 v-cloak</h3> <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-cloak] { display: none; } <div id=” app ” v-cloak> {{message )) </div> <p> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="css hljs"><code class="css"> <span class="hljs-selector-attr">[v-cloak]</span> { <span class="hljs-attribute">display</span>: none; } &lt;<span class="hljs-selector-tag">div</span> <span class="hljs-selector-tag">id</span>=” <span class="hljs-selector-tag">app</span> ” <span class="hljs-selector-tag">v-cloak</span>&gt; {{message )) &lt;/div&gt; </code></pre> <p>一般情况下,v-cloak是一 个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实<br />用,但是在具有工程化的项目里,比如后面进阶篇将介绍 webpack和 vue-router 时,项目的 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a><br />结构只有一 个空的 <a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a> 元素,剩余的内容都是由路由去挂载不同组件完成的,所以不再需要 v-cloak。</p> <h3 id="articleHeader8">5.1.2 v-once</h3> <h3 id="articleHeader9">5.2.1 v-if v-else-if v-else</h3> <p>可以使用 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>提供的 key 属性,它可以让你自己决定是否要复用元<br />素, key 的值必须是唯 一的:</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=” app”> <template v-if=”type ===’ name ’”><br /> <label >用户名 </ label><br /> <input placeholder=”输入用户名” key=&quot; name-input”><br /> </template><br /> <template v-else><br /> <label >邮箱 </ label><br /> <input placeholder=”输入邮箱” key=呗ail-input ”〉 </template><br /> <button @click=” handleToggleClick ”〉切换输入类型</button> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">”</span> <span class="hljs-attr">app</span>”&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">”type</span> ===<span class="hljs-string">’</span> <span class="hljs-attr">name</span> ’”&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">label</span> >用户名 </ <span class="hljs-attr">label</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=”输入用户名” <span class="hljs-attr">key</span>=<span class="hljs-string">" name-input”&gt; &lt;/template&gt; &lt;template v-else&gt; &lt;label >邮箱 </ label&gt; &lt;input placeholder=”输入邮箱” key=呗ail-input ”〉 &lt;/template&gt; &lt;button @click=” handleToggleClick ”〉切换输入类型</button&gt; &lt;/div&gt;</span></span></code></pre> <p>给两个&lt;input&gt;元素都增加 key后 就不会复用了,切换类型时键入的内容也会被删除,不过<br />&lt;label>元素仍然是被复用的,因为没有添加 key 属性。</p> <h3 id="articleHeader10">5.2.2 v-show</h3> <h3 id="articleHeader11">5.3.2 <a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>更新</h3> <p>Vue 包含了一 组观察<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>变异的方法,使用它们改变<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>也会触<br />发视图更新:</p> <ul> <li>push()</li> <li>pop()</li> <li>shift ()</li> <li>unshift()</li> <li>splice()</li> <li>sort()</li> <li>reverse()</li> </ul> <p><strong>需要注意的是,以下变动的数组中, Vue 是不能检测到的,也不会触发视图更新:</strong></p> <ul> <li>通过索引直接设置项,比如 app.books[3] = { ... }.</li> <li>修改数组长度,比如叩p.books.length = 1.</li> </ul> <p>解决第一 个问题可以用两种方法实现同样的效果,第 种是使用 Vue 内置的 set 方法:</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=" Vue .set(app.books, 3 , { name: 《css 揭秘》 ’, author :’[希] Lea Verou ’ }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> Vue .set(app.books, <span class="hljs-number">3</span> , { <span class="hljs-attr">name</span>: 《css 揭秘》 ’, author :’[希] Lea Verou ’ }</code></pre> <p>如果是在 webpack 中使用组件化的方式(进阶篇中将介绍〉,默认是没有导入 Vue 的,这时<br />可以使用$set ,例如:</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="this.$set(app.books, 3 , { name: ’《css 揭秘》’, author :’[希] Lea Verou ’ }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$<span class="hljs-keyword">set</span>(app.books, <span class="hljs-number">3</span> , { name: ’《css 揭秘》’, author :’[希] Lea Verou ’ }) </code></pre> <p>第二个问题也可以直接用 splice 来解决:</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="app.books.splice(l); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">app</span><span class="hljs-selector-class">.books</span><span class="hljs-selector-class">.splice</span>(<span class="hljs-selector-tag">l</span>); </code></pre> <h2 id="articleHeader12">5.4 方法与事件</h2> <p>在methods中 定义了我们 需要的方法供@click 调用, 需要注意 ,@click 调用的方法名后可以不跟括号“()” 此时,如果该方法有参数,默认会将原生事件对象 event 传入,可以尝试修改为@click=”handleAdd”,然后在 handleAdd 内打印出 count 参数看看。在大部分业务场景中,如果方法不需要传入参数,为了简便可以不写括号。<br />Vue 提供了 个特殊变量$event ,用于访问原生 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</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=" <div id=” app ” > <a href=”http:llwww.apple.com”@click=&quot;handleClick ('禁止打开’,$event )”>打开链接 </a> </div> <p><script> var app =new Vue({ el :’#app ’, methods: { handleClick : function (message, event) { event . preventDefault() ; window . alert(message); } } })</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-meta">&lt;div</span> <span class="hljs-string">id=” app ” &gt;</span> <span class="hljs-meta">&lt;a</span> <span class="hljs-string">href=”http:llwww.apple.com”@click="handleClick ('禁止打开’,$event )”&gt;打开链接 &lt;/a&gt;</span> <span class="hljs-attr">&lt;/div&gt;</span> <span class="hljs-attr">&lt;script&gt;</span> <span class="hljs-attr">var</span> <span class="hljs-string">app =new Vue({</span> <span class="hljs-attr">el</span> :<span class="hljs-string">’#app ’,</span> <span class="hljs-attr">methods</span>: <span class="hljs-string">{</span> <span class="hljs-attr">handleClick</span> : <span class="hljs-string">function (message, event) {</span> <span class="hljs-attr">event</span> <span class="hljs-string">. preventDefault() ;</span> <span class="hljs-attr">window</span> <span class="hljs-string">. alert(message); </span> <span class="hljs-attr">}</span> <span class="hljs-attr">}</span> <span class="hljs-attr">})</span> </code></pre> <h3 id="articleHeader13">5.4.2 修饰符</h3> <ul> <li>.stop</li> <li>.prevent</li> <li>.capture</li> <li>.self</li> <li>.once</li> <li>.enter</li> <li>.tab</li> <li>.de<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a>e(捕获‘删除’和‘退格’键)</li> <li>.esc</li> <li>.space</li> <li>.up</li> <li>.down</li> <li>.left</li> <li>.right</li> <li>.ctrl</li> <li>.alt</li> <li>.shift</li> <li>.meta(Mac下是Command,Window下是窗口键)</li> </ul> <p>例如:</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<! -- Shift + S --> <input @keyup.shift . 83=”handleSave ”> <!-- Ctrl + Click --></p> <div @click.ctrl=”doSomething”>Do something</div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">!</span> <span class="hljs-attr">--</span> <span class="hljs-attr">Shift</span> + <span class="hljs-attr">S</span> <span class="hljs-attr">--</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> @<span class="hljs-attr">keyup.shift</span> <span class="hljs-attr">.</span> <span class="hljs-attr">83</span>=<span class="hljs-string">”handleSave</span> ”&gt;</span> <span class="hljs-comment">&lt;!-- Ctrl + Click --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> @<span class="hljs-attr">click.ctrl</span>=<span class="hljs-string">”doSomething”</span>&gt;</span>Do something<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <h1 id="articleHeader14">第六章 表单与 v-model</h1> <h2 id="articleHeader15">6.3 修饰符</h2> <ul> <li>v-model.lazy</li> <li>v-model.number</li> <li>.trim</li> </ul> <h1 id="articleHeader16">第七章 组件详解</h1> <h3 id="articleHeader17">7.1.2 组件用法</h3> <p>组件与之类似,需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后,<br />任何 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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Vue.component (’ my- component ’, { //选项 }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">Vue.component (’ my- component ’, { //选项 }) </code></pre> <p>Vue组件的模板在某些情况下会受到 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 的限制,比如<table>内规定只允许是〈tr〉&lt;td&gt;、<<br />th>等这些表格元素,所以在<tabl >内直接使用组件是无效的 这种情况下,可以使用特殊的**is<br />属性**来挂载组件 示例代码如下</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=” app” > <table> <tbody is=”my-component” ></tbody> <p> </ table> </div> <p> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">”</span> <span class="hljs-attr">app</span>” &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span> <span class="hljs-attr">is</span>=<span class="hljs-string">”my-component”</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span> <span class="hljs-tag">&lt;/ <span class="hljs-attr">table</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> </code></pre> <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> Vue.component ( ’ my-component ’, { template :’ div >这里是组件的内容</ div> }) ; var app =new Vue({ el : ’ #app ’ }) <script ></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&lt;script&gt; Vue.component ( ’ my-component ’, { template :’ div >这里是组件的内容</ div&gt; }) ; <span class="hljs-keyword">var</span> app =<span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span> : ’ #app ’ }) &lt;script /&gt;</code></pre> <p>tbody 在渲染时 会被替换为组件的内容。常见的限制元素还有<ul>、<ol>、<select&gt;</p> <p>JavaScript 对象是引用关系,所以如果 return出的对象引用了外部对象, 那这个对象就<br />是共享的,任何 方修改都会同步。比如下面的示例:</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=” app” > <my- component></my-component><br /> <my-component></my-component><br /> <my-component></my-component> </div> <p><script> var data = { counter : 0 } Vue.component (’ my- component ’, { template :’<button @click=” counter++” >{{ counter ) )</button>’, data:function () { return data ; } }) var app =new Vue ( { el :’#app ’ }) </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">”</span> <span class="hljs-attr">app</span>” &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-</span> <span class="hljs-attr">component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</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="xml"> var data = { counter : 0 } Vue.component (’ my- component ’, { template :’<span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">”</span> <span class="hljs-attr">counter</span>++” &gt;</span>{{ counter ) )<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>’, data:function () { return data ; } }) var app =new Vue ( { el :’#app ’ }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>组件使用了3次 但是点击任意一 &lt;button&gt;。3 个数字都会加1 ,那是 因为组件 data<br />用的是外部 的对象,这肯定不是我们期望的效果,所以 给组件返回一个新的 data对 象来独立<br />例代码如下</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=” app” > <my- component></my-component><br /> <my-component></my-component><br /> <my-component></my-component> </div> <p><script></p> <p> Vue.component (’ my- component ’, { template :’<button @click=” counter++” >{{ counter ) )</button>’, data:function () { return { counter:0 } } }) var app =new Vue ( { el :’#app ’ }) </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">”</span> <span class="hljs-attr">app</span>” &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-</span> <span class="hljs-attr">component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</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="xml"> Vue.component (’ my- component ’, { template :’<span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">”</span> <span class="hljs-attr">counter</span>++” &gt;</span>{{ counter ) )<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>’, data:function () { return { counter:0 } } }) var app =new Vue ( { el :’#app ’ }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>这样,点击3 个按钮就互不影响了,完全达到复用的目的。</p> <h2 id="articleHeader18">7.2 使用 props 传递数据</h2> <p>**注意,如果你要直接传递数字、布尔值、数组、对象,而且不使用 <code>v-bind</code> ,传递的仅<br />仅是字符串,尝试下面的示例来对比:**</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=” app ” > <my-component message=” [ 1 , 2, 3 ] ” ></my-component><br /> <my-component :message=” [ 1 , 2, 3 ] ” ></my-component> </div> <p><script> Vue.component (’ my-component ’, { props: [ ’ message ’ ], template :’</p> <div>{{ message.length }}</div> <p>’ } ) var app =new Vue ( { el : ’ #app ’ }) </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">”</span> <span class="hljs-attr">app</span> ” &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-component</span> <span class="hljs-attr">message</span>=<span class="hljs-string">”</span> [ <span class="hljs-attr">1</span> , <span class="hljs-attr">2</span>, <span class="hljs-attr">3</span> ] ” &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-component</span> <span class="hljs-attr">:message</span>=<span class="hljs-string">”</span> [ <span class="hljs-attr">1</span> , <span class="hljs-attr">2</span>, <span class="hljs-attr">3</span> ] ” &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</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="xml"> Vue.component (’ my-component ’, { props: [ ’ message ’ ], template :’<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>{{ message.length }}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>’ } ) var app =new Vue ( { el : ’ #app ’ }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>同一个组件使用了两次,区别仅仅是第二个使用的是 <code>v-bind</code> ,渲染后的结果,<strong>第一个是7</strong><br />,第二个才是数组的长度 3,</p> <h3 id="articleHeader19">7.2.2 单向数据流</h3> <h3 id="articleHeader20">7.2.3 数据验证</h3> <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 my-component ’, props : { //必须是数字类型 propA : Number, //必须是字符串或数字类型 propB : [String, Number] , //布尔值,如果没有定义,默认值就是 true propC: { type : Boolean , default : true //数字,而且是必传 } propD: { type: Number , required : true //如果是数组或对象,默认值必须是一个函数来返回 } propE: { type : Array , default : function () { return [] ; //自定义 个验证函数 } } propF: { validator : function (value) { return value > 10;<br /> }<br /> }<br /> }<br /> )};" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>Vue.component my-component ’, props : { //必须是数字类型 propA : <span class="hljs-built_in">Number</span>, //必须是字符串或数字类型 propB : [<span class="hljs-built_in">String</span>, <span class="hljs-built_in">Number</span>] , //布尔值,如果没有定义,默认值就是 <span class="hljs-literal">true</span> propC: { <span class="hljs-keyword">type</span> : <span class="hljs-built_in">Boolean</span> , <span class="hljs-keyword">default</span> : <span class="hljs-literal">true</span> //数字,而且是必传 } propD: { <span class="hljs-keyword">type</span>: <span class="hljs-built_in">Number</span> , required : <span class="hljs-literal">true</span> //如果是数组或对象,默认值必须是一个函数来返回 } propE: { <span class="hljs-keyword">type</span> : <span class="hljs-built_in"><a href="http://www.js-code.com/tag/array" title="浏览关于“Array”的文章" target="_blank" class="tag_link">Array</a></span> , <span class="hljs-keyword">default</span> : <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> [] ; //自定义 个验证函数 } } propF: { validator : <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">value</span>) </span>{ <span class="hljs-keyword">return</span> value &gt; <span class="hljs-number">10</span>; } } } )};</code></pre> <p>type 类型可以是:</p> <ul> <li>String</li> <li>Number</li> <li>Booleab</li> <li>Object</li> <li><a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a></li> <li>Function</li> </ul> <p>type也可以是一 个自定义构造器,使用 instanceof 检测。<br />当prop 验证失败时,在开发版本下会在控制台抛出一 条警告。</p> <h2 id="articleHeader21">7.3 组件通信</h2> <h3 id="articleHeader22">7.3.1 自定义事件</h3> <p>子组件用 <code>$emit()</code>来触发事件,父组件用<code>$on()</code>来<br />监昕子组件的事件</p> <h3 id="articleHeader23">7.3.3 非父子组件通信</h3> <p>推荐使用一个空的 Vue 实例作为中央事件总线( bus ),也就是一个中介</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 bus= new Vue (); methods : { handleEvent: function () { bus.$emit(’on-message',' 来自组件 mponent-a 的内容') } } //在实例初始化时,监听来自 bus 实例的事件 bus.$on (’on-message ’, function (msg) { ...}) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">var</span> bus= <span class="hljs-keyword">new</span> Vue (); methods : { <span class="hljs-attr">handleEvent</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ bus.$emit(’on-message<span class="hljs-string">','</span> 来自组件 mponent-a 的内容<span class="hljs-string">') } } //在实例初始化时,监听来自 bus 实例的事件 bus.$on (’on-message ’, function (msg) { ...}) </span></code></pre> <h4>$refs</h4> <p>$refs 只是在组件 渲染完成后才填充,并且它是非响应式的 它仅仅作为一个直接访问子<br />苦? 组件的应急方案,应当避免在模板或计算属性中使用$refs</p> <h2 id="articleHeader24">7.4 使用 slot 分发内容</h2> <h3 id="articleHeader25">7.4.3 slot 用法</h3> <ul> <li>单个slot</li> <li>具名 Slot</li> </ul> <h3 id="articleHeader26">7.4.4 作用域插槽</h3> <h2 id="articleHeader27">7.5 组件高级用法</h2> <h3 id="articleHeader28">7.6.1 $nextTick</h3> <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=” app” > <div id div v-if=气howDiv 〉这是一段文本</ div> <button @click= getText 〉获取 div 内容</button> </div> <p><script> var app =new Vue({ el :’#app ’, data: { showDiv: false }, methods : { getText: function () { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.showDiv = true; var text = document .getElementByid (’ <a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a> ’) .inner<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>; console . log(text) ; } } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code>&lt;div id=” app” &gt; &lt;div id div v-<span class="hljs-keyword">if</span>=气howDiv 〉这是一段文本</ div&gt; &lt;button @click= getText 〉获取 div 内容</button&gt; &lt;/div&gt; &lt;script&gt; <span class="hljs-keyword">var</span> app =<span class="hljs-keyword">new</span> Vue({ el :’<span class="hljs-comment">#app ’,</span> data: { showDiv: <span class="hljs-keyword">false</span> }, methods : { getText: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ this.showDiv = <span class="hljs-keyword">true</span>; <span class="hljs-keyword">var</span> text = document .getElementByid (’ div ’) .innerHTML; console . log(text) ; } } }) &lt;/script&gt;</code></pre> <p>这段代码并不难理解,但是运行后在控制台会抛出一个错误: Cannot read prope町’innerHU.伍’<br />of null ,意思就是获取不到 div 元素。这里就涉及 Vue 一个重要的概念:异步更新队列。</p> <p>Vue 会根据当前浏览器环境优先使用原生的 <a href="http://www.js-code.com/tag/promis" title="Promis" target="_blank">Promis</a>e.then MutationObserver ,如果都不支持,<br />就会采用 setTimeout代替。</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=” app” > <div id div v-if=气howDiv 〉这是一段文本</ div> <button @click= getText 〉获取 div 内容</button> </div> <p><script> var app =new Vue({ el :’#app ’, data: { showDiv: false }, methods : { getText: function () { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.showDiv = true ; this.$nextTick (function () { var text = document . getElementByid ( ’ div ’) . innerHTML; console.log(text) ; } } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code>&lt;div id=” app” &gt; &lt;div id div v-<span class="hljs-keyword">if</span>=气howDiv 〉这是一段文本</ div&gt; &lt;button @click= getText 〉获取 div 内容</button&gt; &lt;/div&gt; &lt;script&gt; <span class="hljs-keyword">var</span> app =<span class="hljs-keyword">new</span> Vue({ el :’<span class="hljs-comment">#app ’,</span> data: { showDiv: <span class="hljs-keyword">false</span> }, methods : { getText: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ this.showDiv = <span class="hljs-keyword">true</span> ; this.$nextTick (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">var</span> text = document . getElementByid ( ’ div ’) . innerHTML; console.log(text) ; } } }) &lt;/script&gt;</code></pre> <p>这时再点击按钮,控制台就打印出 div 的内容“这是一段文本”了。</p> <p>我们应该不用去主动操作 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>,因为 Vue 的核心思想就是数据驱动 <a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>,但在很<br />多业务里,我们避免不了会使用 些第三方库,比如 popper.js、 swiper等 ,这些基于原生 JavaScript 库都有创建和更新及销毁的完整生命周期,与 Vue 合使用时,就要利用好$nextTick</p> <h3 id="articleHeader29">7.6.3 手动挂载实例</h3> <p>我们现在所创建的实例都是通过 new Vue()的形式创建出来的 。在一些非常特殊的情况下,我<br />们需要动态地去创建 Vue 实例, Vue 提供了 Vue.extend和 $mount 两个方法来手动挂载一个实例。<br />Vue.extend是 基础 Vue 构造器,创建一个“子类”,参数是一 个包含组件选项的对象。<br />如果 Vue 实例在实例化时没有收到 el 选项,它就处于“未挂载”状态,没有关联的 DOM元<br />素。可以使用$mount()手动地挂载一 个未挂载的实例。这个方法返回实例自身,因而可以链式调用<br />其他实例方法。示例代码如下:</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=” unt-div ”〉 </div> <p><script><br /> var MyComponent =Vue.extend ((<br /> template :’</p> <div>Hello: {{ ne } }</div> <p>’,<br /> data: function () {<br /> return (<br /> name :’Aresn ’<br /> ., } )<br /> new MyComponent ().$mount (’#mount-div ’); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&lt;div id=” unt-div ”〉 &lt;<span class="hljs-regexp">/div&gt; &lt;script&gt; var MyComponent =Vue.extend (( template :’&lt;div&gt;Hello: {{ ne } }&lt;/</span>div&gt;’, <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> ( name :’Aresn ’ ., } ) <span class="hljs-keyword">new</span> MyComponent ().$mount (’#mount-div ’); </code></pre> <p>另外一种挂载方式</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="new MyComponent ({ el :’#mount-div ’ }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">new</span> MyComponent ({ <span class="hljs-attr">el</span> :’#mount-div ’ }); </code></pre> <p>//或者,在文档之外渲染并且随后挂载</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 component= new MyComponent() . $mount (); document.getElementByid ('mount-d ’) .appendChild(component.$el);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">var</span> component= <span class="hljs-keyword">new</span> MyComponent() . $mount (); <span class="hljs-built_in">document</span>.getElementByid (<span class="hljs-string">'mount-d ’) .appendChild(component.$el);</span></code></pre> <p>手动挂载实例(组件)是一 种比较极端的高级用法,在业务中几乎用不到,只在开发一 些复<br />杂的独立组件时可能会使用,所以只做了解就好。</p> <h1 id="articleHeader30">第八章 自定义指令</h1> <h2 id="articleHeader31">8.1 基本用法</h2> <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.directive(’focus ’,{ //指令选项 ., } ) //局部注册 var app =new Vue({ el :’#app ’, directive: { focus: { //指令选项 }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">//全局注册 Vue.directive(’focus ’,{ //指令选项 ., } ) //局部注册 <span class="hljs-keyword">var</span> app =<span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span> :’#app ’, <span class="hljs-attr">directive</span>: { <span class="hljs-attr">focus</span>: { //指令选项 }) </code></pre> <p>自定义指令的选项是由几个钩子函数组成的,每个都是可选的。</p> <ul> <li>bind 只调用一次,指令第一次绑定到元素 时调用,用这个钩子函数可以定义一个在绑定</li> </ul> <p>时执行一次的初始化动作.</p> <ul> <li>inserted 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)</li> <li>update 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后</li> </ul> <p>的绑定值,可以忽略不必要的模板更新。</p> <ul> <li>componentUpdated 被绑定元素所在模板完成一次更新周期时调用.</li> <li>unbind 只调用一次,指令与元素解绑时调用</li> </ul> <h1 id="articleHeader32">第九章 Render 函数</h1> <p></code></p>

总结

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

vue.js实战书籍学习记录

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

vue.js实战书籍学习记录

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

80%的人都看过