使用VUE的准備工作，以及顯示文本

需應用一個文件

<script src="~/Scripts/vue.js"></script>

VUE的js必要文件

vue在js中的代碼展示，以及js代碼的講解

var vm=new Vue({
　　　　　//el表示關聯的的位置
        el: "#text",//#text表示找到ID為text的位置，也就是原生js的選擇器
　　　　//數據 {{msg}}對應的數據 data: { msg: "Hello Vue", msg1: "<h1>Html</h1>", info:"你好" } })

 

VUE顯示的幾種方式

 @*V-text無閃動問題  推薦使用v-text給用戶更好的體驗*@
<div id="text">
    @*插入文本，比較方便快捷*@
    <div v-text="msg"></div>
    @*插入HTML片段，比較危險，容易導致xss攻擊*@
    <div v-html="msg1"></div>
    @* v-pre 顯示原始數據，跳過編譯命令*@
    <div v-pre>{{msg}}</div>
    @*v-once 顯示的內容只顯示一次，過后就不具有響應式的效果
    應用場景：顯示的信息后序不需要再修改，就可以使用v-once
    好處是，提高性能，不需要監聽屬性*@
    <div v-once>{{info}}</div>
</div>

這里對應上面HTML代碼顯示出的效果

 

 

VUE解決閃動問題

<style>
        /*解決數據動態綁定時，顯示出源碼，解決閃動問題

         背后的原理就是：先通過樣式隱藏源碼內容，然后再內存中進行值的替換，替換號之后再顯示最終的結果
        */
        [v-cloak]{
            display:none;
        }
    </style>

<!-- 定義一個vue的管理區塊，（MVVM中的View） -->
    @*對應上面的樣式style 進行數據綁定無顯示源碼*@
    @*v-cloak解決閃動問題*@
    <div v-cloak id="app">
        <button v-on:click="getApiData">點擊得到數據</button>
        <table class="table table-bordered">
            <tr>
                <td>姓名</td>
                <td>手機號</td>
                <td>詳細地址</td>
                <td>省份</td>
                <td>市區</td>
            </tr>
            <tr v-for="item in name">
                <td>{{item.BGM_CNEE_Name}}</td>
                <td>{{item.BGM_CNEE_Phone}}</td>
                <td>{{item.BGM_CNEE_Site}}</td>
                <td>{{item.BGM_Province_Name}}</td>
                <td>{{item.BGM_City_Name}}</td>
            </tr>
        </table>
    </div>