Vue自学之路5-vue模版语法(v-text,v-html,v-pre)

测试生财 2021-04-08 09:09:47
vue 自学 之路 5-vue


前言

前一篇讲了v-cloak指令,今天来进行v-text,v-html,v-pre这三个指令的学习

数据绑定指令

  • v-text:用于填充纯文本
    • 比插值表达式更加简洁,不存在闪动问题。
  • v-html:用于填充html片段
    • 存在网络安全问题,容易遭到XSS工具,不应该使用在用户提交的内容上。
    • 网站内部数据可以使用,第三方数据不可以用
  • v-pre:用于填充原始信息
    • 显示原始信息,跳过编译过程

 例子

<div id='app'>
<!-- v-text不会有闪动问题,所以不需要v-cloak -->
<div v-text="msg"></div>
<!-- 用于添加html片段 -->
<div v-html="mgs_html"></div>
<!-- 用于显示原始的信息,不用经过vue编译过程,即显示就是{{msg_pre}}-->
<div v-pre>{{mgs_pre}}</div>
</div>
 
<!-- 先下载vue.js -->
<script type='text/javascript' src='js/vue.js'></script>
<script>
//1. html中书写标签
//2. 引入vue.js
//3. 使用vue进行数据渲染。
var vm = new Vue(
{
el'#app'//绑定到id选择器
data: {
"msg""hello world",
"mgs_html""<span>html</span>"
}
}
)
</script>

传送门:2021最新测试资料&大厂职位

博主:测试生财(一个不为996而996的测开码农)

座右铭:专注测试开发与自动化运维,努力读书思考写作,为内卷的人生奠定财务自由。

内容范畴:技术提升,职场杂谈,事业发展,阅读写作,投资理财,健康人生。

csdn:https://blog.csdn.net/ccgshigao

博客园:https://www.cnblogs.com/qa-freeroad/

51cto:https://blog.51cto.com/14900374

微信公众号:测试生财(定期分享独家内容和资源)


本文同步分享在 博客“测试生财”(51CTO)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

版权声明
本文为[测试生财]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4900223/blog/5011671

  1. vue cli4.0 快速搭建项目详解
  2. Vue cli4.0 quick build project
  3. vue-cli脚手架安装
  4. Installation of Vue cli scaffold
  5. [JS knowledge] method of getting elements from DOM
  6. 【jQuery效果】文字滚动
  7. [jQuery effect] text scrolling
  8. [front end] live broadcast of user experience optimization series, real-life sharing of front-line celebrities
  9. React native introduces third party Android SDK
  10. Using html2canvas to generate shared images, CDN images do not show the problem
  11. Using hooks to write react components
  12. Explain the module hot replacement function of webpack in detail
  13. An incomplete guide to writing a simple native wechat applet
  14. How JavaScript calculates 1 + 1 - Part 1 creates a source string
  15. Jsonp method to solve cross domain problems
  16. Canvas animation demo (from zero to one)
  17. El dialog of elementui component encapsulation
  18. Transition group of Vue source code
  19. When encountering bracket validity, next larger element, specific minimum value, try stack
  20. Vue3 virtual DOM
  21. Scheme and implementation of front end page watermarking
  22. Why is 0.1 + 0.2 not equal to 0.3?
  23. JS arrow function this points to related practice
  24. CSS text decoration & text emphasis
  25. 2021必修 首门CSS架构系统精讲 理论+实战玩转蘑菇街
  26. 大前端
  27. The first compulsory CSS architecture system in 2021
  28. Big front end
  29. 你喜欢才是最好的,前端工程师常用的8个工具
  30. What you like is the best. There are 8 common tools used by front-end engineers
  31. Spring Boot + Vue3 前后端分离 实战wiki知识库系统
  32. Spring boot + vue3 front end and back end separation practical wiki knowledge base system
  33. CSS高级技巧总结
  34. CSS advanced skills summary
  35. HTML5教程 - HTML5 事件
  36. HTML5 tutorial - HTML5 events
  37. Vue和微信小程序的区别
  38. The difference between Vue and wechat applet
  39. HTML5和CSS3提高
  40. Improvement of HTML5 and CSS3
  41. HTML5和CSS3提高
  42. Improvement of HTML5 and CSS3
  43. NMN concept stock up and down limit, Harvard & 34; ageless drug & 34; only market speculation?
  44. 「HTML+CSS」--自定义加载动画【011】
  45. 「HTML+CSS」--自定义加载动画【010】
  46. 「HTML+CSS」--自定义加载动画【009】
  47. 「HTML+CSS」--自定义加载动画【008】
  48. "HTML + CSS" -- custom loading animation [011]
  49. "Custom" animation [CSS + 010]
  50. "HTML + CSS" -- custom loading animation [009]
  51. "HTML + CSS" -- custom loading animation [008]
  52. HttpServletRequest、通过request获得请求头、请求体等、解决中文乱码等问题
  53. HttpServletRequest, obtaining request header and request body through request, solving Chinese garbled code and other problems
  54. html2canvas 识别 svg 解决方案
  55. Solution of identifying SVG with html2canvas
  56. Web前端架构师
  57. Web front end architect
  58. 3000 yuan of financial software is less than 28 yuan of system, and the automatic accounting system is comparable to artifact
  59. Blessing of the sea
  60. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题