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