使用VUE的准备工作，以及显示文本

Posted 2020-11-21 shenja

需应用一个文件

<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>