随笔 - 44  文章 - 1  评论 - 3  阅读 - 47676

使用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>
复制代码

 

 

posted on   程铭  阅读(2335)  评论(1编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示