Day1-初识Vue

插值语法与模板语法

插值语法
功能: 用于解析标签体内容
语法: {{xxx}} ，xxxx 会作为 js 表达式解析

指令语法
功能: 解析标签属性、解析标签体内容、绑定事件
举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析

数据绑定

单向数据绑定

语法：v-bind:href ="xxx" 或简写为 :href 2. 特点：数据只能从 data 流向页面

双向数据绑定`

语法：v-mode:value="xxx" 或简写为 v-model="xxx" 2. 特点：数据不仅能从 data 流向页面，还能从页面流向 data

MVVM模型

第一个示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
       <!-- {{插值语法}}  替换
              指令语法：  v-bind:     管理标签属性 href color style 等

       -->
       <h1>hello,world</h1>
       <div id="test">
           <a  v-bind:href="myBlog">点我去我的博客</a>
           <!-- 等价于 -->
           <a  :href="myBlog">点我去我的博客</a>
       </div>

       
      <script>
          const vue=new Vue({
              el: "#test",
              data: {
                  myBlog: "https://flya.top"
              }
          })
      </script>
</body>
</html>

ES6 `Object.defineProperty`

在JS中对象具有两种属性，分别是数据属性和访问器属性，所以其描述符也根据属性分类，分为数据描述符和访问器描述符。

在使用描述符时，必须是两种形式之一，且两者不能同时使用。

`访问器描述符`
    访问器描述符是一个有getter-setter函数对描述的属性的读写。

    它具有以下可选的键值：

    configurable：表示该属性能否通过delete删除，能否修改属性的特性或者能否修改访问器属性，默认为false。当且仅当该属性的configurable为true时，才能实现上述行为。

    enumerable：表示该属性是否可以枚举，即可否通过for..in访问属性。默认为false。

    get：在读取属性时调用的函数，默认值为undefined。

    set：在写入属性时调用的函数，默认值为undefined。

`数据描述符`
    数据描述符是一个具有值的属性，该值可能是可写的，也可能是不可写的。

    它具有以下可选的键值：

    configurable：表示该属性能否通过delete删除，能否修改属性的特性或者能否修改访问器属性，默认为false。当且仅当该属性的configurable为true时，才能实现上述行为。

    enumerable：表示该属性是否可以枚举，即可否通过for..in访问属性。默认为false。

    value：表示该属性的值。可以是任何有效的JS值。默认为undefined。

    writable：表示该属性的值是否可写，默认为false。当且仅当属性的writable为true时，其值才能被赋值运算符改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<!--
  属性描述符：
  1.数据描述符
      configurable:是否可以重新定义
      enumerable：是否可以枚举
      value：初始值
      writable：是否可以修改属性值
  2.访问描述符
      get：是一个回调函数，根据其他相关的属性动态计算得到当前属性值
      set：也是一个回调函数，监视当前属性值的变化，更新其他相关的属性值
-->

<script>
    let number= '武汉学院'
    let person ={
        name: "张三",
        age: 18
    }
    Object.defineProperty(person,"school",{
        get(){
            console.log("读取school属性了")
          return number
           },
        set(v) {
            number=v
        }
        // value: "武汉学院",
        // enumerable: true ,//控制属性是否可列举
        // writable: true,//控制属性是否可修改
        // configurable: true// 控制属性是否可以被删除
    })
    console.log(person)
</script>
</body>
</html>

Vue数据代理

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="test02">点我呀~</button>
        ||
        ||
        等价于
        <button @click="test($event,'sdaddsadsa')">点我呀~</button>
    </div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {

        },
        methods:{
            test(e,a){
                alert(e+"~~")
                alert(a)
                alert("你好，世界")
            },
            //event 获取这个事件本身
            test02(event){
                // event.target.innerText = 'nmsl'
                console.log(this === vm) //ture
            }
        }
    })
</script>
</body>
</html>