小白学习 Vue 2.指令

865 阅读1分钟

小白学习 Vue 系列目录

前面学习到了 VUE 的一些基础指令,这节继续学习。

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。 指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。 指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

v-on 用于监听 DOM 事件
v-once="property" 执行一次性地赋值,当数据改变时,插值处的内容不会更新
v-html="rawHtml"  将字符串的 html 代码块,渲染为真正的 HTML,而非普通文本
v-bind:attribute="property" 可以缩写成 :attribute="property"
v-on:event="func" 可以缩写成 @event="func"

注意事项

  • 创建 VUE 实例时,尽量使用普通 function ,而不要使用箭头函数

  • {{ statement }} 双大括号里面只能是一段表达式或链式方法,如果有特殊需要,可以这样:

{{ 
    (function(){
        return message
    })()
}}

侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Vue.js v2.6.12 -->
</head>
<body>

    <div id="app">
        <p>Ask a question: <input v-model="question" /></p>
    </div>
    <hr/>

</body>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            question: ''
        },
        // 监听属性值的变化(新值,旧值)
        watch: {
            question: function (newValue, oldValue) {
                console.log(`question's newValue: ${newValue}`)
                console.log(`question's oldValue: ${oldValue}`)
            }
        }
    })
</script>

</html>