Vue2基础-基本API

普通上班族
418 阅读4分钟

Vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

摘自官网介绍

1.安装

  • 创建html文件之后可以通过以下方式引入：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

或者为了提高页面加载速度，可以在webserver上安装vue

npm install Vue --save-dev # or=> --save

<!-- 引入本地vue.js-->
<script src="./node_modules/vue/dist/vue.js"></script>

2.初始化Vue

  • 通过实例化Vue对象来使用vue
  • 响应式数据在使用{{ data }}模版，类似与后端渲染nujunk之类的。
  • 响应式数据需要写在script.app.data对象中
<!DOCTYPE html>
<html lang="en">
  <head>
		...
    <script src="./node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 所有响应式模版需要写在{{}}中-->
    <div id="app">{{ msg }}</div>
    <script>
      //创建实例来初始化vue，所有vue相关配置及代码需要卸载Vue({***})中
      const app = new Vue({
        el: "#app", //匹配节点
        data: {
          msg: "hello world", //所有响应式数据需要写在data对象之中
        },
      });
    </script>
  </body>
</html>

3.事件监听

Vue给我们提供了v-on 的APi，缩写是@。

  • 绑定事件监听器。事件类型可以由参数指定，表达式可以是一个方法名，也可以是一个內联语句。
  • 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
<!DOCTYPE html>
<html lang="en">
  <head>
		...
    <script src="./node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{count}}</p><br>
			<!-- 
        方法一：表达式填写方法名称，并在script.app.methods对象内写入该方法的函数体
        =>	<button v-on:click="handleClick">click</button>
        方法二：表达式填写内联函数
        =>	<button v-on:click="count++">click</button>
        引申一：可以传参
        =>	<button v-on:click="handleClick(0,$event)">click</button>
        引申二：可以使用修饰符 => .once：只回调一次
        =>	<button  v-on：click.once="count++">click</button> 
			-->
      <button @click.once="count++">click</button>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          count: 0,
        },
        //所有的函数都需要放到 methods
        methods: {
          handleClick(type, e) {
            console.log(e);
            console.log(type);
            console.log("click事件发生了");
            return this.count ++ ;
          },
        },
      });
    </script>
  </body>
</html>

4.计算属性

我们是可以很方便地在模板内使用表达式的，比如翻转字符串：msg.split("").reverse().join("")，这为我们处理模板的各种逻辑带来了便利。但是这样也会有显而易见的弊端：代码可读写差，维护起来不方便。

因此，Vue给我们提供了“计算属性”这种方式，用来处理复杂逻辑。

  • 示例
  <body>
    <div id="app">{{ reverseMsg }},{{reverseMessage}}</div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          msg: "hello world",
          count:0
        },
        methods: {
          // 方法
          reverseMessage() {
            console.log("reverseMessage");
            return this.msg.split("").reverse().join("");
          },
        },
        computed: {
          // 计算属性
          reverseMsg() {
            console.log("reverseMsg");
            return this.msg.split("").reverse().join("") + this.count;
          },
        },
      });
    </script>
  </body>

计算属性的特点：

  1. 只能生成一个计算属性 => reverseMsg
  2. 可以同时检测多个响应式数据 => msg和count
  3. 只有当响应式数据发生改变时，计算属性才会重新执行并加载；当没有响应式数据变化时，计算属性可以被当做一个固定的值存在浏览器缓存中，每次调用不必重新执行代码。

如果是methods方法，如reverseMessage()方法，那么浏览器每次读取到{{reverseMessage}}的时候，都会执行一次代码

5.侦听属性

Vue给我们提供了另一种更通用的方式来侦听响应式数据和实例的方式，并且通过侦听属性可以对数据变化做出相应。

侦听属性的特点：

  1. 同时影响多个相应数据的变化
  2. 只能同时监听一个值

通俗的来讲：

computed是“多对1” => 多个值的变化，影响一个值的生成

watch是“1对多” => 一个值的变化，影响多个值的变化

  • 示例
<body>
  <div id="app">
		{{count}}
    <button @click="handleClick">click</button>
    {{hello1}} {{hello2}}
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        count: 0,
        watch_res1: "hello1",
        watch_res2: "hello2",
      },
      methods: {
        handleClick() {
          console.log("click");
          this.count++;
        },
      },
      watch: {
        count: {
          handler(newValue, oldValue) {
            console.log("newValue", newValue);
            console.log("oldValue", oldValue);
            this.watch_res1 = this.count + "hello1";
            this.watch_res2 = this.count + "hello2";
          },
          immediate: true, //立刻执行。watch可以传入配置，详见官网文档
        },
      },
    });
  </script>
</body>
  • watch还可以监听数组和对象
...
data:{
  users:{
    user1:'xiaoming',
    user2:'zhangsan'
  },
  arr:[1,2,3],
}
watch:{
  users:{
    handler(newValue,oldValue){**callback code**}
  },
  arr:{
    handler(newValue,oldValue){**callback code**}
  }
}

6.条件渲染

Vue提供了v-if语法来在特定条件下渲染DOM，逻辑与JS语法完全一致。

  • 示例
<body>
    <div id="app">
        <div v-if="age === 18">刚刚成年</div>
        <div v-else-if="age > 18">成年人</div>
        <div v-else>未成年</div>

        <div v-show="age === 18">show</div>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                age: 17,
            },
        });
    </script>
</body>

如果用浏览器执行这段代码，可以看出v-if和v-show的区别：

  • v-if是当条件并不满足时，不渲染对应的DOM
  • v-show是无论什么情况都会渲染DOM，通过style.display控制是否显示

7.列表渲染

VUe提供了v-for语法来循环渲染数组或者对象，使用方式与JS语法类似。

  • 示例
<body>
    <div id="app">
        <div v-for="(item,index) in list">{
            {index}} - {{item}}
        </div>
        <div v-for="(val,key,index) in users">
            {{val.name}} - {{key}} - {{index}}
        </div>
    </div>
    <script>
        window.app = new Vue({
            el: "#app",
            data: {
                list: ["张三", "李四", "王五"],
                users: {
                    tom: {
                        name: "tom",
                    },

                    john: {
                        name: "john",
                    },
                },
            },
        });
    </script>
</body>

8.class和style绑定

我们可以用过v-bind来对class和style进行绑定，当class发生变化的时候，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="./node_modules/vue/dist/vue.js"></script>
    <style>
        .color {color: pink;}
        .font {font-size: 50px;}
    </style>
</head>

<body>
    <div id="app">
        <div :class="classes" :style="styleInfo">test class</div>
    </div>
    <script>
        window.app = new Vue({
            el: "#app",
            data: {
                // 方法一：使用数组进行配置，并且可以使用三元表达式
                //  => classes: ["color", true === false ? "font" : ""],
                // 方法二：使用对象配置 
                classes: {
                    font: true,
                    color: true
                },
                //比较一下class和style配置上区别：
                styleInfo: {
                  color: "yellow",
                  fontSize: "50px",
                },
            },
        });
    </script>
</body>

</html>

9.v-modle

我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

摘自官网文档

修饰符：

  • .lazy - 取代 input 监听 change 事件
  • .number - 输入字符串转为有效的数字
  • .trim - 输入首尾空格过滤

示例：

<body>
    <div id="app">
        {{msg}} {{isCheckbox}}
        <input type="text" v-model.number="msg" />
        <input type="checkbox" v-model="isCheckbox" />
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                isCheckbox: false,
                msg: "",
            },
            methods: {
                changeCheckbox(e) {
                    this.isCheckbox = e.target.checked;
                },
                changeInput(e) {
                    this.msg = e.target.value;
                },
            },
            watch: {
                msg(newValue, oldValue) {
                    console.log(typeof newValue);
                },
            },
        });
    </script>
</body>

以上是对Vue常用API的一些简单总结，Vue2版本的API相当多，因此需要学会查询API => 官方文档

本文内容主要来自于：

​ 1.开课吧课程内容：www.kaikeba.com/

​ 2.Vue官方文档：cn.vuejs.org/v2/guide/

​ 3.自己的理解

avatar
文章
阅读
粉丝