1. <body>
    2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    3.     <div id='myApp'>
    4.         <!-- 数据绑定: vue对象的data字段中的数据显示到模板中 一般通过以下两种语法实现-->
    5.         <!-- 1, 通过{{}}语法渲染数据 -->
    6.         <h1>{{count}}</h1>
    7.         <!-- 2, 通过v-text属性(指令)或v-html属性渲染, 注意属性中不加{{}} -->
    8.         <h1 v-text="friend.name"></h1>
    9.         <h1 v-html="div"></h1>
    11.         <!-- {{}}中属于js运行环境,可以实现简单的逻辑运算和函数调用 -->
    12.         <h1>{{Math.floor(height)}}</h1>
    13.         <h1>{{height + 10}}</h1>
    14.         <h1>{{height > 180? '高富帅' : '矮矬穷'}}</h1>
    15.         <!-- {{}}中不能执行复杂的函数定义, 循环, 判断结构 -->
    16.         <!-- <h1>{{function add(a,b){alert(a+b)};add(3,4)}}</h1> -->
    17.         <!-- <h1>{{if(1!=2){console.log(123)}}}</h1> -->
    19.         <!-- 以上实现了data数据向标签模板上的绑定, 也叫单向数据绑定 -->
    21.         <!-- 表单上的数据绑定叫双向数据绑定: 使用v-model实现, data中的数据可以显示到表单中,表单数据变化是, data数据同步更新   -->
    22.         <input type="text" v-model="friend.name"> 
    24.         <!-- 数据更新: 通过vue绑定的数据一旦变化, 视图中相关标签会同步刷新 -->
    25.         <button v-on:click="add">+</button>
    27.     </div>
    28.     <script>
    29.         new Vue({
    30.             el: '#myApp',
    31.             data: {
    32.                 height: 156.82,
    33.                 count: 1,
    34.                 friend: {name: "小明"},
    35.                 div: `<div>你<hr>好</div>`
    36.             },
    37.             methods: {
    38.                 add(){
    39.                     this.count++
    41.                     // vue数据绑定的原理: 在data这个对象定义字段时, vue内部是通过js对象语法Object.defineProperty实现了这个属性字段的定义(参考2021.08.23第三个课件), 其中实现了属性的set赋值和get取值函数, 当vue模板中使用{{count}}渲染数据,会调用count的get函数获取字段值,替换掉{{count}}, 当调用this.count赋值更新时,会调用count的set函数更新count值, vue在set函数中, 找到了count相关的DOM标签,更新了相关标签的内容显示
    42.                 }
    43.             },
    44.             // created 是vue对象的创建函数, vue对象创建完成会自动调用这个函数
    45.             created() {
    46.                 console.log("vue对象已创建")
    47.                 // 模拟vue底层对count字段的创建, 渲染和更新原理
    48.                 Object.defineProperty(this.$data, "count", {
    49.                     set(newValue){
    50.                         this.tempValue = newValue;
    51.                         // 在执行了count修改时,除了更新count值, 还需要刷新DOM, vue底层通过虚拟dom遍历查找到{{count}}所在的标签, 假设是myH1, 然后正对行的更新这个DOM标签内容即可
    52.                         // myH1.innerText = this.value
    53.                     },
    54.                     get(){
    55.                         console.log(this.tempValue)
    56.                         // 遍历整个vue模板, 查找{{count}}这个结构, vue中有一套高效的DOM查找对比方式叫 虚拟DOM , 假设找到{{count}}所在的标签为 myH1 = <h1>{{count}}</h1>
    57.                         // myH1.innerText = this.tempValue
    59.                         if(this.tempValue){
    60.                             return this.tempValue
    61.                         }else{
    62.                             return 1;
    63.                         }    
    64.                     }
    65.                 })
    66.             },
    68.         })
    69.     </script>
    70. </body>