Apakah kegunaan templat vuejs?

Templat vuejs secara asasnya menetapkan bentuk interaksi dan gaya UI yang harus dihadapi oleh sistem, dan mengikut set templat ini untuk mereka bentuk dan menambah baik fungsinya ialah: 1. Bertanggungjawab untuk pencegahan XSS; . Menyokong penggunaan semula serpihan; 3. Menyokong pemprosesan output data;

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Oleh kerana Vue.js ialah teknologi yang dibina pada lapisan paparan, sistem templat Vue.js adalah salah satu fungsi yang sangat penting. Untuk halaman paparan yang dipaparkan kepada pengguna, adalah perlu untuk memberikan pengalaman dan prestasi pengguna yang terbaik, dan Vue.js menyediakan sistem templat yang sangat mudah dan terpakai, menjadikannya popular dan popular di kalangan pembangun.

1. Apakah itu sistem templat

Sebarang aplikasi yang digunakan untuk penulisan Web atau berorientasikan pengguna mesti mempunyai templat. Templat pada asasnya menetapkan bentuk interaksi dan gaya UI yang sistem harus berhadapan dengan pengguna, dan mengikuti set templat ini untuk mereka bentuk dan menambah baik fungsi juga merupakan corak asas pembangunan perisian.

Walau bagaimanapun, hampir mustahil untuk menulis satu halaman untuk semua halaman berdasarkan templat. Kerana sistem bukan sahaja harus mempunyai beberapa halaman statik, tetapi apabila kandungan dan pengguna meningkat, halamannya harus tidak terhingga. Untuk menyelesaikan masalah ini, teknologi baharu muncul—enjin templat. Melalui data dan kandungan yang berbeza, ditambah dengan templat (format) bersatu, anda boleh mendapatkan halaman tersuai milik pengguna atau kandungan, yang bukan sahaja mengurangkan banyak pengekodan, tetapi juga sangat memudahkan kemungkinan kemas kini gaya masa hadapan.

Definasi enjin templat yang ketat adalah untuk memasukkan data aksara templat dan mendapatkan rentetan yang diberikan (halaman) Dari segi pelaksanaan, daripada penggantian biasa kepada input rentetan ejaan terus kepada analisis AST, terdapat pelbagai cara untuk mengeluarkan kandungan halaman, tetapi semuanya serupa dalam definisi.

Jika pembaca telah mempelajari JavaScript atau bahasa pembangunan web lain, mereka mesti mencuba atau memaparkan kandungan halaman HTML pada bahagian belakang dan mengembalikannya ke halaman hujung hadapan, untuk mengemas kini halaman pengguna. Tetapi menggantikan innerHtml dengan rentetan yang diberikan adalah kaedah kemas kini yang sangat tidak cekap. Enjin templat sebegitu bukan lagi pilihan yang baik dalam senario bahagian hadapan tulen hari ini.

Mengapa ini? Kerana sumber pelayan bahagian belakang adalah terhad, dan pemprosesan data ditindih apabila bilangan pengguna meningkat Setiap operasi pengguna dan pemaparan halaman menggunakan pelayan. sebilangan kecil operasi pengguna mungkin tidak menyebabkan pelayan menjadi beku, tetapi apabila terdapat beribu-ribu atau lebih banyak pengguna, permintaan rangkaian sahaja boleh menyebabkan pelayan menjadi tidak bertindak balas atau malah ranap (rujuk perjalanan Festival Musim Bunga). Dan jika rendering halaman diletakkan pada bahagian pengguna (front-end), dan hanya ada satu pengguna, masa rendering berpuluh-puluh milisaat bukanlah halangan sama sekali berbanding dengan kelewatan permintaan, jadi ia bukan sahaja boleh meningkatkan pengalaman pengguna, tetapi juga mengurangkan tekanan pada pelayan.

Vue.js ialah rangka kerja jenis MVVM Vue.js menggunakan enjin pengikat paparan dipacu data Melalui status ikatan bahagian hadapan dan belakang, diketahui bahawa data bahagian belakang dikemas kini , dan paparan bahagian hadapan yang berkaitan juga akan berubah pada masa yang sama.

Vue.js menyediakan pengguna dengan sistem templat yang begitu hebat, yang merupakan salah satu sebab rangka kerja hadapan seperti Vue.js begitu popular.

Sebab mengapa anda perlu menggunakan templat adalah seperti berikut

Enjin templat bahagian hadapan mesti bertanggungjawab untuk mencegah XSS;

2. Enjin templat bahagian hadapan mesti menyokong penggunaan semula serpihan; >4. Enjin templat bahagian hadapan mesti menyokong data dinamik ;

5 Enjin templat bahagian hadapan mesti disepadukan rapat dengan proses tak segerak;

2. . Sintaks templat Vue.js

Vue.js Ia menggunakan sintaks templat berasaskan HTML, membenarkan pembangun mengikat DOM secara deklaratif kepada data contoh Vue.js yang mendasari. Vue.js ialah sistem yang membenarkan pembangun mengisytiharkan data ke dalam DOM menggunakan sintaks templat ringkas.

Digabungkan dengan sistem tindak balas, apabila keadaan aplikasi berubah, Vue.js boleh mengira dengan bijak kos minimum untuk memaparkan semula komponen dan menggunakannya pada operasi DOM.

2.1. Output teks

Bentuk pengikatan data yang paling biasa ialah interpolasi teks menggunakan sintaks Misai (double pendakap), seperti berikut:

Apabila atribut msg pada objek data terikat berubah, kandungan di titik interpolasi akan dikemas kini. Tetapi melalui arahan

, pembangun juga boleh melakukan interpolasi sekali.

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

v-once2.2. Output HTML tulen

Kurungan kerinting berganda akan mentafsir data sebagai teks biasa dan bukannya kod HTML. Untuk mengeluarkan kod HTML sebenar, pembangun perlu menggunakan arahan v-html:

<div v-html="rawHtml"></div>

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

<template>
  <div>
    <label>直接输出的模式：</label>
    <div>{{msg}}</div>
    <label>解析后输出的模式：</label>
    <div v-html="msg"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: &#39;<div style="font-size: 30px;color:red">helloWorld</div>&#39;
    }
  }
}
</script>

2.3、JavaScript表达式

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

{{number + 1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<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方法。

'属性':{
      get:function(){},
      set:function(newValue){
         dosomething
      }
  }

3.2、观察属性

watch:{
   '属性':function(par){
      dosomething
  }
}

相关推荐：《vue.js教程》

Atas ialah kandungan terperinci Apakah kegunaan templat vuejs?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!