【Vue】内置指令

叨叨凡

已于 2022-03-20 10:29:40 修改

阅读量421

点赞数

分类专栏： Vue 文章标签： vue.js 前端 html

于 2022-03-18 16:39:17 首次发布

本文链接：https://blog.csdn.net/qaqcfff/article/details/123573744

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

内置指令

往期梳理：
v-bind : 单向绑定解析表达式，可简写为:xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听，可简写为@
v-if : 条件渲染（动态控制节点是否存在）
v-else:条件渲染（动态控制节点是否存在）
v-show : 条件渲染（动态控制节点是否展示）

v-text :
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-html :
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
*v-html会替换掉节点中的所有内容，{{xx}}则不会。
*v-html可以识别html结构
3.严重注意：v-html有安全问题！！！
*在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
*一定要在可信的内容上使用v-html，不要用在用户提交的内容上。

v-cloak：
*本质是一个特殊属性，Vue实例创建完毕并接管容器后，会剩下v-cloak属性。
*使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

v-once：
1.v-once所在节点在初次动态渲染后，就视为静态内容。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre：
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

v-ref:
1.获取此指令所在标签得DOM元素
2.可用在原生html标签中及组件标签中
3.在vue中使用this.$ref.名称可以获取到标签或组件的实例对象

案例

<html>
<head>
    <meta charset='UTF-8'>
    <title>内置指令</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <style>
        [v-cloak]{
           display: none; 
        }
    </style>
</head>
<body>
    <!--
        v-bind
    -->
    <div id='root'>
        <!-- 插值语法-->
        <div>nihao,{{name}}</div>
        <!-- v-text -->
        <div v-text="str1"></div>
        <!-- v-html -->
        <div v-html="str2"></div>
        <!-- v-clock -->
        <div v-cloak>{{str3}}</div>
        <!-- v-once -->
        <div v-once>初始n值为：{{n}}</div>
        <div>当前的n值为{{n}}</div>
        <button @click="n++">点我n+1</button>
        <div v-pre>{{n}}</div>
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            str1:'你的名字',
            str2:'<h3>你好</h3>',
            str3:'nihao',
            n:1
        }
    })
</script>
</html>

v-ref案例：

<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button @click="showDOM">点我输出DOM</button>
        <School/>
    </div>
</template>
<script>
import School from './components/School.vue'
export default {
  components: { School },
    name:'App',
    data(){
        return{
            msg:'欢迎学习vue'
        }
    },
    methods:{
        showDOM(){
            console.log(this.$refs.title)
        }
    }
}
</script>

叨叨凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】内置指令

内置指令梳理：v-bind : 单向绑定解析表达式，可简写为:xxxv-model : 双向数据绑定v-for : 遍历数组/对象/字符串v-on : 绑定事件监听，可简写为@v-if : 条件渲染（动态控制节点是否存在）v-else:条件渲染（动态控制节点是否存在）v-show : 条件渲染（动态控制节点是否展示）v-text :1.作用：向其所在的节点中渲染文本内容。2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。v-html :1.作用：向指定节点
复制链接

扫一扫

专栏目录