Vue 第一天学习笔记和代码

1 Vue的基本使用

<!-- 将来 new 的vue 实例，会控制这个 元素中的所有内容 -->
    <div id="app">
        <p id="content">{{msg}}</p>
    </div>
    <!-- 创建一个vue实例 -->
    <script>
        // 当我们导入包之后，浏览器的内存中，就多一个vue的构造函数
        var vm = new Vue({
            el: "#app", //表示 当前我们new的这个vue实例，要控制页面上的那个区域
            data: { //data属性中，存放的是el中要用到的数据
                msg: "第一次使用vue",//通过vue提供的指令，很方便的就能把数据渲染到页面上，不再需要操作DOM元素了。
            }
        })
    </script>

2 Vue中的 插入值展示多中展示方式和v-bind的使用

<div id="app">
        <!-- 使用v-clock 能够解决 插值表达式闪烁的问题 -->
        <p v-cloak>{{msg}}</p>
        <h2 v-text="msg"></h2>
        <!-- v-text是没有闪烁问题的 -->
        <!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换占位符。 -->
        <!-- **************************************************** -->
        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
        <!-- 如果我们需要插入html代码。就需要使用v-html来进行插值，如果使用占位符或者v-text只会当成字符串处理 -->
        <div v-html="msg2"></div>
        <!-- v-bind 是vue提供的绑定属性的指令 -->
        <!-- 在v-bind 中可以写合法的js表达式 -->
        <!-- <input type="button" value="按钮" v-bind:title="myTitle+'23232324年后'"> -->
        <input type="button" value="按钮" :title="myTitle"> <!-- 该写法等同于上面的写法 可以简写-->
        <!-- Vue中提供了v-on: 事件绑定机制  -->
        <input type="button" value="按钮" :title="myTitle" v-on:click="sayHello">
    </div>
    <script src="../lib/vue.js"></script>
    <script>
        var str = "我是一个很大的h1";
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "test",
                msg2: `<h1>${str}</h1>`,
                myTitle: "这是我自己的title"
            },
            methods: { // 这个methods属性中定义了当前vue实例中所有可以用的方法
                sayHello() {
                    alert("你好啊");
                }
            },
        });
    </script>

注意：v-clock在使用的时候。需要在style中加入以下代码才可以正常解决占位符闪烁问题。

<style>
        [v-clock] {
            display: none;
        }
    </style>

3 使用Vue实现文字跑马灯效果（熟习Vue使用）

<div id="app">
 <!-- vue中给标签进行事件绑定 v-on: 来进行 简写方式 @事件 -->
        <input type="button" value="动起来" @click="move">
        <input type="button" value="停下来" @click="stop">

        <h4>{{msg}}</h4>
    </div>

    <script>
        //注意在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须 通过this.数据属性名 或this.方法名 来进行访问，这里的this就表示我们new出来的vm实例对象
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "猥琐发育，别浪~~~~",
                intervalId: null,
            },
            methods: {
                move() {
                    if (this.intervalId != null) return; //判断是否已经开启一个定时器 如果有 就返回
                    this.intervalId = setInterval(() => {
                        var str = this.msg; //获取data中的数据
                        var start = str.substring(0, 1); //获取第一个字符
                        var end = str.substring(1); //获取后面的字符
                        this.msg = end + start; //经行尾首拼接后赋值给data中的msg
                    }, 1000);
                    //注意：VM实例。会监听data中数据发生的变化，只要数据一发生变动，就会自动吧最新的数据，从data同步到页面上，因此，在编写的时候，只需要关心数据，而不需要考虑如何使用DOM重新渲染页面。
                },
                stop() {
                    clearInterval(this.intervalId);
                    this.intervalId = null; //重新给this.intervalId赋值为null，在此创建定时器。
                }
            },
        })
    </script>

4 Vue 中的时间修饰符

<div id="app">
    <!-- 使用.stop 阻止冒泡事件 -->
    <!-- <div class="inner" @click="div1Handler">
      <input type="button" value="戳我" @click.stop="btnHandler">
    </div> -->

    <!-- 使用.prevent来阻止默认事件 -->
    <!-- <a href="https://www.baidu.com" @click.prevent="linkCilik">有事没事你点点</a> -->

    <!-- 使用.capture 使用事件捕获机制 -->
    <!-- <div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳我" @click="btnHandler">
    </div> -->

    <!-- 使用.self 实现只有点击当前元素的时候才会触发处理函数 -->
    <!-- <div class="inner" @click.self="div1Handler">
      <input type="button" value="戳我" @click="btnHandler">
    </div> -->

    <!-- 使用.once 实现只执行一次 -->
    <!-- <a href="https://www.baidu.com" @click.prevent.once="linkCilik">有事没事你点点</a> -->

    <!-- 演示： .stop 和 .self 的区别 -->
    <div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳我" @click.stop="btnHandler">
      </div>
    </div>
    <!-- .self 只会阻止自己身上冒泡行为的触发， 并不会真正阻止冒泡的行为 -->
    <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳我" @click="btnHandler">
      </div>
    </div>
  </div>

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

      },
      methods: {
        div1Handler() {
          console.log("这是div的");
        },
        btnHandler() {
          console.log("这是btn的");
        },
        linkCilik() {
          console.log("这是a标签的")
        },
        div2Handler() {
          console.log("outer")
        }
      },
    })  
  </script>

5 v-model指令（数据双向绑定 MVVM中的VM）

 <div id="app">
    <h4>{{msg}}</h4>

    <!-- v-bind 只能实现数据的单向绑定 从M自动绑定到V 无法实现双向绑定 -->
    <!-- <input type="text" :value="msg"> -->
    <!-- 使用v-model 指令 可以实现表单元素和model 中数据的双向绑定 -->
    <!-- 注意 v-model 只能给表单元素使用 -->
    <input type="text" v-model="msg">

  </div>

  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        msg:'好好学习天天向上',
      },
      methods: {

      }
    })
  </script>

6 通过v-model指令来实现一个简单的计算器

<div id="app">
    <input type="text" v-model="n1">
    <select v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="calc">
    <input type="text" v-model="result">
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        n1: 0,
        n2: 0,
        opt: "+",
        result: 0,
      },
      methods: {
        calc() {//算数方法
          switch (this.opt) {
            case "+":
              this.result = parseFloat(this.n1) + parseFloat(this.n2);
              break;
            case "-":
              this.result = parseFloat(this.n1) - parseFloat(this.n2);
              break;
            case "*":
              this.result = parseFloat(this.n1) * parseFloat(this.n2);
              break;
            case "/":
              this.result =parseFloat(this.n1) / parseFloat(this.n2);
              break;
          }
          // eval(); 将字符串经行解析执行
        }
      }
    })
  </script>

7 Vue中的class属性

 在Vue中class 属性可以 通过数组 对象来进行，但是一定要使用 ：class 才是vue中的class属性

<div id="app">
    <h1 class='red line big'>这是一个大大大大大大大大的H1</h1>
    <h1 :class="['red','line','big']">这是一个大大大大大大大大的H1</h1>
    <h1 :class="['red','line',flag?'big':'']">这是一个大大大大大大大大的H1</h1>
    <h1 :class="classObj">这是一个大大大大大大大大的H1</h1>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        flag: false,
        classObj: { red: true, big: this.flag }
      },
      methods: {

      }
    })
  </script>

8 Vue中的style属性

 和class属性一致

<div id="app">
    <h1 style="color:red">这是一个大大大大大大大大的H1</h1>
    <!-- 在使用v-bind 写法操作style的时候， 在｛｝中 如果左边的样式名没有 - 字符则不需要加引号，如果有则需要家上引号 -->
    <h1 :style="{color:'red','font-size':'80px'}">这是一个大大大大大大大大的H1</h1>
    <!-- 直接引用data -->
    <h1 :style="styleObj">这是一个大大大大大大大大的H1</h1>
    <!-- 通过数组方式 引用多个data样式 -->
    <h1 :style="[styleObj,styleObj2]">这是一个大大大大大大大大的H1</h1>

  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        styleObj: { color: "red", border: '1px solid red' },
        // 在使用data 写法操作style的时候， 在｛｝中 如果左边的样式名没有 - 字符则不需要加引号，如果有则需要家上引号
        styleObj2: { 'font-size': '80px' }
      },
      methods: {

      }
    })

9 Vue中的v-for循环

首先需要注意的是 在v-for循环中 有一个重要的属性 :key  在下面我会详解

1 v-for循环数组 

<div id="app">
    <p v-for="(item, i) in list" :key="i">{{item}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        list: [1, 2, 3, 4, 5, 6, 7]
      },
      methods: {

      }
    })
  </script>

2 v-for循环数组对象

<div id="app">
    <p v-for="(item, i) in list" :key="i">{{item.id}} {{item.name}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        list: [{ id: 1, name: "asda" }]
      },
      methods: {

      }
    })
  </script>

3 v-for循环对象

<div id="app">
    <p v-for="(item, i) in list">值{{item}} 键{{i}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        list: { id: 1, name: "asda" }
      },
      methods: {

      }
    })
  </script>

4 v-for实现数字迭代 

注意： 在使用v-for对数字进行迭代是，不会从0开始 是从1开始迭代

<div id="app">
    <!-- 使用v-for进行数字迭代时，是从1开始的-->
    <p v-for="count in 10">{{count}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
      },
      methods: {
      }
    })
  </script>

10 v-for循环中key属性的使用

<div id="app">
    <div>
      <label>
        ID:
        <input type="number" v-model="id">
      </label>
      <label>
        姓名:
        <input type="text" v-model="name">
      </label>
      <input type="button" value="添加" @click="listPush">
    </div>
    <!-- 注意： v-for循环的时候 key属性只能用number或者string -->
    <!-- 注意： key在使用的时候，必须使用v-bind 属性绑定的形式，指定key的值 -->
    <!-- 在组件中,使用v-for循环的时候，或者是在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时 指定唯一的字符串/数字类型 key -->
    <p v-for="(item,index) in list" :key="item.id">
      <input type="checkbox"> {{item.id}}------{{item.name}}
    </p>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        id: "",
        name: "",
        list: [
          { id: 1, name: "典韦" },
          { id: 2, name: "典韦" },
          { id: 3, name: "典韦" },
          { id: 4, name: "典韦" },
          { id: 5, name: "典韦" }
        ]
      },
      methods: {
        listPush() {
          console.log(this.list.length)
          this.list.unshift({ id: this.id, name: this.name });
          this.id = parseInt(this.id) + 1;
        }
      }
    })
  </script>

11 v-if和v-show的使用

<div id="app">
    <!-- v-if特点： 每次都会重新删除或者创建标签 -->
    <!-- v-show特点： 每次不会重新进行DOM的删除和创建操作，只是切换了标签的display样式 -->

    <!-- v-if 有较高的切换性能消耗 -->
    <!-- v-show 有较高的初始渲染消耗 -->

    <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if  推荐使用v-show -->
    <!-- 如果元素可能永远也不会被显示出来被用户看到，则使用v-if -->
    <p v-if="flag">哈啊哈哈哈</p>
    <p v-show="flag">哈哈哈哈哈</p>
    <input type="button" value="转换" @click="flag=!flag">
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        flag: true,
      },
      methods: {

      }
    })
  </script>