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

Vue.js常用开发知识简要入门(二)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">v-pre 指令</h2> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js 的指令是带有前缀 v- 的特殊 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 属性,其中的v-pre 指令用于指示 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 编译器跳过含有该指令的元素及其子元素,该指令主要有如下两个用途:</p> <ul> <li> <p>显示原始插值标签</p> </li> <li> <p>跳过大量没有指令的节点以降低编译时间</p> </li> </ul> <p>编写较复杂的 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.js 模板时可以适当使用 v-pre 指令,提升编译效率。</p> <h2 id="articleHeader1">数据绑定</h2> <h3 id="articleHeader2">插值</h3> <p>使用Mustache语法:</p> <ul> <li> <p>{{ msg }}</p> </li> <li> <p>{{{ <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>Fragment }}}<br />插值类型:</p> </li> <li> <p>文本</p> </li> <li> <p>原始<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a></p> </li> <li> <p>HTML属性</p> </li> </ul> <h3 id="articleHeader3">指令</h3> <p>带有前缀 v- 的特殊属性<code>v-<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>、v-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>、v-html、v-b<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>d、v-on....</code>作用就是把某些特殊的行为应用到<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>上</p> <p>v-b<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>d和v-on的缩写形式<br />v-b<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>d和v-on都必须带有参数才有意义</p> <ul> <li> <p>v-bind:src =&gt; :src</p> </li> <li> <p>v-on:click =&gt; @click</p> </li> </ul> <h3 id="articleHeader4">绑定表达式</h3> <ul> <li> <p>支持全功能的JavaScript表达式</p> </li> <li> <p>表达式将在其所在Vue实例的作用域内进行计算</p> </li> <li> <p>不支持多于一个JavaScript表达式</p> </li> <li> <p>不支持语句及流程控制</p> </li> </ul> <h2 id="articleHeader5">双大括号插值和三大括号插值的区别</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="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!-- 插值 --><br /> {{ message }}<br /> {{{ htmlSegment }}}<br /> <img src=&quot;{{ photoURL }}&quot; />" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-comment">&lt;!-- 插值 --&gt;</span> {{ message }} {{{ htmlSegment }}} <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{ photoURL }}"</span> /&gt;</span></code></pre> <p>Vue.js 的双大括号插值和三大括号插值其实是语法糖,双大括号会被编译成一个 <a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>Node,然后使用 v-text 指令插入<strong>插值</strong>内容,而三大括号插值则被编译成一个锚节点,然后使用 v-html 指令<strong>替换</strong>为插值内容,上述过程比直接在 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 元素中使用 v-text 或 v-html 在性能上略有降低。</p> <p>可以使用 Vue.config 全局配置对象的 delimiters 和 unsafeDelimiters 属性设置自定义的插值定界符,以避免与其他模板冲突,自定义插值定界符的语句应该写在 Vue 实例化之前。</p> <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="// ES6 模板字符串 Vue.config.delimiters = ['${', '}'] // 使之看起来更危险 Vue.config.unsafeDelimiters = ['{!!', '!!}']" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs dart"><code><span class="hljs-comment">// ES6 <a href="http://www.js-code.com/tag/%e6%a8%a1%e6%9d%bf%e5%ad%97%e7%ac%a6%e4%b8%b2" title="浏览关于“模板字符串”的文章" target="_blank" class="tag_link">模板字符串</a></span> Vue.config.delimiters = [<span class="hljs-string">'<span class="hljs-subst">${<span class="hljs-string">', '</span>}</span>'</span>] <span class="hljs-comment">// 使之看起来更危险</span> Vue.config.unsafeDelimiters = [<span class="hljs-string">'{!!'</span>, <span class="hljs-string">'!!}'</span>]</code></pre> <p>Vue.js 使用了将插值内容直接赋值给 textNode 元素的 data 属性或其他元素的 textContent 属性这样一种精巧的方式进行 HTML 转义,充分利用了浏览器自身的处理能力。这种方式也会产生无伤大雅的副作用,如对 textNode 元素的 data 属性赋值其实是调用了该属性的 setter() 方法,实际生成的 <a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a> 元素的代码与绑定表达式的值有可能不完全相同。</p> <h2 id="articleHeader6">Vue.js 2.0 中移除所有内置过滤器</h2> <p>Vue.js 2.0 版中移除所有内置过滤器,过滤器的使用方式也将发生改变,在新版本中,过滤器后使用括号而非空格来添加参数,并只可应用于插值方式的数据绑定,其他使用过滤器的场景使用计算属性替代,并根据需要选择使用针对不同专业领域的第三方独立库,如针对日期时间处理使用 <a href="http://momentjs.com/" rel="nofollow noreferrer" target="_blank">Moment.js</a>,针对金融货币处理使用 <a href="http://openexchangerates.github.io/accounting.js/" rel="nofollow noreferrer" target="_blank">Accounting.js</a>,针对<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>和对象处理使用 <a href="https://lodash.com/" rel="nofollow noreferrer" target="_blank">lodash</a>。</p> <h2 id="articleHeader7">修饰符</h2> <p>不同修饰符的作用互相独立,因此串联顺序不会影响使用效果;<a href="http://www.js-code.com/tag/self" title="self" target="_blank">self</a> 修饰符的作用是阻止响应由其他元素冒泡的事件,s<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a> 修饰符用于停止冒泡,但这两者并不矛盾,可以应用于同一元素绑定事件;大部分 HTML 属性不区分大小写,使用 camel 修饰符时,对应的属性会被移除“-”号,但并不会呈现为驼峰样式,仅对类似于 SVG 元素的 viewBox 这样的特殊属性才会改为驼峰样式。</p> <h2 id="articleHeader8">v-<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>和v-show</h2> <p>v-<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a> 指令的切换性能消耗较高,当条件切换时,v-if 指令会根据条件创建或删除 DOM 元素,在条件满足时编译生成相应的元素并插入 DOM 结构,在条件不满足时将元素从 DOM 结构中删除;当使用 <code>&lt;template&gt;</code> 元素包装多个元素时,最终的渲染结果仅包含 <code>&lt;template&gt;</code> 元素的内容。</p> <p>v-show 指令的初始性能消耗较高,v-show 指令会在初始编译时创建元素并插入 DOM 结构,同时根据条件决定该元素是否显示;v-show 指令不能使用 <code>&lt;template&gt;</code> 元素包装多个元素;v-if 和 v-show 指令后面都可以紧跟一个 v-<a href="http://www.js-code.com/tag/else" title="else" target="_blank">else</a> 指令表示当条件不满足时渲染/显示的内容。</p> <ul> <li> <p>多于一个元素的 v-if 需要使用 <code>&lt;template&gt;</code></p> </li> <li> <p>v-show 不支持 <code>&lt;template&gt;</code></p> </li> <li> <p>v-<a href="http://www.js-code.com/tag/else" title="else" target="_blank">else</a> 必须紧跟在 v-if/v-show 指令后面</p> </li> <li> <p>组件条件下不能使用 <code>&lt;v-<a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a>&gt;</code><br /><span class="img-wrap"><img data-src="/img/remote/1460000008048786?w=773&amp;h=297" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> </li> </ul> <h2 id="articleHeader9">过滤及排序</h2> <p>有两种方法可以实现列表内容的过滤和排序而不用修改原始数据:</p> <ul> <li> <p>使用内置的 limitBy、filterBy 和 orderBy 过滤器;</p> </li> <li> <p>创建一个计算属性,返回过滤/排序过的<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>。</p> </li> </ul> <p>通常使用过滤器较为方便,而计算属性有更好的控制力,也更灵活。基于满足灵活性和复杂性的考虑,推荐使用专业的第三方类库 lodash 创建计算属性来实现列表内容的过滤和排序。</p> <h2 id="articleHeader10">track-by的使用</h2> <p>使用 track-by 可以增加复用,提升数据变动时的渲染性能;可以 track-by <a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>中的唯一键值来指示当键值一致时复用使用域和 DOM 元素;若数组没有唯一键值,可以使用 track-by="$index" 指示 v-<a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a> 指令进行原位更新模式,该模式也可用于处理数组中的重复值。</p> <ul> <li> <p>如果每个对象都有一个唯一的ID属性,设置track-by该属性,可以最大化复用DOM元素,避免重新渲染。</p> </li> <li> <p>允许重复值,设置track-by $index</p> </li> </ul> <p>Vue.js 包装的数组变异方法有:push、pop、shift、unshift、splice、sort、reverse,这些方法均对原始数组进行了修改。</p> <h2 id="articleHeader11">类与样式绑定的增强</h2> <p>为了更灵活地进行类绑定,Vue.js 支持在数组语法中使用对象的混合绑定语法。对象语法支持驼峰式和短横分隔式的 <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> 属性名;对于需要厂商前缀的 <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> 属性名,Vue.js 并不是粗暴地直接添加,而是自动侦测后添加相应的前缀,若无必要,不会添加;采用数组语法时,会对绑定的数组使用 reduce 方法执行从前到后的对象 extend 操作(类似于 <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>.extend 方法),其结果是若不同数组元素中有相同的 <a href="http://www.js-code.com/tag/css" title="浏览关于“CSS”的文章" target="_blank" class="tag_link">CSS</a> 属性,后出现元素中的 CSS 属性值覆盖结果中的 CSS 属性值,因此是后出现的优先应用;对象语法常常结合返回对象的计算属性使用,实现数据响应式的效果。</p> <h3 id="articleHeader12">类绑定的对象语法</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="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="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-text="<span class=&quot;switch&quot; :class=&quot;{switched: gender}&quot; @click=&quot;gender = Math.abs(~-gender)&quot;><br /> <span class=&quot;switch-item-1&quot; data-pseudo-content=&quot;男&quot;></span><br /> <span class=&quot;switch-item-2&quot; data-pseudo-content=&quot;女&quot;></span><br /> </span><br /> var vm = new Vue({<br /> el: '#app',<br /> data: {<br /> gender: 0,<br /> off: true,<br /> nameType: 'Eng'<br /> }<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>&lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/switch" title="浏览关于“switch”的文章" target="_blank" class="tag_link">switch</a>"</span> :<span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"{switched: gender}"</span> <span class="hljs-meta">@click</span>=<span class="hljs-string">"gender = <a href="http://www.js-code.com/tag/Math" title="浏览关于“Math”的文章" target="_blank" class="tag_link">Math</a>.abs(~-gender)"</span>&gt; &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"switch-item-1"</span> data-pseu<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>-content=<span class="hljs-string">"男"</span>&gt;&lt;/span&gt; &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"switch-item-2"</span> data-pseudo-content=<span class="hljs-string">"女"</span>&gt;&lt;/span&gt; &lt;/span&gt; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> vm = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> <span class="hljs-type">Vue</span>({ el: '#app', data: { gender: <span class="hljs-number">0</span>, off: <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>, <a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>Type: <span class="hljs-symbol">'En</span>g' } })</code></pre> <h3 id="articleHeader13">类绑定的数组语法</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="<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="top" data-clipboard-text="</p> <table class=&quot;table&quot; :class=&quot;tableClasses&quot;> <caption> Table Caption<br /> </caption> <thead> <tr> <th scope=&quot;row&quot;>2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope=&quot;row&quot;>3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <p><script> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> vm = <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vue({ el: 'body', data: { table<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>es: ['table-striped', 'table-bordered'] } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"table<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>es"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">caption</span>&gt;</span> Table Caption <span class="hljs-tag">&lt;/<span class="hljs-name">caption</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">thead</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string">"row"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Jacob<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Thornton<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>@fat<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string">"row"</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Larry<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>the Bird<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>@twitter<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</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">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'body'</span>, data: { tableClasses: [<span class="hljs-string">'table-striped'</span>, <span class="hljs-string">'table-bordered'</span>] } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h3 id="articleHeader14">样式绑定的对象语法</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 class=&quot;container&quot;> <h1> 样式绑定对象与数组语法<br /> </h1> <div class=&quot;row&quot;> <div v-bind:style=&quot;{ color: activeColor, fontSize: fontSize + 'px' }&quot;> 颜色:红,字体:30px </div> <hr> <div :style=&quot;styleObject&quot;> 颜色一样红,字体也是30px </div> <hr> <div :style=&quot;[styleObjectA, styleObjectB]&quot;> 颜色继续红,字体保持30px,并且增加了阴影 </div> </p></div> </div> <p><script src=&quot;../js/vue.js&quot;></script><br /> <script> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> vm = <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vue({ el: 'body', data: { activeColor: 'red', fontSize: 30, style<a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a>: { color: 'red', 'font-size': '30px' }, style<a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a>A: { color: 'red', }, style<a href="http://www.js-code.com/tag/Object" title="浏览关于“Object”的文章" target="_blank" class="tag_link">Object</a>B: { fontSize: '30px', boxSha<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>w: '10px 10px 5px #888888' } } }) </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">class</span>=<span class="hljs-string">"container"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span> 样式绑定对象与数组语法 <span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-bind:style</span>=<span class="hljs-string">"{ color: activeColor, fontSize: fontSize + 'px' }"</span>&gt;</span> 颜色:红,字体:30px <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">"styleObject"</span>&gt;</span> 颜色一样红,字体也是30px <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">"[styleObjectA, styleObjectB]"</span>&gt;</span> 颜色继续红,字体保持30px,并且增加了阴影 <span class="hljs-tag">&lt;/<span class="hljs-name">div</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>&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.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>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'body'</span>, data: { activeColor: <span class="hljs-string">'red'</span>, fontSize: <span class="hljs-number">30</span>, styleObject: { color: <span class="hljs-string">'red'</span>, <span class="hljs-string">'font-size'</span>: <span class="hljs-string">'30px'</span> }, styleObjectA: { color: <span class="hljs-string">'red'</span>, }, styleObjectB: { fontSize: <span class="hljs-string">'30px'</span>, boxShadow: <span class="hljs-string">'10px 10px 5px #888888'</span> } } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h3 id="articleHeader15">样式绑定的数组语法</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 v-bind:style=&quot;[styleObjectA, styleObjectB]&quot;></div> <p>styleObjectA: {<br /> color: red<br /> },<br /> styleObjectB: {<br /> fontSize: '30px',<br /> boxShadow: '10px 10px 5px #888'<br /> }<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-meta">&lt;div</span> <span class="hljs-string">v-bind:style="[styleObjectA, styleObjectB]"&gt;&lt;/div&gt;</span> <span class="hljs-attr">styleObjectA</span>: <span class="hljs-string">{</span> <span class="hljs-attr">color</span>: <span class="hljs-string">red</span> <span class="hljs-attr">},</span> <span class="hljs-attr">styleObjectB</span>: <span class="hljs-string">{</span> <span class="hljs-attr">fontSize</span>: <span class="hljs-string">'30px',</span> <span class="hljs-attr">boxShadow</span>: <span class="hljs-string">'10px 10px 5px #888'</span> <span class="hljs-attr">}</span> </code></pre> <hr> <p><strong>++++++++++<a href="http://dunizb.com/obook/" rel="nofollow noreferrer" target="_blank">本人出售本人出售《Vue.js权威指南》,二手价20元!</a>++++++++++</strong><br /><a href="http://dunizb.com/obook/" rel="nofollow noreferrer" target="_blank"><span class="img-wrap"><img data-src="/img/remote/1460000010622900" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="Vue.js权威指南" title="Vue.js权威指南" style="cursor: pointer;"></span></a></p> <p></code></p>

总结

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

Vue.js常用开发知识简要入门(二)

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

Vue.js常用开发知识简要入门(二)

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

80%的人都看过