vue学习（vue2---＞vue3)

一、hello小案例

<!--准备一个容器-->
    <div id="app">
      <h1>hello,{{ name }}</h1>    <!--插值语法-->
      <h1>年龄是:{{age}}</h1>
    </div>

    <script>
      //创建vue实例，这是一切的开端
      new Vue({
        el: "#app", //el用于指定当前容器为那个容器服务，值通常为css选择器字符
        data: {
          //用于存储数据，供el指定的容器使用
          name: "ling",
          age: "21",
        },
      });
    </script>

1.想让vue工作就必须创建一个vue实例，且要传入一个配置对象。

2.root容器中的代码符合HTML规范，只不过混入了特殊的vue语法。

3.root里的代码被称为“vue模板”

4.注意容器与Vue实例是一一对应的关系，一个容器只能接管一个实例。

5.真实开发中只有一个vue实例，并且会配合着组件使用。

6.{{XXX}}中XXX要写js表达式，且XXX可自动提取到data中的所有属性

7.一旦data中数据发生变化，页面中用到该数据的地方也会自动更新。

二、模板语法

<div id="demo">
      <h1>插值语法</h1>  
      <h3>你好，{{name}}</h3>
      <hr>
      <h1>指令语法</h1>
      <a v-bind:href="web.url">点击跳转到{{web.name}}</a><br>
      <a :href="web.url">点击跳转到{{web.name}}</a>
    </div>

    <script>
      new Vue({
        el: "#demo",
        data: {
          name: "ling",
          web:{ 
            name:'必应',
            url:'https://cn.bing.com/'
          }
        },
      });
    </script>

 1.插值语法：用于解析标签体内容

 2.指令语法：

   功能：用于解析标签（包括：标签属性、标签内容、绑定事件...）

   举例：v-bind,可以给任何一个标签属性动态的绑定值，即可以将url绑定为js表达式，它就不在是一个字符串了。可以简写为“ ：”。还有很多指令。

三、数据绑定

 <div id="demo">
     单项绑定：<input type="text" v-bind:value="name"><br>
     双向绑定：<input type="text" v-model:value="name"><hr>

     <!--简写-->
     单项绑定：<input type="text" :value="name"><br>
     双向绑定：<input type="text" v-model="name">
    </div>

    <script>
      new Vue({
        el: "#demo",
        data: {
          name: "ling"
        },
      });

1.单向绑定：完成从data中数据到页面的绑定 

2.双向绑定：即可完成从data中数据到页面的绑定，也可完成页面到数据的绑定。注意v-model只能应用在表单类元素上(输入类元素),即有value值的元素，所以它的简写可省略value。

--->所以当在页面上只改单项页面绑定的值时，只有它自己变；当修改页面中双向绑定，用这些数据的页面都会发生变化。

四、el与data的两种写法

1.el的两种写法：

  1）new vue时，配置el属性。 例如: el: "#app"

  2）先创建vue实例，随后在通过 v.$mount("#app")指定el的值。

   例如： console.log(v)  （换行）  v.$mount("#app");

2.data的两种写法：

  1）方法式

  2）函数式：学习组件时必须用函数式。注意这不能用箭头函数，否组this不在为vue实例而是windows。（(由vue所管理的函数，不能用箭头函数)

五、数据代理

1.定义：通过一个对象代理对另一个对象属性的操作(读/写)

<script>
        let obj = {x:10}
        let obj1 = {y:30}

        Object.defineProperty(obj1,'x',{
            //当有人读取obj1的x属性时，get函数的(getter)方法就会被调用，返回值为x的值
            get(){
                return obj.x
            },
            //当有人修改obj1的x属性时，set函数的(setter)方法就会被调用，且会返回修改的值
            set(value){
                obj.x = value
            }
        })
    </script>

运行结果

 通过obj1来更该obj.x的值。这就是简单的数据代理。

注意只有在vue实例中只有data中的属性做数据代理。method中的不做等。