首頁 > 文章 > web前端 > vuejs模板什麼用

vuejs模板什麼用

青灯夜游原創: 2021-09-18 18:49:461670瀏覽

vuejs模板從根本上規定了一個系統應以怎樣的交互形式和UI風格面向用戶，而遵循這套模板進行設計和完善功能；其作用為：1、擔負XSS的防範； 2、支援片段的複用；3、支援資料輸出是的處理；4、支援動態資料；5、與非同步流程嚴密結合。

vuejs模板什麼用

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

因為Vue.js是建立在視圖層的技術，所以Vue.js的模板系統是非常重要的功能之一。對於展現給使用者的視圖頁面，需要提供最佳的使用者體驗和效能，而Vue.js提供了非常方便和適用的範本系統，使得它受到了廣大開發者的追棒和歡迎。

一、什麼是模板系統

任何一個用於Web編寫或面向使用者的應用程式必定有模板的存在。模板從根本上規定了一個系統應以怎樣的互動形式和UI風格面向使用者，而遵循這套模板進行設計和完善功能，也是軟體開發的基本模式。

但是，如果對所有的頁面都根據模板進行單一頁面的編寫，則幾乎是不可能的。因為一個系統不應該只有幾個靜態頁面，隨著內容和使用者的增加，其頁面應該是無限的。而為了解決這個問題，便出現了新的技術——模板引擎。透過不同的資料和內容，加上一個統一的模板（格式），就可以得到一個屬於一個用戶或者一個內容的定制頁面，不僅減少了大量的編碼量，也極大地方便了將來可能對於樣式的更新換代。

嚴格的模板引擎的定義是，輸入模板字符數據，得到渲染過的字符串（頁），實現上，從正則替換的方式到拼寫字符串直接輸入，再到AST解析，存在各種輸出頁面內容的方式，但從定義上來說都是差不多的。

如果讀者學習過JavaScript或其它Web開發語言，一定要嘗試或在後端渲染出HTML頁面內容，並回到前端頁面，透過這樣的手段來進行使用者頁面的更新。但是用渲染出來的字串替換innerHtml是一個效率很低的更新方式。這樣的模板引擎在如今純前端情境下已經不再是好的選擇。

這是為什麼呢，因為後端伺服器的資源是有限的，並且對資料的處理是隨著使用者數量的增加而疊加的，使用者的每一次操作，頁面渲染都是在消耗伺服器資源，少量的用戶操作或許不會導致伺服器卡頓，但是當出現成千上萬甚至更多的用戶是，可能僅是網絡請求就會讓伺服器無響應甚至宕機（參考春運）。而如果將頁面的渲染放在用戶端（前端），用戶只有一個，幾十毫秒的渲染時間跟請求延遲比起來根本算不上瓶頸，所以既可以提高用戶的體驗，同時也減輕了伺服器的壓力。

Vue.js作為MVVM類型的框架，Vue.js採用的是資料驅動視圖綁定引擎，透過前後端的bind狀態，已知後端的資料更新，前端相關的顯示也會同時改變。

Vue.js為使用者提供了這樣的一套強大的模板系統，這也是為什麼Vue.js等前端框架如此火爆的原因之一。

為什麼要使用範本的原因有以下幾點

1、前端範本引擎要擔負XSS的防範;

2、前端模板引擎要支援片段的複用；

3、前端模板引擎要支援資料輸出是的處理；

4、前端模板引擎要支援動態數據;

5、前端範本引擎要與非同步流程嚴密結合；

#二、Vue.js範本語法

Vue.js使用了基於HTML的模板語法，允許開發者聲明式地將DOM綁定至底層的Vue.js實例資料。

Vue.js是一個允許開發者採用簡潔的範本語法來宣告式地將資料渲染進DOM的系統。

結合回應系統，在應用狀態改變時，Vue.js能夠聰明地計算出重新渲染元件的最小代價並應用到DOM操作上。

2.1、文字輸出

資料綁定最常見的形式就是使用Mustache語法（雙大括號）的文字插值，如下：

<span>Message:{{ msg }}</span>
<span v-once>这个将不会改变:{{ msg }}</span>

無論何時，綁定的資料物件上msg屬性改變，插值處的內容都會更新。但透過v-once指令，開發者也能進行一次性地插值。

2.2、純HTML輸出

#雙大括號會將資料解釋為普通文本，而非HTML程式碼。為了輸出真正的HTML程式碼，開發者需要使用v-html指令：

5de0f04cfff460c993d059c2702ae5a916b28748ea4df4d9c2150843fecfba68

这个div的内容将会被替换成为属性值rawHtml，直接作为HTML会忽略解析属性值中的数据绑定。开发者不能使用v-html来复合局部模板，因为Vue.js不是基于字符串的模板引擎。反之，对于用户界面（UI），组件更适合作为可重用和可组合的基本单位。

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    2e1cf0710519d5598b1f0f14c36ba674直接输出的模式：8c1ecd4bb896b2264e0711597d40766c
    dc6dce4a544fdca2df29d5ac0ea9906b{{msg}}16b28748ea4df4d9c2150843fecfba68
    2e1cf0710519d5598b1f0f14c36ba674解析后输出的模式：8c1ecd4bb896b2264e0711597d40766c
    cfe05ddd0349085145840ec346b4bae816b28748ea4df4d9c2150843fecfba68
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  data () {
    return {
      msg: '6d587d38616572144abecc5790e4dc77helloWorld16b28748ea4df4d9c2150843fecfba68'
    }
  }
}
2cacc6d41bbb37262a98f745aa00fbf0

2.3、JavaScript表达式

Vue.js都提供了JavaScript表达式支持。

{{number + 1}}
{{ok?&#39;YES&#39;:&#39;NO&#39;}}
{{message.split(&#39;&#39;).reverse().join(&#39;&#39;)}}
<div v-bind:id="&#39;list-&#39;+ id"></div>

完整代码：

<template>
  <div>
    <label>数字1：</label>
    <input v-model="int1"/>
    <br/>
    <br/>
    <label>数字2：</label>
    <input v-model="int2"/>
    <br/>
    <label> 展示JavaScript表达式，您输入的数字加和为</label>
    {{parseInt(int1)+parseInt(int2)}}
  </div>
</template>
<script>
export default {
  data () {
    return {
      int1: 0,
      int2: 0
    }
  }
}
</script>

注意：每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1}}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if(ok) {return message }}}

2.4、指令参数

指令(Directives)是带有v-前缀的特殊属性。指令属性的值预期是单个JavaScript表达式（v-for是个例外情况）。指令的职责是当表达式的值改变是，将其产生的连带影响，响应式地作用于DOM。比如

<p v-if="seen">现在出现啦！</p>

有一些指令能够接收一个参数，在指令名称之后以冒号表示。比如v-bind:用于响应式地更新html属性：

<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 在这里href是参数，告知v-bind指令将该元素的href属性与表达式URL的值进行绑定 -->

v-on:它用于监听DOM事件：

<a v-on:click="doSomething">
<!-- 缩写 -->
<a @click="doSomething">

修饰符（Modifiers）是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault();

<form v-on:submit.prevent="onSubmit"></form>

三、计算属性和观察者属性

为了让模版的内容变得更加干净和整洁，同时不会影响代码和内容的可用性，Vue.js提出了计算属性和观察者。

3.1、计算属性

模板内的表达式非常便利，但这类表达式实际上多用于简单运算。因为在模板中放入太多的逻辑会让模板过重且难以维护。

跟它的区别还有就是有“缓存”效果，多次访问计算属性会立即返回之前的计算结果，而不是再次执行函数。
计算属性默认只有getter方法，但在需要时开发者也可以提供setter方法。

&#39;属性&#39;:{
      get:function(){},
      set:function(newValue){
         dosomething
      }
  }

3.2、观察属性

watch:{
   &#39;属性&#39;:function(par){
      dosomething
  }
}

vuejs模板什麼用

一、什麼是模板系統

#二、Vue.js範本語法

三、计算属性和观察者属性

相關文章