vue的常用指令

最新推荐文章于 2024-08-25 09:12:14 发布

雀巢脆脆鲨-

最新推荐文章于 2024-08-25 09:12:14 发布

阅读量210

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_69761220/article/details/126007688

版权

1.v-once

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

  <div id="app">
    <h2>{{message}}</h2>
    <!-- 只会渲染一次，数据改变不会再次渲染 -->
    <h2 v-once>{{message}}</h2>
  </div>

2.v-html

在某些时候我们不希望直接输出<a href='http://www.baidu.com'>百度一下</a>这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-html指令的使用</title>
</head>
<body>
  <div id="app">
    <h2>不使用v-html</h2>
    <h2>{{url}}</h2>
    <h2>使用v-html，直接插入html</h2>
    <h2 v-html="url"></h2>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        url:"<a href='http://www.baidu.com'>百度一下</a>"
      }
    })
  </script>
</body>
</html>

3.v-text

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

    <div id="root">
        <h2>{{msg}},hahaha</h2>
        <h2 v-text="msg">,hahaha</h2>
    </div>
    <script>
        Vue.config.productionTip = false;//阻止 vue 在启动时生成生产程序
        
        const vm = new Vue({
            el:'#root',
            data(){
                return {
                     msg:'张三'
                }
            }
        })
    </script>

4.v-pre

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

  <div id="app">
    <h2>不使用v-pre</h2>
    <h2>{{message}}</h2>
    <h2>使用v-pre,不会解析</h2>
    <h2 v-pre>{{message}}</h2>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      }
    })
  </script>

5.v-cloak

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			[v-cloak]{
				display: none !important;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<h2>{{msg}}</h2>
		</div>
		<script>
			setTimeout(() => {
				const vm = new Vue({
					el: '#app',
					data() {
						return {
							msg: '我就是这么倔强'
						}
					}
				})
			}, 200)
		</script>
	</body>
</html>