*****对方是否如何理解响应式
1、HTML5中的响应式(屏幕尺寸的变化导致样式的变化)
2、数据的响应式(数据大变化导致页面内容变化)
<div id="app">
<div v-text>{{msg}}</div>
</div>
<script>
var vue = new Vue({
// 元素的挂载位置(值可以是Css选择器或DOM元素)
el: '#app',
// 模型数据(值是一个对象)
data: {
msg: 'hello vue',
msg1: '<h1>html</h1>',
info: 'nihao'
}
});
</script>
页面运行,键盘点击F12,控制台显示
vue.msg=123,页面的信息也会进行相应的改变
*****v-once只编译1次
显示内容之后不再具有响应式的功能
v-once应用原理:如果显示的信息后续不需要修改,v-once可以提高性能。
<div id="app">
<div v-text>{{msg}}</div>
<div v-once>{{info}}</div>
</div>
<script>
var vue = new Vue({
// 元素的挂载位置(值可以是Css选择器或DOM元素)
el: '#app',
// 模型数据(值是一个对象)
data: {
msg: 'hello vue',
msg1: '<h1>html</h1>',
info: 'nihao'
}
});
</script>
控制台vue.info=123后,页面数据不进行修改
*****什么是数据绑定
将数据填充到标签中