vue 03 指令

時間 2020-06-12

標籤 vue 指令简体版

原文原文鏈接

1. 經常使用內置指令

v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 若是爲true, 當前標籤纔會輸出到頁面
v-else: 若是爲false, 當前標籤纔會輸出到頁面
v-show : 經過控制display樣式來控制顯示/隱藏
v-for : 遍歷數組/對象
v-on : 綁定事件監聽, 通常簡寫爲@
v-bind : 強制綁定解析表達式, 能夠省略v-bind
v-model : 雙向數據綁定
ref : 爲某個元素註冊一個惟一標識, vue對象經過$refs屬性訪問這個元素對象
v-cloak : 使用它防止閃現表達式, 與css配合: [v-cloak] { display: none }javascript

ref

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref指令</title>
</head>
<body>
<div id="app">
    <p ref="msg">abcd</p>
    <button @click="hint">提示</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {},
        //ref : 爲某個元素註冊一個惟一標識, vue對象經過$refs屬性訪問這個元素對象
        methods: {
            hint(){
                // alert(this.$refs.msg.textContent);
                alert(this.$refs.msg.innerHTML);//獲取標識爲msg的標籤的文本
            }
        }
    })
</script>
</body>
</html>

結果：點擊提示按鈕
css

v-cloak 防止閃現表達式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    alert('---');
    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        }
    })
</script>
</body>
</html>

結果：當執行到alert時，vue實例還未解析，因此也沒法解析大括號表達式，就會在頁面上顯示錶達式。爲了解決這種問題，引入了v-cloak指令。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloak指令</title>
    <style>
        /*屬性選擇器*/
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <p v-cloak>{{msg}}</p>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    alert('---');
    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        }
    })
</script>
</body>
</html>

結果: 指令屬性v-cloak在vue解析以前存在，display樣式爲none，則p標籤的內容不顯示。

在點擊alert的肯定後，代碼往下繼續執行，vue實例被解析，則v-cloak屬性被移除， v-clock沒法與p標籤匹配。
vue

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。