Vue-数据响应式

*****对方是否如何理解响应式

     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后，页面数据不进行修改

*****什么是数据绑定

           将数据填充到标签中