• vue的常用指令

    1.v-once

    ​ v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。

    1.   <div id="app">
    2.     <h2>{{message}}h2>
    3.     
    4.     <h2 v-once>{{message}}h2>
    5.   div>

    2.v-html

    在某些时候我们不希望直接输出百度一下这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>v-html指令的使用title>
    8. head>
    9. <body>
    10.   <div id="app">
    11.     <h2>不使用v-htmlh2>
    12.     <h2>{{url}}h2>
    13.     <h2>使用v-html，直接插入htmlh2>
    14.     <h2 v-html="url">h2>
    15.  
    16.   div>
    17.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    18.   <script>
    19.     const app = new Vue({
    20.       el:"#app",
    21.       data:{
    22.         message:"你好啊",
    23.         url:"百度一下"
    24.       }
    25.     })
    26.   script>
    27. body>
    28. html>

     3.v-text

    ​ v-text会覆盖dom元素中的数据，相当于js的innerHTML方法。

    1.     <div id="root">
    2.         <h2>{{msg}},hahahah2>
    3.         <h2 v-text="msg">,hahahah2>
    4.     div>
    5.     <script>
    6.         Vue.config.productionTip = false;//阻止 vue 在启动时生成生产程序
    7.         
    8.         const vm = new Vue({
    9.             el:'#root',
    10.             data(){
    11.                 return {
    12.                      msg:'张三'
    13.                 }
    14.             }
    15.         })
    16.     script>

     

    4.v-pre 

    有时候我们期望直接输出{{message}}这样的字符串，而不是被{{}}语法转化的message的变量值，此时我们可以使用v-pre标签。

    1.   <div id="app">
    2.     <h2>不使用v-preh2>
    3.     <h2>{{message}}h2>
    4.     <h2>使用v-pre,不会解析h2>
    5.     <h2 v-pre>{{message}}h2>
    6.  
    7.   div>
    8.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    9.   <script>
    10.     const app = new Vue({
    11.       el:"#app",
    12.       data:{
    13.         message:"你好啊"
    14.       }
    15.     })
    16.   script>

    5.v-cloak 

    ​ 有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从{{message}}到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到v-cloak的这个标签。在vue解析之前，div属性中有v-cloak这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有一个css属性display:none;，加载完成之后，css属性变成display:block，元素显示出来。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
    7. 		<style>
    8. 			[v-cloak]{
    9. 				display: none !important;
    10. 			}
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		<div id="app" v-cloak>
    15. 			<h2>{{msg}}h2>
    16. 		div>
    17. 		<script>
    18. 			setTimeout(() => {
    19. 				const vm = new Vue({
    20. 					el: '#app',
    21. 					data() {
    22. 						return {
    23. 							msg: '我就是这么倔强'
    24. 						}
    25. 					}
    26. 				})
    27. 			}, 200)
    28. 		script>
    29. 	body>
    30. html>

  • 相关阅读:
    精准营销！用机器学习完成客户分群！
    WPF绘图（一）：几何（Geometry）与形状（Shape）
    DMPE-PEG-Mal 二肉豆蔻酰磷脂酰乙醇胺-聚乙二醇-马来酰亚胺供应
    C++11：函数对象、闭包和Lambda
    多线程拷贝文件
    全志R128应用开发案例——点亮一颗 LED 灯
    5年测试，面试结束后被HR怼了..（心塞）
    Go基础语法：基本数据类型
    罗德施瓦兹频谱仪使用笔记
    广州蓝景分享—「web前端素材」使用CSS动画效果(上)
  • 原文地址：https://blog.csdn.net/weixin_69761220/article/details/126007688