【MAC 上学习 Vue】Day 7. API 详解---指令（

2019-08-04 本文已影响1人 RaRasa

1. v-text

v-text 主要用来更新元素 textContent：

    <body>
        <div id="app">
            <h1 v-text="msg1"></h1>
            <h2>{{ msg2 }}</h2>
        </div>
        <script src="vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    msg1: 'Hello World!',
                    msg2: 'Hello World!'
                }
            });
        </script>
    </body>

2. v-html

v-html 与 v-text 区别在于：v-text 输出的是纯文本，而 v-html 会将其当 html 标签解析后再输出：

    <body>
        <div id="app">
            <div v-text="html1"></div>
            <div v-html="html2"></div>
        </div>
        <script src="vue.js"></script>
        <script>
        var app = new Vue({
            el: '#app',
            data: {
                html1: "<b style='color:red'>v-html</b>",
                html2: "<b style='color:red'>v-html</b>"  
            }
       });
       </script>
    </body>

3. v-pre

v-pre 主要用来跳过这个元素和它的子元素编辑过程：

<body>
    <div id="app">
        <h1 v-pre>{{ msg }}</h1>
        <h2>{{ msg }}</h2>
    </div>
    <script src="vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello World!'
            }
        });
    </script>
</body>

4. v-cloak

v-cloak 主要用来保持在元素上直到关联实例结束时再进行编译：

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

    <div id="app" v-cloak>
        <div>{{ msg }}</div>
    </div>

    <script src="vue.js"></script>
    <script type="text/javascript">
    var app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello World!'
            }
        });
    </script>
</body>

5. v-once

v-once 主要用来执行一次性插值，当数据改变时，插值处的内容不会更新:

<body>
    <div id="app">
        <h1>{{ msg }}</h1>
        <h2 v-once>{{ msg }}</h2>
    </div>
    <script src="vue.js"></script>
    <script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello World!'
        }
    });
    </script>
</body>

6. v-if

v-if 主要用来做条件判断，Vue 会根据表达式的值的真假条件来渲染元素，在切换时元素及它的数据绑定，组建将被销毁并重建。

<body>
    <div id="app">
    <template v-if="ok">
        <h1>title</h1>
        <p>content 1</p>
    </template>
        <p>content 2</p>
    </div>
    <script src="vue.js"></script>
    <script>
    var app = new Vue({
        el: '#app',
        data: {
            ok: true
        }
    });
    </script>
</body>

7. v-else

v-else 元素必须紧跟在 v-if 或者 v-else-if 后面，否则将不会被识别。

<body>
    <div id="app">
        <a v-if="ok">Yes</a>
        <a v-else>No</a>
    </div>
    <script src="vue.js"></script>
    <script>
    var app = new Vue({
        el: '#app',
        data: {
            ok: true
        }
    });
    </script>
</body>

8. v-else-if

v-else-if 元素必须紧跟在 v-if 或者 v-else-if 后面，否则将不会被识别，可用来实现 switch 语句。

<body>
    <div id="app">
        <div v-if="type === 'a'">A</div>
        <div v-else-if="type === 'b'">B</div>
        <div v-else-if="type === 'c'">C</div>
        <div v-else>No A/B/C</div>
    </div>
    <script src="vue.js"></script>
    <script>
    var app = new Vue({
            el: '#app',
            data: {
                type: 'd'
            }
        });
    </script>
</body>

9. v-show

v-show 是简单地切换元素的 CSS 属性 display，不支持 <template> ，也不支持 v-else，而 v-if 是“真正的”条件渲染。v-show 有更高的初始渲染开销，而 v-if 有更高的切换开销。故，若要频繁地切换，则使用 v-show；若在运行时条件不太可能改变，则使用 v-if。

<body>
    <div id="app">
        <div v-show="ok">Hello!</div>
        <div v-if="ok">Hello!</div>
        <div v-else="ok">NO</div>
    </div>
    <script src="vue.js"></script>
    <script>
    var app = new Vue({
            el: '#app',
            data: {
                ok: true
            }
        });
      </script>
</body>

10. v-for

v-for 主要根据遍历数组来进行渲染。

<body>
        <ul id="app">
            <li v-for="item in items1">
                {{ item.text }}
            </li>
            <li v-for="(value, key, index) in items2">
                {{ index }}.{{ key }}:{{ value }}
            </li>
            <li v-for="n of 10">{{ n }}</li>
        </ul>
        <script src="vue.js"></script>
        <script type="text/javascript">
        var app = new Vue({
                el: '#app',
                data: {
                    items1: [
                        { text: 'text1' },
                        { text: 'text2' }
                    ],
                    items2:{
                        text:'text1'
                    },
                    number:1
                }
            })
        </script>
    </body>

11. v-bind

v-bind 主要用来动态地绑定一个或多个特性。

<body>
    <div id="app">
        <a v-bind:href="url">百度</a>
        <a :href="url">百度</a>
    </div>
    <script src="vue.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            url: 'https://www.baidu.com/'
        }
    });
    </script>
</body>

12. v-model

v-model 主要用在表单控件元素上创建双向数据绑定。

1) input 绑定

<body>
    <div id="app">
        <input v-model="name" />
        <h1>Hello, {{ name }}</h1>
    </div>
    <script src="vue.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            name: 'World'
        }
    });
   </script>
</body>

2) textarea 绑定

<body>
    <div id="app">
        <p style="white-space: pre-line">{{ message }}</p>
        <textarea v-model="name"></textarea>
        <h1>Hello, {{ name }}</h1>
    </div>
    <script src="vue.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            name: 'World'
        }
    });
    </script>
</body>

3) checkbox 绑定

<body>
    <div id="app">
        <input type="checkbox" id="cbox" value="1" v-model="checked0" />
        <span>Check Box: {{ checked0 }}</span>
        <br />
        <input type="checkbox" id="cbox1" value="1" v-model="checked" />
        <label for="cbox1">checkbox1</label>
        <input type="checkbox" id="cbox2" value="2" v-model="checked" />
        <label for="cbox2">checkbox2</label>
        <input type="checkbox" id="cbox3" value="3" v-model="checked" />
        <label for="cbox3">checkbox3</label>
        <br />
        <span>Check Box: {{ checked }}</span>
        <br />
    </div>
    <script src="vue.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            checked0: false,
            checked: []
        }
    });
    </script>
</body>

4) radio 绑定

<body>
    <div id="app">
        <input type="radio" id="radio1" value="1" v-model="picked" />
        <label for="radio1">radio1</label>
        <input type="radio" id="radio2" value="2" v-model="picked" />
        <label for="radio2">radio2</label>
        <input type="radio" id="radio3" value="3" v-model="picked" />
        <label for="radio3">radio3</label>
        <br />
        <span>Picked: {{ picked }}</span>
    </div>
    <script src="vue.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            picked: ''
        }
    });
    </script>
</body>

5) select 绑定

<body>
    <div id="app">
        <select v-model="selected">
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
    <script src="vue.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            selected: ''
        }
    });
    </script>
</body>