vue的模板語法？

時間 2021-08-13

標籤 javascript css html 前端 vue java 安全服務器 app 框架欄目 JavaScript 简体版

原文原文鏈接

1、Vue模板語法，默認語法的功能就是前端渲染，前端渲染即便把數據填充到html標籤中。數據（來自服務器） + 模板（html標籤） = 前端渲染（產物是靜態html內容）。前端渲染的三種方式。

　　1）、原生js拼接字符串。基本上就是將數據以字符串的方式拼接到html標籤中。缺點是不一樣開發人員的代碼風格差異很大，隨着業務的複雜，後期的維護變得逐漸困難起來。
　　2）、使用前端模板引擎。它擁有本身的一套模板語法規則。優勢是你們都遵循一樣的規則寫代碼，代碼可讀性明顯提升了，方便後期的維護。缺點是沒有專門提升事件機制。
　　3）、使用vue特有的模板語法。包含差值表達式、指令、事件綁定、屬性綁定、樣式綁定、分支循環結構。javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <!--
         Vue的基本使用步驟
         1）、須要提供標籤用於填充數據。
         2）、引入vue.js庫文件。
         3）、能夠使用vue的語法作功能了。
         4）、把vue提供的數據填充到標籤。使用插值表達式{{}}，做用就是將數據填充到指定的標籤的位置。
         -->
        <!-- {{}}叫作插值表達式，將數據填充到html標籤中，插值表達式支持基本的計算操做。-->
        <div id="app">
            <div>{{msg}}</div>
            <div>{{'I love you ' + msg}}</div>
            <div>{{1 + 2 + 3}}</div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
            // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
            // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
            var vm = new Vue({
                // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
                el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
                // data模型數據，值是一個對象。
                data: { // 用於提供數據。
                    msg: 'hello Vue!'
                }

            });
        </script>
    </body>
</html>

2、Vue模板語法，什麼是指令？

　　1）、什麼是自定義屬性。自定義屬性是區別於標準屬性的，標準屬性是標籤自帶的屬性。
　　2）、Vue指令的本質就是自定義屬性。
　　3）、Vue指令的格式，以v-開始，好比v-cloak。指令的名稱取決於設計者。css

3、Vue模板語法，v-cloak指令用法。

　　1）、插值表達式存在的問題，就是閃動。
　　2）、若是解決該問題，使用v-cloak指令，能夠解決閃動的問題。
　　3）、解決該問題的原理，先隱藏，替換好值以後再顯式最終的值。html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>

        <style type="text/css">
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>

        <!--
            v-cloak指令的用法。
            1）、須要提升樣式。
                [v-cloak] {
                  display: none;
                }
            2）、在插值表達式所在的標籤中添加v-cloak指令。
            3)、原理，先經過樣式隱藏內容，而後在內存中進行值的替換，替換好以後再顯式最終的結果，此時就不會顯式{{}}這種閃動效果。
        -->
        <div id="app" v-cloak>
            <div>{{msg}}</div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
            // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
            // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
            var vm = new Vue({
                // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
                el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
                // data模型數據，值是一個對象。
                data: { // 用於提供數據
                    msg: 'hello Vue!'
                }

            });
        </script>
    </body>
</html>

4、Vue模板語法，v-text、v-html、v-pre數據綁定指令用法。

　　1）、v-text填充純文本。特色1、相比較插值表達式更加簡潔。不存在閃動問題，比插值表達式好使的哦。
　　2）、v-html填充html片斷。特色1、存在安全問題。特色2、本網站內部數據能夠使用，來自第三方數據不能夠用。
　　3）、v-pre填充原始信息。特色1、顯式原始信息，跳過編譯過程，分析編譯過程。前端

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <div>{{msg}}</div>
            <!-- v-text沒有閃動問題的，用戶體驗更好，比插值表達式更加好使 -->
            <div v-text="msg"></div>
            <!-- 內容按普通 HTML 插入 - 不會做爲 Vue 模板進行編譯，在網站上動態渲染任意 HTML 是很是危險的，由於容易致使 XSS *** -->
            <div v-html="msg2"></div>
            <!-- 顯式原始信息，跳過編譯過程(分析編譯過程) -->
            <div v-pre>{{msg}}</div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
            // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
            // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
            var vm = new Vue({
                // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
                el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
                // data模型數據，值是一個對象。
                data: { // 用於提供數據
                    msg: 'hello Vue!',
                    msg2: '<h1>hello Vue!</h1>', //能夠使用v-html標籤展現html代碼。
                }

            });
        </script>
    </body>
</html>

5、Vue模板語法，雙向數據綁定。

MVVM設計思想，最只要的理念就是分治，把不一樣的功能代碼放到不一樣的模塊，經過特定的方式創建關聯。
　　1）、M指的是Model，就是data裏面的數據，提供數據的。Model經過VM的Data Bindings數據綁定View。
　　2）、V指的是View，就是所寫的模板Dom元素，提供頁面展現效果的。View經過VM的DOM Listeners事件監聽Model。
　　3）、VM指的是View-Model，就是控制邏輯，實現控制邏輯將二者結合到一塊兒。vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <div>{{msg}}</div>
            <!-- 主要是用於表單輸入域中。 -->
            <!-- 雙向數據綁定分析，方向1、頁面影響數據，方向2、數據影響頁面。 -->
            <!-- 用戶修改頁面內容數據會改變，數據改變了影響插值表達式的內容頁面改變。 -->
            <div>
                <input type="text" v-model="msg" />
            </div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代碼運行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue代碼通過Vue框架變成了原生js代碼。
            // 建立一個Vue的變量vm，存儲Vue的實例，提供一個參數，是對象形式的，而且這個對象包含兩個重要的屬性el、data。
            // Vue所作的工做也就是把數據填充把頁面的標籤裏面。
            var vm = new Vue({
                // el元素的掛載位置，值能夠是CSS選擇器或者DOM元素，掛載就是將數據關聯到頁面的某個標籤上。
                el: '#app', // el是告訴Vue把數據填充到那個位置，這裏經過id選擇器進行綁定到那個標籤。
                // data模型數據，值是一個對象。
                data: { // 用於提供數據
                    msg: 'hello Vue!',
                }

            });
        </script>
    </body>
</html>