v-html 命令: テキストコンテンツをそれが配置されているノードにレンダリングし、HTML 構文を認識できます。注: v-html にはセキュリティの問題があります。Web サイト上で任意の HTML を動的にレンダリングすることは危険であり、xss 攻撃に簡単につながる可能性があります。ユーザーの入力ボックスでは v-html を使用しないようにしてください。

v-cloak コマンド (値なし): これは本質的に特別な属性です。Vue インスタンスが作成されてコンテナーを引き継いだ後、v-cloak 属性は削除されます。cssv-cloak と連携すると、{ {xxxの問題を解決できます。ネットワーク速度が遅い場合、ページに「}}」が表示される問題

v-once 命令: v-once が配置されているノードの最初の動的レンダリングの後、それは静的コンテンツとみなされます。後続のデータ変更によって、v-once が配置されている構造が更新されることはありません。

v-pre 命令: スキッパーが配置されているノードのコンパイルを使用して、命令構文と差分構文を使用しないストリートをスキップできます。

v-テキスト

<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マント

<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-once


<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>

のために


<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>

カスタムディレクティブ

機能的

v-big コマンドを定義します。これは v-text に似ていますが、バインド値を 10 倍に増やします。

</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>

オブジェクトスタイル

要件: v-fousbind コマンドと v-bind 関数型を定義しますが、それにバインドされている inout 要素がデフォルトでフォーカスを取得できるようにします。


<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>