Vue.js基础语法小结

绝地灬酷狼 2024-02-18 23:33 69阅读 0赞

Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。

以下代码是Vue.js最简单的例子， 当 input 中的内容变化时，p 节点的内容会跟着变化。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> </td> 
   <td> <p><code>&lt;!-- html --&gt;</code></p> <p><code>&lt;div id=</code><code>"demo"</code><code>&gt;</code></p> <p><code>&nbsp;</code><code>&lt;p&gt;{ {message}}&lt;/p&gt;</code></p> <p><code>&nbsp;</code><code>&lt;input v-model=</code><code>"message"</code><code>&gt;</code></p> <p><code>&lt;/div&gt;</code></p> <p><code>new</code> <code>Vue({ </code></p> <p><code>&nbsp;</code><code>el: </code><code>'#demo'</code><code>,</code></p> <p><code>&nbsp;</code><code>data: { </code></p> <p><code>&nbsp;</code><code>message: </code><code>'Hello Vue.js!'</code></p> <p><code>&nbsp;</code><code>}</code></p> <p><code>})</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**vue.js的基础语法**

**插入文本**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;span&gt;Message: { { text }}&lt;/span&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**插入html格式的文本，在页面显示为html的格式**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;span&gt;Message: { { { html }}}&lt;/span&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**内容不跟随data的变化**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;span&gt;Message: { { * text }}&lt;/span&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**属性上绑定数据**

**在\{ \{\}\}中使用js表达式**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>{ { number + 1 }}</code></p> <p><code>{ { ok ? </code><code>'YES'</code> <code>: </code><code>'NO'</code> <code>}}</code></p> <p><code>{ { message.split(</code><code>''</code><code>).reverse().join(</code><code>''</code><code>) }}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**在\{ \{\}\}中使用js语句**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>{ { </code><code>var</code> <code>a = 1 }}</code></p> <p><code>{ { </code><code>if</code> <code>(ok) { </code><code>return</code> <code>message } }}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**if指令**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>&lt;p v-</code><code>if</code><code>=</code><code>"greeting"</code><code>&gt;Hello!&lt;/p&gt;</code></p> <p><code>这里 v-</code><code>if</code><code>指令将根据表达式 greeting值的真假删除/插入 &lt;p&gt;元素。</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**href指令**

**click指令**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;a v-on:click=</code><code>"doSomething"</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**回车指令**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;input v-model=</code><code>"newTodo"</code> <code>v-on:keyup.enter=</code><code>"addTodo"</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**缩略写法**

v-bind

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </td> 
   <td> <p><code>&lt;!-- 完整语法 --&gt;</code></p> <p><code>&lt;a v-bind:href=</code><code>"url"</code><code>&gt;&lt;/a&gt;</code></p> <p><code>&lt;!-- 缩写 --&gt;</code></p> <p><code>&lt;a :href=</code><code>"url"</code><code>&gt;&lt;/a&gt;</code></p> <p><code>&lt;!-- 完整语法 --&gt;</code></p> <p><code>&lt;button v-bind:disabled=</code><code>"someDynamicCondition"</code><code>&gt;Button&lt;/button&gt;&lt;!-- 缩写 --&gt;</code></p> <p><code>&lt;button :disabled=</code><code>"someDynamicCondition"</code><code>&gt;Button&lt;/button&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

v-on

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>&lt;!-- 完整语法 --&gt;</code></p> <p><code>&lt;a v-on:click=</code><code>"doSomething"</code><code>&gt;&lt;/a&gt;</code></p> <p><code>&lt;!-- 缩写 --&gt;</code></p> <p><code>&lt;a @click=</code><code>"doSomething"</code><code>&gt;&lt;/a&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**总结**

模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。