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

Slog10_支配vue框架之模版语法 v-bind

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <ul> <li>ArthurSlog</li> <li>SLog-10</li> <li>Year·1</li> <li>Guangzhou·China</li> <li>July 15th 2018</li> </ul> <p><span class="img-wrap"><img data-src="/img/remote/1460000016043562?w=128&amp;h=130" src="/img/remote/1460000016043562?w=128&amp;h=130" alt="关注微信公众号“ArthurSlog”" title="关注微信公众号“ArthurSlog”" style="cursor: pointer; display: inline;"></span></p> <ul> <li><a href="https://github.com/BlessedChild/ArthurSlog" rel="nofollow noreferrer" target="_blank">GitHub</a></li> <li><a href="https://juejin.im/user/59f2a424f265da432f305c66/posts" rel="nofollow noreferrer" target="_blank">掘金主页</a></li> <li><a href="https://www.jianshu.com/u/b9ebe10f0534" rel="nofollow noreferrer" target="_blank">简书主页</a></li> <li><a href="https://segmentfault.com/u/arthurslog/articles">segmentfault</a></li> </ul> <p>生活在99%以上的信息不是真实的世界 生活中99%以上的信息指向了剩下的信息不是真实的</p> <hr> <h3 id="articleHeader0">开发环境MacOS(High Sierra 10.13.5)</h3> <h4>课前预习</h4> <ul> <li>本篇是 《支配vue框架系列》的第二篇</li> <li>这里提醒一下大家,请一定要参考官方文档,官方的母语版本!!!看中文翻译容易被误导,为什么呢?人的水平参差不齐,比如 attributes 这个单词,有的翻译成属性?有的翻译成特性?人为的制造混乱。所以坚决坚持,只看原版的官方文档!除非作者就是中文的大家!</li> <li>时间是有限的,技术更新是快速的,请迈开脚步 一昧的等待,等来的是被淘汰</li> <li>上一篇,讲到了 v-html,vue的模版语法,用来干什么的?就是让他 vue 实例的数据可以和 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>(Document Object Model) 进行数据绑定。什么是 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> ?在比较靠谱的<a href="https://www.w3schools.com/js/js_htmldom.asp" rel="nofollow noreferrer" target="_blank">w3cschool</a>里,是这么解释 <a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a> 的:</li> </ul> <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="“HTML DOM” is a standard. With the &quot;HTML DOM&quot;, JavaScript can access and change all the elements of an HTML document." title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code class="txt">“<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a> DOM” is a standard. <span class="hljs-keyword">With</span> the <span class="hljs-string">"HTML DOM"</span>, JavaScript can <span class="hljs-keyword">access</span> <span class="hljs-keyword">and</span> <span class="hljs-keyword">change</span> all the elements <span class="hljs-keyword">of</span> an HTML document.</code></pre> <h5>本篇讲的是 “<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> DOM”, 而 ”DOM“ 指代的范围就比较广了,更多信息请参考<a href="https://www.w3schools.com/js/js_htmldom.asp" rel="nofollow noreferrer" target="_blank">w3cschool</a><br /> </h5> <ul> <li>上面简单扼要的说了 ”<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> DOM“ 能做什么:有了 ”HTML DOM“, javascript 可以访问和改变 HTML文件 的 elements(elements指的就是 &lt;body&gt; &lt;html&gt; 对象) ,当然了,对象就会有 attributes 和 values 等,举个栗子:</li> </ul> <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="<body id=&quot;b1&quot;></body> //这里 id 就是 <body> 的 attributes</p> <div> Hello ArthurSlog</div> <p> //这里 &quot;Hello ArthurSlog&quot; 就是 </p> <div> 的 values,String格式的值" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="txt"><span class="hljs-tag">&lt;<span class="hljs-name">body</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"b1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> //这里 id 就是 <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> 的 attributes <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>&gt;</span> Hello ArthurSlog<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> //这里 "Hello ArthurSlog" 就是 <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> 的 values,String格式的值</code></pre> <ul> <li>还要注意的地方是,“HTML DOM” 里的 elements 的值是我们可以控制的,这也就是 javascript 和 vue(vue也是javacript)的本职工作!而 attributes 是标准,是要查询标准文档的,<a href="https://www.w3schools.com/tags/ref_attributes.asp" rel="nofollow noreferrer" target="_blank">HTML Attributes</a> 与 elements相关联,举个栗子:</li> </ul> <p>Attribute| Belongs to| Description</p> <ul> <li> <table></table> </li> </ul> <p>accept| &lt;input&gt;| Specifies the types of files that the server accepts (only for type="file")<br />accept-charset| &lt;form&gt;| Specifies the character encodings that are to be used for the form submission<br />...| ...| ...</p> <ul> <li>其中,包含有 <a href="https://www.w3schools.com/tags/ref_standardattributes.asp" rel="nofollow noreferrer" target="_blank">全局的Attribute</a>(可以直接访问到的 Attribute):</li> </ul> <p>Attribute| Description</p> <ul> <li> <table></table> </li> </ul> <p>accesskey| Specifies a shortcut key to activate/focus an element<br />class| Specifies one or more classnames for an element (refers to a class in a style sheet)</p> <ul> <li>小结一下:”HTML DOM“ 如下所说的:</li> </ul> <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="In other words: The &quot;HTML DOM&quot; is a standard for how to get, change, add, or delete HTML elements." title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code class="txt" style="word-break: break-word; white-space: initial;">In other words: The <span class="hljs-string">"HTML DOM"</span> <span class="hljs-keyword">is</span> a standard <span class="hljs-keyword">for</span> how to <span class="hljs-keyword">get</span>, change, add, or <span class="hljs-keyword">de<a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a>e</span> HTML elements.</code></pre> <h5>学会用英文去理解,触碰最本质的信息</h5> <h4>需要的信息和信息源:</h4> <ul> <li> <a href="https://cn.vuejs.org/v2/guide/syntax.html#%E7%89%B9%E6%80%A7" rel="nofollow noreferrer" target="_blank">vue框架模版语法</a>(<a href="http://www.js-code.com/tag/template" title="Template" target="_blank">Template</a> Syntax)</li> <li> <a href="https://vuejs.org/v2/guide/syntax.html" rel="nofollow noreferrer" target="_blank">vue.js API</a>(<a href="https://vuejs.org/v2/api/index.html)" rel="nofollow noreferrer" target="_blank">https://vuejs.org/v2/api/inde...</a> </li> <li><a href="https://www.w3schools.com/js/js_htmldom.asp" rel="nofollow noreferrer" target="_blank">W3CSchool HTML DOM手册</a></li> <li><a href="https://www.w3schools.com/tags/ref_attributes.asp" rel="nofollow noreferrer" target="_blank">W3CSchool HTML Attributes Reference手册</a></li> <li><a href="https://www.w3schools.com/tags/tag_comment.asp" rel="nofollow noreferrer" target="_blank">W3CSchool HTML Tags</a></li> <li><a href="https://koajs.cn/" rel="nofollow noreferrer" target="_blank">Koa官方手册</a></li> <li><a href="https://github.com/koajs/static" rel="nofollow noreferrer" target="_blank">Koa-static</a></li> </ul> <h3 id="articleHeader1">开始编码:</h3> <ul> <li>切换至桌面路径</li> </ul> <blockquote><p>cd ~/Desktop</p></blockquote> <ul> <li>创建一个新文件夹</li> </ul> <blockquote><p>mkdir <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_vue_<a href="http://www.js-code.com/tag/template" title="Template" target="_blank">Template</a>Syntax_v-bind_learningload</p></blockquote> <ul> <li>切换至新建的文件夹路径下</li> </ul> <blockquote><p>cd <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_vue_<a href="http://www.js-code.com/tag/template" title="浏览关于“Template”的文章" target="_blank" class="tag_link">Template</a>Syntax_v-bind_learningload</p></blockquote> <ul> <li>使用npm指令初始化nodejs项目环境,一路回车,完成初始化</li> </ul> <blockquote><p>npm init</p></blockquote> <ul> <li>安装 koa 和 kao-static</li> </ul> <blockquote><p>sudo npm install koa koa-static</p></blockquote> <ul> <li>需要管理员权限,输入密码</li> <li>在当前路径下创建 index.js 和 index.html 这两个文件,其中 index.js 实现了一个静态web服务器:</li> </ul> <p>index.html</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><br /> <head><br /> <meta charset=&quot;utf-8&quot;><br /> <!-- 开发环境版本,包含了有帮助的命令行警告 --><br /> <script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;></script><br /> <title>ArthurSlog</title><br /> </head><br /> <body></p> <div id=&quot;app&quot;> <button v-bind:disabled=&quot;Output&quot;>Hello ArthurSlog</button> </div> <p> <script> new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app', data: { Output: true } }) </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</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-comment">&lt;!-- 开发环境版本,包含了有帮助的命令行警告 --&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">title</span>&gt;</span>ArthurSlog<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">button</span> <span class="hljs-attr">v-bind:disabled</span>=<span class="hljs-string">"Output"</span>&gt;</span>Hello ArthurSlog<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">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: { Output: <span class="hljs-literal">true</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>index.js</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="const serve = require('koa-static'); const Koa = require('koa'); const app = new Koa(); // $ GET /package.json app.use(serve('.')); app.listen(3000); console.log('listening on port 3000');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> serve = <span class="hljs-built_in">require</span>(<span class="hljs-string">'koa-static'</span>); <span class="hljs-keyword">const</span> Koa = <span class="hljs-built_in">require</span>(<span class="hljs-string">'koa'</span>); <span class="hljs-keyword">const</span> app = <span class="hljs-keyword">new</span> Koa(); <span class="hljs-comment">// $ GET /package.json</span> app.use(serve(<span class="hljs-string">'.'</span>)); app.listen(<span class="hljs-number">3000</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'listening on port 3000'</span>);</code></pre> <ul> <li>现在,切换至 ~/Desktop/node_vue_TemplateSyntax_v-bind_learningload 路径下</li> </ul> <blockquote><p>cd ~/Desktop/node_vue_TemplateSyntax_v-bind_learningload</p></blockquote> <ul> <li>启动静态web服务器</li> </ul> <blockquote><p>node index.js</p></blockquote> <ul> <li>打开浏览器,地址栏输入 127.0.0.1:3000, 回车,正常执行会出来一个button,但是这个button无法接受点击</li> <li>因为,在 index.html 里我们使用 vue.js模版语法,其中用到了 v-bind:</li> </ul> <p>index.html</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="<body></p> <div id=&quot;app&quot;> <button v-bind:disabled=&quot;Output&quot;>Hello ArthurSlog</button> </div> <p> <script> new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app', data: { Output: true } }) </script><br /> </body>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><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">button</span> <span class="hljs-attr">v-bind:disabled</span>=<span class="hljs-string">"Output"</span>&gt;</span>Hello ArthurSlog<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">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data: { Output: <span class="hljs-literal">true</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></code></pre> <ul> <li>关键点在:</li> </ul> <p>index.html</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="<button v-bind:disabled=&quot;Output&quot;>Hello ArthurSlog</button></p> <p><script> new Vue({ el: '#app', data: { Output: true } }) </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">button</span> <span class="hljs-attr">v-bind:disabled</span>=<span class="hljs-string">"Output"</span>&gt;</span>Hello ArthurSlog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data: { Output: <span class="hljs-literal">true</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <ul> <li>看到 button 的 Attributes--“disabled”,“disabled” 与 “Output” 相关联了</li> </ul> <p>index.html</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="<button v-bind:disabled=&quot;Output&quot;>Hello ArthurSlog</button>" 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">button</span> <span class="hljs-attr">v-bind:disabled</span>=<span class="hljs-string">"Output"</span>&gt;</span>Hello ArthurSlog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre> <ul> <li>这下我们可以通过 javascript,控制 “Output” 的值,进而控制 button 的 Attributes--“disabled”,“disabled” 的值,进而影响了 button 是否接受点击</li> </ul> <p>index.html</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="<script> new Vue({ el: '#app', data: { Output: true } }) </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>&gt;</span><span class="actionscript"> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data: { Output: <span class="hljs-literal">true</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <ul> <li>关键的地方在于,在 HTML 中,elements(元素,指&lt;button&gt;,&lt;textarea&gt;,&lt;input&gt; 等等)的 Attribute,具体参考<a href="https://www.w3schools.com/tags/ref_attributes.asp" rel="nofollow noreferrer" target="_blank">HTML Attribute Reference</a> </li> <li>现在,把 script 里,"Output" 的值改为 false:</li> </ul> <p>index.html</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><br /> <head><br /> <meta charset=&quot;utf-8&quot;><br /> <!-- 开发环境版本,包含了有帮助的命令行警告 --><br /> <script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;></script><br /> <title>ArthurSlog</title><br /> </head><br /> <body></p> <div id=&quot;app&quot;> <button v-bind:disabled=&quot;Output&quot;>Hello ArthurSlog</button> </div> <p> <script> new Vue({ el: '#app', data: { Output: false } }) </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</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-comment">&lt;!-- 开发环境版本,包含了有帮助的命令行警告 --&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">title</span>&gt;</span>ArthurSlog<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">button</span> <span class="hljs-attr">v-bind:disabled</span>=<span class="hljs-string">"Output"</span>&gt;</span>Hello ArthurSlog<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">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data: { Output: <span class="hljs-literal">false</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> <ul> <li>现在,切换至 ~/Desktop/node_vue_TemplateSyntax_v-bind_learningload 路径下</li> </ul> <blockquote><p>cd ~/Desktop/node_vue_TemplateSyntax_v-bind_learningload</p></blockquote> <ul> <li>启动静态web服务器</li> </ul> <blockquote><p>node index.js</p></blockquote> <ul> <li>打开浏览器,地址栏输入 127.0.0.1:3000, 回车,正常执行会出来一个button,但是这个button已经可以接受点击了</li> <li>至此,我们了解了 vue框架 的模版语法中 v-bind 指令的使用,v-bind的其他用法参考 <a href="https://vuejs.org/v2/api/index.html#v-bind" rel="nofollow noreferrer" target="_blank">vue官方API文档</a>。</li> </ul> <hr> <h3 id="articleHeader2">欢迎关注我的微信公众号 ArthurSlog</h3> <p><span class="img-wrap"><img data-src="/img/remote/1460000016043562?w=128&amp;h=130" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="ArthurSlog" title="ArthurSlog" style="cursor: pointer;"></span></p> <h3 id="articleHeader3">如果你喜欢我的文章 欢迎点赞 留言</h3> <h3 id="articleHeader4">谢谢</h3> <p></code></p>

总结

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

Slog10_支配vue框架之模版语法 v-bind

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

Slog10_支配vue框架之模版语法 v-bind

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

80%的人都看过