Vue self learning 5-vue template syntax (v-text, v-html, v-pre)

Testing makes money 2021-04-08 09:11:56
vue self learning 5-vue vue


The previous one said v-cloak Instructions , Let's do it today v-text,v-html,v-pre The learning of these three instructions

Data binding instructions

  • v-text: Used to fill in plain text
    • More concise than interpolation expressions , There is no flicker problem .
  • v-html: For filling html fragment
    • There are network security problems , Be vulnerable to XSS Tools , It should not be used on content submitted by users .
    • Website internal data can be used , Third party data cannot be used
  • v-pre: Used to fill in the original information
    • Show the original information , Skip the compilation process


<div id='app'>
<!-- v-text There will be no flicker problems , So no need v-cloak -->
<div v-text="msg"></div>
<!--  Used to add html fragment  -->
<div v-html="mgs_html"></div>
<!--  Used to display raw information , No need to go through vue The build process , That's the display {{msg_pre}}-->
<div v-pre>{{mgs_pre}}</div>
<!--  To download vue.js -->
<script type='text/javascript' src='js/vue.js'></script>
//1. html Writing labels in Chinese 
//2.  introduce vue.js
//3.  Use vue Render the data .
var vm = new Vue(
el'#app'// Bound to the id Selectors 
data: {
"msg""hello world",

Portal :2021 The latest test data & Position of big factory

Blogger : Test makes money ( One is not for 996 and 996 It's a test open yard farm )

motto : Focus on test development and automation operation and maintenance , Try to read, think and write , Lay the foundation for the financial freedom of an introverted life .

Content category : Technology upgrading , Workplace gossip , Career development , Reading and writing , Investment and Financing , Healthy life .


Blog Garden :


WeChat official account : Test makes money ( Share exclusive content and resources on a regular basis )

This article is shared in Blog “ Test makes money ”(51CTO).
If there is any infringement , Please contact the Delete .
Participation of this paper “OSC Source creation plan ”, You are welcome to join us , share .

本文为[Testing makes money]所创,转载请带上原文链接,感谢

  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揭秘 小结及习题