Vue框架 - 技术栈

一. 什么是Vue

Vue是一款用于构建用户界面的渐进式的JavaScript框架。(官方：https://cn.vuejs.org/)
框架：就是一套完整的项目解决方案，用于快速构建项目
优点：大大提升前端项目的开发效率
缺点：需要理解记忆框架的使用规则(参照官网)

二. Vue快速入门

准备

(1) 引入Vue模块(官方提供)

(2) 创建Vue程序的应用实例，控制视图的元素

(3) 准备元素(div)，被Vue控制

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
</head>
<body>
    <div id="app">
        //差值表达式
        <h1>{{message}}</h1>
        <h1>{{number}}</h1>
    </div>
</body>
<script type="module">
    // 1. 引入Vue
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    // 2. 创建应用实例对象
     createApp({
        data(){
            return {
                message:'Hello Vue!',
                number:100
            }
        }
    }).mount('#app');
</script>
</html>

三. 常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同的含义，可以实现不同功能

|------------------------|-------------------------------|
| 常用指令 | 作用 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
| v-bind | 为HTML标签绑定属性值，如设置href，css样式等 |
| v-if/v-else-if/-v-else | 条件性的渲染某个元素，判断为ture时渲染，否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-model | 在表单元素上创建双向点数据绑定 |
| v-on | 为HTML标签绑定事件 |

四. v-for指令

作用：列表渲染，遍历容器的元素或者对象的属性
语法：<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr>
参数说明：

items为遍历的数组；

item为遍历出来的元素；

index为索引/下标，从0开始；可以省略，省略后的语法： v-for="item in items"

:key：:与key是紧挨着的，分开会报错，作用给元素添加的唯一标识，便于Vue进行列表项的正确排序复用，提高渲染性能；推荐使用id作为key(唯一)，不推荐使用index作为key(会变化，不对应)

注意：遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用v-for指令

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令v-for</title>
</head>
<body>
    <div id="container">
        <table >
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
                <tbody>
                    <tr v-for="(item,index) in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.gender}}</td>
                    </tr>
                </tbody>
            </thead>
        </table>
    </div>
</body>
<script type="module">
     import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
     createApp({
        data(){
            return {
                // 数组
                list:[
                    {
                        "id":"1",
                        "name":'张三',
                        "age":"13",
                        "gender":'男'
                    },
                    {
                        "id":"2",
                        "name":'李四',
                        "age":"18",
                        "gender":'男'
                    },
                    {
                        "id":"3",
                        "name":'王五',
                        "age":"14",
                        "gender":'男'
                    },
                    {
                        "id":"4",
                        "name":'赵六',
                        "age":"16",
                        "gender":'男'
                    }
                ]
            }
        }
    }).mount('#container');
</script>
</html>

五. v-bind

v-bind：动态为HTML标签绑定属性值，如href、src、style样式等；

语法：v-bind:属性名="属性值" 简化 :属性名="属性值"

注意：动态的为标签的属性绑定值，不能使用差值表达式，得使用v-bind指令。且绑定的数据，必须在data中定义。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令v-for</title>
</head>
<body>
    <div id="container">
        <table border="1"  style="width: 50%;height: 50%;">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>头像</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
                <tbody>
                    <tr v-for="(item,index) in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <!-- 动态的为标签的属性绑定值，不能使用差值表达式，得使用v-bind指令。且绑定的数据，必须在data中定义。 -->
                        <!-- <td><img class="avatar" src="{{item.img}}" alt="{{item.name}}"></td> -->
                        <td><img class="avatar" v-bind:src="item.img" alt="item.name"></td>
                        <td>{{item.age}}</td>
                        <td>{{item.gender}}</td>
                    </tr>
                </tbody>
            </thead>
        </table>
    </div>
</body>
<script type="module">
     import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
     createApp({
        data(){
            return {
                // 数组
                list:[
                    {
                        "id":"1",
                        "name":'张三',
                        "img":"img/th.jpg",
                        "age":"13",
                        "gender":'男'
                    },
                    {
                        "id":"2",
                        "name":'李四',
                          "img":"img/th.jpg",
                        "age":"18",
                        "gender":'男'
                    },
                    {
                        "id":"3",
                        "name":'王五',
                          "img":"img/th.jpg",
                        "age":"14",
                        "gender":'男'
                    },
                    {
                        "id":"4",
                        "name":'赵六',
                          "img":"img/th.jpg",
                        "age":"16",
                        "gender":'男'
                    }
                ]
            }
        }
    }).mount('#container');
</script>
</html>

六. v-if、v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if语法：v-if="表达式"，表达式为ture显示，false隐藏；原理：基于条件判断，用来控制创建或者移除元素节点(条件渲染)；要么显示要么不显示，不频繁切换；可以配合v-else-if / v-else进行链式调用条件判断

注意：v-else-if必须出现在v-if之后，可以出现多个；v-else必须出现在v-if/v-else-if之后

3.v-show语法： v-show="表达式"，表达式值为ture显示，false隐藏；原理：基于css样式display来控制显示与隐藏；频繁切换显示隐藏的场景

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令v-if、v-show</title>
</head>
<body>
    <div id="container">
        <table border="1"  style="width: 50%;height: 50%;">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>头像</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
                <tbody>
                    <tr v-for="(item,index) in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td><img class="avatar" v-bind:src="item.img" alt="item.name"></td>
                        <td>{{item.age}}</td>
                        <td>
                            <!-- v-if 控制-->
                            <span v-if="item.gender==1">男</span>
                            <span v-else-if="item.gender==2">女</span>
                            <span v-else>未知</span>

                            <!-- v-show 控制-->
                            <!-- <span v-show="item.gender==1">男</span>
                            <span v-show="item.gender==2">女</span>
                            <span v-show="item.gender!=1 && item.gender!=2">未知</span> -->
                        </td>

                    </tr>
                </tbody>
            </thead>
        </table>
    </div>
</body>
<script type="module">
     import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
     createApp({
        data(){
            return {
                // 数组
                list:[
                    {
                        "id":"1",
                        "name":'张三',
                        "img":"img/th.jpg",
                        "age":"13",
                        "gender":'1'
                    },
                    {
                        "id":"2",
                        "name":'李四',
                          "img":"img/th.jpg",
                        "age":"18",
                        "gender":'2'
                    },
                    {
                        "id":"3",
                        "name":'王五',
                          "img":"img/th.jpg",
                        "age":"14",
                        "gender":'1'
                    },
                    {
                        "id":"4",
                        "name":'赵六',
                          "img":"img/th.jpg",
                        "age":"16",
                        "gender":'2'
                    }
                ]
            }
        }
    }).mount('#container');
</script>
</html>

七. v-model、v-on

v-model：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据

语法：v-model = "变量名"；v-model中绑定的变量，必须在data中定义

v-on：为HTML标签绑定事件(添加事件监听)

语法：v-on：事件名="方法名" 简写为 @事件名="..."

methods函数中的this指向Vue实例，可以通过this获取data中定义的数据

methods与data同级