其他分享
首页 > 其他分享> > 使用VUE的准备工作,以及显示文本

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

 

 

标签:显示,VUE,text,BGM,js,item,准备,文本
来源: https://www.cnblogs.com/ShenJA/p/11790933.html