人类高质量Vue学习笔记（一）

1. vue 简介

官网：cn.vuejs.org/

官方解释：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

特点：

• 简单：基于html、css、js
• 高效：开发前端页面效率非常高
• 响应式：实时监听属性的改变，立即更新视图的数据

总结：咱们中国人尤雨溪开发的一个开源的、简单的、高效的、响应式的前端技术。

2. 快速入门

2.1 引入 vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

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

2.2 HelloWorld

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

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", 
        data:{    
            msg:"hello world"
        },
        methods:{
          
        }
    });
</script>

运行结果：

关键点：

• const：表明这是一个常量。
• new Vue({})：表明这是一个vue 应用。
• el：vue 绑定的作用域范围，这里绑定的 dom 元素是 id 为 app 的 div。
• data：用来定义一些属性，这里的属性是 msg。
• methods：用来定义一些方法。
• {{}}：插值语法，用于输出属性的值。不过如果遇到网速慢等情况，就会出现插值闪烁的情况。

插值闪烁：遇到网速慢的情况，页面数据未加载完会显示原始的{{}}。上面的例子如果遇到插值闪烁，页面就会显示 {{msg}}。

3. 常用指令

3.1 v-text

• v-text 指令将 data 中的数据以文本的形式渲染到指定标签中。
• 如果包含 html 标签，则一并输出。
• 直接在 v-text 标签中写 属性名，不用写 {{}}。

<div id="app">
    <p v-text="title"></p>
    <p v-text="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",  
        data:{      
            title:"我爱中国！",
            content:"<p> 哈哈哈哈 </p>"
        },
    })
</script>

运行结果：

3.2 v-html

• v-html 指令先解析 html 标签再将数据渲染到指定标签中，类似 js 的 innerHTML
• 直接在 v-html 标签中写 属性名，不用写 {{}}。

<div id="app">
    <p v-html="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",  
        data:{      
            content:"<p> 哈哈哈哈 </p>"
        },          
    })
</script>

运行结果：

3.3 v-if

• 通过条件判断控制页面元素是否展示

<div id="app">
        <p v-if="age==18">我今年18岁!!!</p>
        <span v-if="show">
            如果 show 为 true 则显示,否则不显示!
         </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            show: true,
            age: 18
        },
    });
</script>

运行结果：

3.4 v-show

• 用来控制页面元素是否展示

<div id="app">
  <h2 v-show="show"> show 为 true 展示内容！</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            show: true
        }
    });
</script>

运行结果：

v-show 和 v-if 的区别：

• v-if 是动态的添加或者删除 DOM 元素
• v-show 是设置标签的 display 为 none 的时候，该元素隐藏。

3.5 v-on

• v-on 用来绑定事件
• 语法：v-on:click="方法(参数)"
• 简写：@click="方法名(参数)"

3.5.1 v-on 基本语法

<div id="app">
    姓名：{{name}}
    <hr>
    年龄：{{age}}
    <br>
    <input type="button" value="点击年龄加1" v-on:click="addChange">
    <br>
    <input type="button" value="点击年龄减1" @click="subChange">
    <br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name:"张无忌",
            age:40
        },
        methods: {
            addChange(){
                this.age++;
            },
            subChange(){
                this.age--;
            },
            change(age,name){
                this.age=age;
                this.name=name;
            }
        }
    });
</script>

3.5.2 v-on 事件函数传参

<div id="app">
        姓名：{{name}}
        <hr>
        年龄：{{age}}
        <br>
        <!-- vue事件传参 -->
<input type="button" value="年龄改为25，姓名改为周芷若" @click="change(25,'周芷若')">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name:"张无忌",
            age:40
        },
        methods: {
            change(age,name){
                this.age=age;
                this.name=name;
            }
        }
    });
</script>

总结：

• this 指向我们创建的 vue 实例。
• 事件函数两种写法：
  • change:function(){}
  • change(){}

3.6 v-bind

• v-bind 用来绑定 html 属性，动态更新 html 属性值
• 语法：v-bind:属性名，例如 v-bind:href=""
• 简写：:属性名，例如 :href=""

3.6.1 基本语法

<div id="app">
    <a v-bind:href="url" >百度一下</a>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            url: "https://www.baidu.com",
        },
    });
</script>

3.6.2 绑定对象

v-bind:class="active:isUse",我们这里绑定了元素的 class 选择器，属性值是一个对象。当对象里面的 isUse 为 true 时，该元素就拥有了该类名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <a v-bind:href="url" v-bind:class="{active:isUse}">百度一下</a>
        <hr>
        <input type="button" value="点击修改超链接的颜色" @click="changeColor">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                url: "https://www.baidu.com",
                isUse: true
            },
            methods: {
                changeColor() {
                    this.isUse = !this.isUse
                }
            }
        });
    </script>
</body>
</html>

3.7 v-for

用来循环遍历数组，数组里面的数据可以是普通元素，也可以是对象

<div id="app">
     <span>姓名：{{user.name}}</span>
     <br>
     <span>年龄：{{user.age}}</span>
     <hr>
     <!-- 通过v-for 遍历对象 -->
     <span v-for="(user, index) in users" :key="user.id">
          {{user.name}} {{user.age}} <br>
     </span>
     <hr>
     <!-- 通过v-for遍历数组 -->
     <span v-for="(a, index) in address" >
        {{index}}  {{a}} <br>
     </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const  app = new Vue({
        el: '#app',
        data: {
            user:{name:"张无忌",age:25},
            users:[{name:"张三",age:21},{name:"李四",age:26}],
            address:["北京","广东","深圳"]
        },
    });
</script>

运行结果：

注意：

• 一定要使用:key ,key 给每个节点做一个唯一标识，遍历速度更加高效。
• 不推荐同时使用 v-if 和 v-for，因为 v-for 具有比 v-if 更高的优先级。

3.8 v-model

• 使用 v-model 可以实现数据的双向绑定。
• 双向绑定：vue 实例中 data 数据变化导致表单中数据变化，表单中数据变化导致 vue 实例中 data 数据发生变化。
• MVVM 架构，双向绑定的机制
  • Model：vue 实例中的 data 数据
  • VM：ViewModel，数据监听器
  • View：页面展示的数据

<div id ="app">
     <input type="text" v-model="msg"> 
     {{msg}}
     <hr>
     <input type="button" value="点击修改msg的值" @click="change">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
    el: '#app',
    data: {
        msg:"我爱中国，我热爱这片土地！"
    },
    methods: {
        change(){
            this.msg="哈哈哈哈哈！";
        }
    }
 });
</script>

运行结果：

4. 修饰符

• 修饰符：和事件同时使用，可以修改事件的触发机制
• 常见的事件修饰符：
  • stop
  • prevent
  • once

4.1 事件修饰符

4.1.1 stop 事件修饰符

用来阻止事件冒泡，举个例子：点击子 div ,父 div 事件也会被点击。

<div id="app">
    <div class="father" @click="divClick">
        <input type="button" value="按钮" @click.stop="btnClick">
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
      el: "#app",
      data: {
      
      },
      methods: {
          btnClick(){
              alert('button被点击了');
          },
          divClick(){
              alert('父div被点击了');
          }
      }
  });
</script>

4.1.2 prevent 事件修饰符

用来阻止标签的默认行为

<a href="http://www.baidu.com/" @click.prevent="btnClick">百度一下</a>

4.1.3 once 事件修饰符

让指定事件只触发一次

<a href="http://www.baidu.com/" @click.prevent.once="btnClick">百度一下</a>

4.2 按键修饰符

• 与键盘中的事件绑定在一起
• 常见按键修饰符
  • enter
  • tab

4.2.1 enter 回车键修饰符

回车键触发事件

<div id ="app"> 
        <input type="text" v-model="msg" @keyup.enter="keyups">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
    el: '#app',
    data: {
        msg:"我爱你中国"
    },
    methods: {
        keyups(){
            this.msg="我爱你中国共产党！";
        }
    }
 });
</script>

4.2.2 tab 键修饰符

tab 键触发事件

<div id ="app"> 
    <input type="text" v-model="msg" @keyup.tab="keyups">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
    el: '#app',
    data: {
        msg:"我爱你中国"
    },
    methods: {
        keyups(){
            this.msg="我爱你中国共产党！";
        }
    }
 });
</script>