使用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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~