Instrucción v-text: renderiza contenido de texto al nodo donde está ubicado, la diferencia con el valor de interpolación es que v-text reemplazará el contenido en el nodo

Instrucción v-html: renderice contenido de texto en el nodo donde se encuentra y puede reconocer la sintaxis html. Nota: v-html tiene problemas de seguridad. Es peligroso renderizar dinámicamente html arbitrario en el sitio web, lo que puede conducir fácilmente a ataques xss Trate de no usar v-html en el cuadro de entrada del usuario.

Comando v-cloak (sin valor): es esencialmente un atributo especial. Después de que se crea la instancia de Vue y se hace cargo del contenedor, el atributo v-cloak se eliminará. Cooperar con cssv-cloak puede resolver el problema de { {xxx }} aparece en la página cuando la velocidad de la red es lenta.

Instrucción v-once: después de la representación dinámica inicial del nodo donde se encuentra v-once, se considera contenido estático. Los cambios de datos posteriores no harán que se actualice la estructura donde se encuentra v-once.

Instrucción v-pre: la compilación del nodo donde se encuentra el patrón puede usarse para saltar la calle que no usa la sintaxis de instrucción y la sintaxis de diferencia.

v-texto

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue-->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

</head>

<div id="root">
插值语法:<div>{
   
   {name}}</div>
v-text指令:<div v-text="name"></div>
v-text指令:<div v-text="name">abc</div>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name:'hello'
        }
    });
    console.log(vm)

</script>

v-html

<div id="root">
v-text:<p v-text="name"></p>
v-text:<p v-text="htmlName"></p>
v-html:<p v-html="htmlName">你好</p>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name:'世界杯',
            htmlName:'<h2>世界杯2</h2>'
        }

    });
</script>

V-capa

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue-->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<div id="root">
<div v-cloak>{
   
   {name}}</div>
</div>

v-una vez


<div id="root">
<div v-once>初始的n值为：{
   
   {n}}</div>
<div>之后的n值为：{
   
   {n}}</div>
    <button @click="n++">n++</button>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            n:10,
        },
        methods: {}

    });
    console.log(vm)

</script>

En para


<div id="root">
<div>{
   
   {cool}}</div>
<div v-pre>{
   
   {cool}}</div>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            cool:'天气只有十来度'
        },

    });

</script>

directiva personalizada

Funcional

Defina un comando v-big, que es similar a v-text, pero aumentará el valor límite en 10 veces

</head>

<div id="root">
    <div v-text="n" ></div>
    <div v-big="n"></div>
    <button @click="n++">n++</button>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            n:1,
        },
        directives:{
            big(element,binding) {
                element.innerText=binding.value*100
            }
        }
    });
    console.log(vm)

</script>

estilo de objeto

Requisitos: defina un comando v-fousbind y un tipo funcional v-bind, pero permita que el elemento inout vinculado a él obtenga el foco de forma predeterminada


<div id="root">
    <div>n的值为:{
   
   {n}}</div>
<input type="text" v-fousbind="n" value="n"></input>
<button @click="n++">n++按钮</button>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            n:1
        },
        directives:{
            fousbind:{
                //指令与元素成功绑定时(一上来)
                bind(element,binding){
                    element.value=binding.value
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus()
                },
                //指令所在的模版被重新解析时
                update(element,binding){
                    element.value=binding.value
                    element.focus()
                }
            }
        }

    });
    console.log(vm)

</script>

Directivas y directivas personalizadas en Vue

Directivas en Vue

Resumen de instrucciones v-xxx