小白学习 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>