一篇文章搞懂vue基础(上)

李思雨.lsy

已于 2024-03-20 22:16:36 修改

阅读量532

点赞数 10

分类专栏：前端文章标签： vue.js javascript 前端

于 2024-03-20 22:15:55 首次发布

本文链接：https://blog.csdn.net/weixin_51781852/article/details/136845582

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

01._初识vue

初识vue:

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

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法

3.root容器里的代码被称为【Vue模版】

4.Vue实例和容器是一一对应的

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

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

7.一旦data中的数据发生改变，那么模版（页面）中用到该数据的地方也会自动更新

注意区分：js表达式和js代码（语句）

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

（1） a

(2)。 a+b

(3). demo(1)

(4).x===y?"a":"b";

2.js代码（语句)

(1)if(){}

(2)for(){}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初识Vue</title>
    <script src="../js/vue.js"></script>
    <script>
      Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    </script>
  </head>
  <body>
   
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>hello,{{name}}</h1>
    </div>
    <script>
      //创建vue实例
      new Vue({
        el: "#root", //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
        // el:document.getElementById("root")
        data: {
          //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
          name: "尚硅谷",
        },
      });
    </script>
  </body>
</html>

02_Vue模版语法

Vue模版语法有两大类：
1.插值语法：
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
2.指令语法：
功能：用于解析标签（包括：标签属性，标签内容，绑定事件。。。）
举例：v-bind:href="xxx"或简写为：href="xxx",xxx同样需要写js表达式
且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是v-？？？，此时我们只拿v-bind举个例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模版语法</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>插值语法</h1>
      <h3>你好,{{name}}</h3>
      <hr />
      <h1>指令语法</h1>
      <a v-bind:href="url">点我去尚硅谷学习1</a>
      <a :href="url">点我去尚硅谷学习2</a>
    </div>
  </body>
  <script>
    new Vue({
      el: "#root",
      data: {
        name: "jack",
        url: "http://www.atguigu.com",
      },
    });
  </script>
</html>

03_数据绑定

Vue中有2种数据绑定的方式：
1.单向绑定(v-bind):数据只能从data流向页面
2.双向绑定(v-model):数据不仅能从data流向页面。还可以从页面流向data
备注：
1.双向绑定一般都应用在表单类元素上（如：input select等）
2.v-model:value 可以简写为v-model.因为v-model默认收集的就是value值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    
    <!-- 准备好一个容器 -->
    <div id="root">
      <!-- 普通写法 -->
      <!--   单向数据绑定：<input type="text" v-bind:value="name" /><br />
      双向数据绑定：<input type="text" v-model:value="name" /><br /> -->
      <!-- 简写 -->
      单向数据绑定：<input type="text" :value="name" /><br />
      双向数据绑定：<input type="text" v-model="name" /><br />
      <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
      <!-- <h2 v-model:x="name">你好啊</h2> -->
    </div>
  </body>
  <script>
    new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
      },
    });
  </script>
</html>

04_el与data的两种写法

data与el的2种写法
1.el有两种写法
（1）new Vue 时候配置el属性
（2）先创建vue实例，随后再通过vm.$mount("#root")指定el的值
2.data有2种写法
（1）对象式
（2）函数式
如何选择：目前哪种写法都可以，以后学到组件时，data必须使用函数式，否则会报错
3.一个重要的原则：
由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>你好，{{name}}</h1>
    </div>
  </body>
  <script>
    const v = new Vue({
      // el: "#root",  //第一种写法
      //data的第一种写法：对象式
      /* data: {  
        name: "尚硅谷",
      }, */
      data() {
        console.log(this); //此处的this是vue实例对象
        return {
          name: "尚硅谷",
        };
      },
    });
    v.$mount("#root"); //第二种写法
  </script>
</html>

05_MVVM模型

MVVM模型
1.M：模型（Model）:data中的数据
2.V: 视图（View）：模版代码
3.VM：视图模型（ViewModel):Vue实例
观察发现：
1.data中所有的属性，最后都出现在了vm身上
2.vm身上所有的属性，及Vue原型上所有的属性，在vue模版中都可以直接使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>学校名称：{{name}}</h1>
      <h1>学校地址：{{address}}</h1>
      <h1>测试一下1：{{1+1}}</h1>
      <h1>测试一下2：{{#option}}</h1>
      <h1>测试一下1：{{#emit}}</h1>
      <h1>测试一下1：{{_c}}</h1>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "root",
      data: {
        name: "尚硅谷",
        address: "北京",
      },
    });
  </script>
</html>

06_数据代理

1.回顾Object.defineProperty方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let number = 18;
      let person = {
        name: "张三",
        sex: "男",
      };
      Object.defineProperty(person, "age", {
        //value:18,
        //enumerable:true,//控制属性是否可以枚举，默认值是false
        //writable:true,//控制属性是否可以被修改，默认值是false
        //configurable:true//控制属性是否可以被删除，默认值是false

        //当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
        get() {
          console.log("有人读取age属性了");
          return number;
        },
        //当有人修改person的age属性时，set函数（setter）就会被调用，且返回值就是age的值
        set(value) {
          console.log("有人修改了age属性，且值是value");
          number = value;
        },
      });
    </script>
  </body>
</html>

2.何为数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   
  </body>
  <script>
    let obj = {
      x: 100,
    };
    let obj2 = {
      y: 200,
    };
    Object.defineProperty(obj2, "x", {
      get() {
        return obj.x;
      },
      set(value) {
        obj.x = value;
      },
    });
  </script>
</html>

3.Vue中的数据代理

1.Vue中的数据代理:

通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处:

更加方便的操作data中的数据

3.基本原理：

通过Object.defineProperty()把data对象中所有的属性添加到vm 上。

为每一个添加到vm的属性，都指定一个getter/setter

在getter/setter内容去操作（读/写）data中对应的属性

07_事件处理

1.事件的基本使用

事件的基本使用：
1.使用v-on:xxx或@xxx 绑定事件，其中xxx是事件名;
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组件实例对象
5.@click="demo"和@click='demo($event)'效果一致，但后者可以传参

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    
    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <!-- <button v-on:click = "showInfo">点我提示信息</button> -->
      <button @click="showInfo1">点我提示信息1(不传参)</button>
      <button @click="showInfo2">点我提示信息2(传参)</button>
    </div>
  </body>
  <script>
    // 7.51  11.33  11.44
    const vm = new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
      },
      methods: {
        showInfo1(event) {
          //   console.log(event.target.innerText);
          console.log(this); //此处this是vm
          alert("同学你好！");
        },
        showInfo2(event, number) {
          //   console.log(event.target.innerText);
          console.log(this); //此处this是vm
          alert("同学你好！!");
        },
      },
    });
  </script>
</html>

2.事件修饰符

Vue中的事件修饰符：
1.prevent:阻止默认事件（常用）
2.stop:阻止事件冒泡（常用）
3.once:事件只触发一次（常用）
4.capture:使用事件的捕获模式
5.self:只有event.target是当前操作的元素时才触发
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
   
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <!-- 阻止默认事件（常用） -->
      <a href="http://www.atguigu.com" @click.prevent="showInfo"
        >点我提示信息</a
      >
      <!-- 阻止事件冒泡 -->
      <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
        <!-- 即阻止冒泡又阻止跳转事件 -->
        <a href="http://www.atguigu.com" @click.prevent.stop="showInfo"
          >点我提示信息</a
        >
      </div>
      <!-- 事件只触发一次 -->
      <button @click.once="showInfo">点我提示信息</button>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
      },
      methods: {
        showInfo(e) {
          alert("同学你好");
        },
      },
    });
  </script>
</html>

3.键盘事件

1.Vue中常见的按键别名
回车 => enter
删除 => delete
退出 => esc
空格 => space
换行 => tab（特殊，必须配合keydown去使用）
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定。但注意要转为kebab-case(短横线命名)
3.系统修饰符(用法特殊)：ctrl,alt,shift,meta
(1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
(2)配合keydown使用，正常触发事件
4.也可以使用keyCode去指定具体的按键（不推荐）
5.Vue.config.keyCodes自定义键名=键码，可以去定制按键别名

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <input
        type="text"
        placeholder="按下回车提示输入"
        @keyup.ctrl="showInfo"
      />
      <!-- ctry和y键一起被摁下的时候，才能调用该函数 -->
      <input
        type="text"
        placeholder="按下回车提示输入"
        @keyup.ctrl.y="showInfo"
      />
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
      },
      methods: {
        showInfo(e) {
          console.log(e.target.value);
        },
      },
    });
  </script>
</html>

08_计算属性

1.姓名案例_插值语法实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstName" /><br /><br />
      名: <input type="text" v-model="lastName" /><br /><br />
      全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
    </div>
  </body>
  <script>
    new Vue({
      el: "#root",
      data: {
        firstName: "张",
        lastName: "三",
      },
    });
  </script>
</html>

2.姓名案例_methods实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstName" /><br /><br />
      名: <input type="text" v-model="lastName" /><br /><br />
      全名：<span>{{fullName()}}</span>
    </div>
  </body>
  <script>
    new Vue({
      el: "#root",
      data: {
        firstName: "张",
        lastName: "三",
      },
      methods: {
        fullName() {
          return this.firstName + "-" + this.lastName;
        },
      },
    });
  </script>
</html>

3.姓名实例_计算属性

计算属性：

1.定义：要用的属性不存在，要通过已有属性计算得来。

2.原理：底层借助了Object.defineproperty方法提供的getter和setter

3.get函数什么时候执行？

（1）初次读取时会执行一次

（2）当依赖的数据发生改变时会被再次调用

4.优势：与methods实现相比，内部有缓存机制（复用），效率高，调式方便

5.备注：

1.计算属性最终会出现在vm上，直接读取使用调用即可

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstName" /><br /><br />
      名: <input type="text" v-model="lastName" /><br /><br />
      全名：<span>{{fullName}}</span>
    </div>
  </body>
  <script>
    new Vue({
      el: "#root",
      data: {
        firstName: "张",
        lastName: "三",
      },
      computed: {
        fullName: {
          //get有什么用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
          //get什么时候调用？1.初次读取fullName时 2.所依赖的数据发生变化时
          get() {
            return this.firstName + "-" + this.lastName;
          },
          set(value) {
            const arr = value.split("-");
            this.firstName = arr[0];
            this.lastName = arr[1];
          },
        },
      },
    });
  </script>
</html>

4.计算属性简写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstName" /><br /><br />
      名: <input type="text" v-model="lastName" /><br /><br />
      全名：<span>{{fullName}}</span>
    </div>
  </body>
  <script>
    new Vue({
      el: "#root",
      data: {
        firstName: "张",
        lastName: "三",
      },
      computed: {
        //完整写法
        /* fullName: {
          get() {
            return this.firstName + "-" + this.lastName;
          },
          set(value) {
            const arr = value.split("-");
            this.firstName = arr[0];
            this.lastName = arr[1];
          },
        }, */
        //简写
        fullName() {
          return this.firstName + "-" + this.lastName;
        },
      },
    });
  </script>
</html>

09_监视属性

1.天气案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>今天天气很{{info}}</h2>
      <!-- <button @click="isHot = !isHot">切换天气</button> -->
      <button @click="changeWeather">切换天气</button>
    </div>
  </body>
  <script>
    new Vue({
      el: "#root",
      data: {
        isHot: true,
      },
      computed: {
        info() {
          return this.isHot ? "炎热" : "凉爽";
        },
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot;
        },
      },
    });
  </script>
</html>

2.天气案例_监视属性

监视属性watch:
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的两种写法:
(1)new Vue传入watch配置
(2)通过vm.$watch监视

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    
    <div id="root">
      <h2>今天天气很{{info}}</h2>
      <button @click="changeWeather">切换天气</button>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data: {
        isHot: true,
      },
      computed: {
        info() {
          return this.isHot ? "炎热" : "凉爽";
        },
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot;
        },
      },
      /* watch: {
        isHot: {
          immediate: true, //初始化时让hander调用
          //handler什么时候调用？当isHot发生改变时
          handler(newValue, oldValue) {
            console.log("isHot被修改了", newValue, oldValue);
          },
        },
      }, */
    });
    vm.$watch("isHot", {
      immediate: true, //初始化时让hander调用
      //handler什么时候调用？当isHot发生改变时
      handler(newValue, oldValue) {
        console.log("isHot被修改了", newValue, oldValue);
      },
    });
  </script>
</html>

3.天气案例_深度监视

深度监测：

(1)Vue中的watch默认不监测对象内部值的改变（一层）

(2)配置deep:true可以监测对象内部值改变(多层)

备注：

(1)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

(2)使用watch时根据数据的具体结构，决定是否采用深度监视

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    
    <div id="root">
      <h2>今天天气很{{info}},{{number.a}},{{number.a}}</h2>
      <button @click="changeWeather">切换天气</button>
      <hr />
      <button @click="number.a++">点我让a+1</button>
      <button @click="number.b++">点我让b+1</button>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data: {
        isHot: true,
        number: {
          a: 1,
          b: 1,
        },
      },
      computed: {
        info() {
          return this.isHot ? "炎热" : "凉爽";
        },
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot;
        },
      },
      watch: {
        isHot: {
          // immediate: true, //初始化时让hander调用
          //handler什么时候调用？当isHot发生改变时
          handler(newValue, oldValue) {
            console.log("isHot被修改了", newValue, oldValue);
          },
        },
        //监视多级结构中某个属性的变化
        /* "number.a": {
          handler() {
            console.log("a被改变了");
          },
        }, */
        //监视多级结构中所有属性的变化
        number: {
          deep: true,
          handler() {
            console.log("number改变了");
          },
        },
      },
    });
  </script>
</html>

4.监视属性_简写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 简写的前提：没有immediate和deep -->
    <div id="root">
      <h2>今天天气很{{info}}</h2>
      <button @click="changeWeather">切换天气</button>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data: {
        isHot: true,
      },
      computed: {
        info() {
          return this.isHot ? "炎热" : "凉爽";
        },
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot;
        },
      },
      watch: {
        //正常写法
        /* isHot: {
          // immediate: true, //初始化时让hander调用
          //deep:true
          //handler什么时候调用？当isHot发生改变时
          handler(newValue, oldValue) {
            console.log("isHot被修改了", newValue, oldValue);
          },
        }, */
        //简写
        /* isHot() {
          console.log("isHot被修改了", newValue, oldValue);
        }, */
      },
    });
    //正常的写法
    /* vm.$watch("isHot", {
      immediate: true, //初始化时让hander调用
      deep: true,
      //handler什么时候调用？当isHot发生改变时
      handler(newValue, oldValue) {
        console.log("isHot被修改了", newValue, oldValue);
      },
    }); */

    //简写
    vm.$watch("isHot", function () {
      console.log("isHot被修改了");
    });
  </script>
</html>