vue表达式

插值表达式：

      语法：{{数据/表达式}}

      功能：向页面渲染数据或表达式的结果。

    插值表达式会自动将vue实例中的data属性中的数据取出，渲染到页面上。

    算术运算： + - * / %  

    调用方法  Math.floor  Date.now()

    三元表达式

注意:[千万不要写 js语句。]

    比如： var a = 10+20;  if else 语句等。

<div id="app">
     <!-- {{Math.floor(10.1)}} -->
     <!-- {{Date.now()}} -->
     <!-- {{if(age>18){'欢迎德玛西亚黄金大神光临本网咖'}else{"滚"}}} -->
     {{age>18?'欢迎德玛西亚黄金大神光临本网咖':"滚"}}
   </div>
  <script src="vue.js"></script>
  <script>
    const vm = new Vue({
      el:"#app",
      data:{
        msg:"芜湖起飞",
        age:20
      }
    });
  </script>

二 vue开发者工具：devtools  极简插件下载

 MVVM设计模式：

      Model-view-viewModel 简写。

     Model：模型  后端传递过来的数据。

      view：视图 所看到的页面（DOM元素）

      VM：viewmodel 视图模型  它是连接view和model的桥梁。

      vm有两个方向：

        1.将模型转化为视图，将后端传递过来的数据渲染为所看到的的页面。

        2.将视图转化为模型。 将看到的页面转为后端的数据。

 数据单向绑定：

        将model绑定到view，用js代码更新数据时，view会自动更新。不需要额外的DOM操作。

        常见的单向绑定：{{}}  v-bind

   数据的双向绑定：

        将model绑定到view的同时，也将view 绑定到model。

        在input  textarea等表单元素上使用v-model指令来进行双向数据绑定。

 <div id="app">
     <input type="text" v-model="msg">
     {{msg}}
   </div>
  <script src="vue.js"></script>
  <script>
    const vm = new Vue({
      el:"#app",
      data:{
        msg:"芜湖起飞",
        age:20
      }
    });
  </script>

数据绑定原理

当一个数据发生变化时，vue是如何直到的？

    通过ES5中的Object.definePropety,

    Object.definePropety可以监听到属性值的变化。

 <script>
    // let obj = {name:"zhangsan"};

    // obj.age = 20;

    // Object.defineProperty(obj,"age",{
    //   value:20
    // })

    // console.log(obj);

    // ----------------

    //定义一个空对象
    var book = {};
    //定义一个变量，存放 书名
    var bookName = '';

    Object.defineProperty(book,"name",{
      //给book的name属性设置值的时候，会自动调用
      set(value){
        //value 就是设置的值。
        bookName = value;
        console.log(`你取了一个书名，叫做${value}`);
        //将值渲染在页面上。
        document.getElementById("app").innerHTML = value;
      },
      //获取book的name属性的属性值的时候，会自动调用。
      // 该方法的返回值就是 调用该属性时获取的值。
      get(){
        //在这里无法直接获取set函数设置的值，所以需要通过一个外部的变量来保存。
        return `《${bookName}》`;
      }
    })

    // 当视图更新时,vue如何知道? 
    // 根据输入框的input事件来监听 视图的更新
    let inp = document.getElementById("inp");
    inp.oninput = function(){
      book.name = this.value;
    }
  
  </script>