阅读更多系列文章请访问我的GitHub博客,示例代码请访问这里。
v-model指令
示例代码:/lesson2/01. v-model指令.html
v-model指令的作用是双向绑定数据,它只能用于输入组件,如input、textarea、select、radio等。
需要注意的是,通过v-model绑定的数据都为字符串。
实现一个简单的双向绑定。
JavaScript:
let vm = new Vue({
el: '#app', // 根元素或挂载点。
data: {
name: 'lee',
}
})
HTML:
<div id="app">
<input type="text" v-model="name">
<p>{{name}}</p>
</div>
此时通过input修改数据,p标签中的数据也会跟着改变,如果通过vm.name直接修改数据,input和p标签中的数据也会改变,如此就实现了双向绑定。
v-model改变了通信方式
v-model让View层与Model层之间的通信不再需要通过Controller进行,这里的Controller指的是用户的代码,而不是Vue的底层代码。
v-text、v-html指令
示例代码:lesson02/02. v-text、v-html指令.html
v-text与{{}}效果相同,如果传入的是标签会直接转换为字符串输出。
v-html相当于innerHtml,会将传入的字符串转换成HTML输出。
JavaScript:
let vm = new Vue({
el: '#app', // 根元素或挂载点。
data: {
name: '<strong>lee</strong>',
}
})
HTML:
<div id="app">
<div v-text="name"></div>
<div v-html="name"></div>
</div>