杰霸霸博客

主题

内置指令 ​

1. v-text指令 ​

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

2. v-html指令 ​

  1. 作用： 向指定节点中渲染包含html结构的内容。
  2. 与插值语法的区别：
    • v-html 会替换节点中所有的内容， 则不会
    • v-html 可以识别html结构。
  3. 严重注意： v-html有安全问题！！！

危险

(1)在网站上动态渲染任务HTML非常危险，容易导致XSS攻击。 (2)一定要在可信的内容上使用v-html, 永远不要相信用户提交的内容。

3. v-cloak指令 ​

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

html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>v-cloak指令</title>
    <meta charset="utf-8"/>
    <!-- 如果依赖的js加载很慢，整个页面都会等在第7行，后面的body和js都会阻塞   -->
<!--    <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>-->
    <style>
        [v-cloak]{/* 使用[]表示全部v-cloak属性，属性选择器*/
            display: none;
        }
    </style>
</head>
<body>
<div id="editor">
    <div v-cloak>{{username}}</div>
</div>
<!-- 如果依赖的js加载很慢，放在第31行(最大行数，放在body标签之外的话就不会加载了)，虽然依赖也可以加载而且body得到渲染，但是此时Vue没有接管容器，页面会出现很多{{xxx}}  -->
<script type="application/javascript" src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
</body>
<script>
console.log("开始执行。。。。")
Vue.config.productionTip = false
const vm = new Vue({
    el: "#editor",
    data() {
        return {
            username: 'jack'
        }
    },
    methods:{
        submitData(){
            console.log(this.userinfo)
        }
    }
})
</script>
</html>

4. v-once指令 ​

  1. v-once所在节点在初次动态渲染后，就视为静态内容了。
  2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
html
<div id="editor">
    <div v-once>初始值n:{{n}}</div>
    <button v-on:click="n++">n+1</button>
    <div >现在n:{{n}}</div>
</div>
js
Vue.config.productionTip = false
const vm = new Vue({
    el: "#editor",
    data() {
        return {
            n: 1
        }
    }
})

5. v-pre指令 ​

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