Vue2笔记

user4993823822988
151 阅读1分钟

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">{{message}}</div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据 vm._data = data
      data() {
        return {
          message: 'Hello'
        }
      }
    })
  </script>
</body>
</html>

条件渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
    <!-- v-if动态创建或删除DOM元素控制显示与隐藏 -->
    <h1 v-if="flag">{{message}}</h1>
    <!-- v-show动态增加或删除display:none属性控制显示与隐藏 -->
    <h1 v-show="flag">{{message}}</h1>
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {
          message: 'Hello',
          flag: true
        }
      }
    })
  </script>
</body>
</html>

列表渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
    <ul>
      <!-- item是列表中每一项 -->
      <li v-for="item in person">{{item}}</li>
    </ul>
    <ul>
      <!-- key是每一项的索引值 -->
      <li v-for="item, key in student">{{key}} {{item.id}} {{item.name}} {{item.age}}</li>
    </ul>
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {
          person: ['小明', '小红', '小黑'],
          student: [
            {
              id:001,
              name: '小明',
              age:18
            },
            {
              id:002,
              name: '小红',
              age:17
            },
            {
              id:003,
              name: '小黑',
              age:21
            },
          ]
        }
      }
    })
  </script>
</body>
</html>

属性绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
    <!-- v-bind: -->
    <img v-bind:src=imgUrl width="200px" height="200px">
    <!-- v-bind:简写为: -->
    <img :src=imgUrl width="200px" height="200px">
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {
          imgUrl: 'https://cn.vuejs.org/images/logo.svg',
        }
      },
    })
  </script>
</body>
</html>

绑定class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .active {
      background-color: orangered;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
    <!-- 绑定class -->
    <!-- 对象格式 -->
    <h1 :class="{active:isTrue}">{{message}}</h1>
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {
          message: 'Hello',
          isTrue: true
        }
      },
    })
  </script>
</body>
</html>

绑定style

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
     <div :style="styleObj"></div>
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {
          styleObj: {
            width: '200px',
            height: '200px',
            'background-color': '#ff3300'
          }
        }
      }
    })
  </script>
</body>
</html>

双向数据绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
    <p>用户名：{{username}}</p>
    <!--v-model可以让页面与数据源双向绑定-->
    <!--可以在不操作DOM的情况下，获取表单中的数据-->
    <input type="text" v-model="username">
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {
          username: '张三'
        }
      },
    })
  </script>
</body>
</html>

v-model的修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
    <p>{{num}}</p>
    <!--
    v-model修饰符：
    number转为数字
    lazy在失去焦点时同步更新数据
    trim自动过滤首尾的空白字符
    -->
    <input type="text" v-model.number="num">
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {
          num: 0
        }
      },
    })
  </script>
</body>
</html>

事件绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
    <p>count的值为：{{count}}</p>
    <!-- v-on:事件绑定指令 -->
    <button v-on:click="add">＋1</button>
    <!-- v-on:简写为@ -->
    <button @click="sub">-1</button>
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {
          count: 0
        }
      },
      // 方法
      methods: {
        add: function () {
          this.count +=1
        },
        sub() {
          this.count -=1
        }
      }
    })
  </script>
</body>
</html>

$event事件对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
    <!--vue提供了一个内置变量$event，它是原生DOM事件对象，不带参数默认有一个$event事件对象作为参数传递-->
    <button @click="fn1">button</button>
    <br>
    <!--手动指定参数后，也必须手动传递$event事件对象-->
    <button @click="fn2(1,$event)">button</button>
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {

        }
      },
      // 方法
      methods: {
        fn1(e) {
          console.log(e);
        },
        fn2(num,e){
          console.log(e)
        }
      }
    })
  </script>
</body>
</html>

事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
    <!--
    事件修饰符添加在事件绑定后(vue提供)
    prevent阻止默认事件
    stop阻止事件冒泡
    once只触发一次绑定事件处理函数
    -->
    <a href="http://www.google.com" @click.prevent="fn">Google</a>
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {

        }
      },
      // 方法
      methods: {
        fn(e) {
          // preventDefault()阻止默认事件
          // 原生写法 e.preventDefault();
        }
      }
    })
  </script>
</body>
</html>

按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
     <!-- 按键修饰符添加在事件绑定后(vue提供) -->
    <input type="text" @keyup.esc="clear">
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {

        }
      },
      // 方法
      methods: {
        clear(e) {
          console.log('已触发清除方法');
            // 事件对象.target属性是获取触发事件对象的目标，也就是绑定事件的元素
            // 事件对象.target.value返回元素中的内容
            e.target.value = '';
        }
      }
    })
  </script>
</body>
</html>

计算属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
    姓：<input type="text" v-model="firstName">
    名：<input type="text" v-model="lastName">
    <br>
    <p>姓名：{{fullName}}</p>
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {
          firstName: '张',
          lastName: '三'
        }
      },
      // 计算属性
      // 通过getter/setter实现对属性数据的显示和监视。计算属性存在缓存，多次读取只执行一次getter
      computed: {
        // 需要计算的属性名作为方法名
        fullName() {
          // 将返回值作为最终的属性值
          return this.firstName + this.lastName;
        }
      }
    })
  </script>
</body>
</html>

侦听器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
  <div id="app">
    <input type="text" v-model="msg">
    <input type="text" v-model="test">
    <input type="text" v-model="info.message">
  </div>

  <!-- 1.导入Vue获取Vue()构造方法 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 2.创建Vue实例，传入配置对象
    const VM = new Vue({
      //  3.指定挂载容器
      el: '#app',
      // 数据
      data() {
        return {
          msg: 'hello',
          test: 'hello',
          // 信息对象
          info: {
          message: 'hello'
          }
        }
      },
      // 侦听器
      watch: {
        // 侦听器可以监视数据的变化
        // 函数格式侦听器(不能配置)
        // 监视的数据名作为方法名，有两个参数：新值与旧值
        msg(newVal, oldVal) {
          console.log('msg值已发生变化');
          console.log('新值' + newVal);
          console.log('旧值' + oldVal);
        },
        // 对象格式侦听器
        test: {
          // 侦听处理函数(可以配置)
          handler(newVal, oldVal) {
            console.log(newVal, oldVal);
          },
          // 打开页面自动触发
          immediate: true,
        },

        info: {
          handler(newVal, oldVal) {
            console.log(newVal, oldVal);
          },
          // 深度侦听，只要对象中任何一个属性发生变化都会触发侦听器
          deep: true
        }
      }
    })
  </script>
</body>
</html>
avatar
文章
阅读
粉丝