注：此套教程内学习的是Vue2，自2023年Vue2以停止维护、后续有需要再学习Vue3。

1 Vue概述

Vue是一套前端框架，免除原生JS中的DOM操作，简化书写。
基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。

1.1快速入门：

引入：

外部链接引入或本地文件引入

外部链接：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

编写视图：

<div id="app">
        <input type="text" v-model="message"> <br>
        {{message}}
</div>

在JS中创建Vue对象，定义数据模型：

<script>
    new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        }
    })
</script>

在这个例子中，当改变text内的内容时，由于双向绑定，{{message}}中的内容也会实时改变。

插值表达式：
- 形式：{{表达式}}
- 内容可以是：
  - 变量
  - 三元运算符
  - 函数调用
  - 算术运算

2 Vue常用指令：

指令：

指令：HTML标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。

常用指令：

示例1：v-bind 与 v-model

<!-- v-model -->
        <input type="text" v-model="url">

<!-- v-bind -->
        <a v-bind:href="url" target="_blank">与数据模型url绑定的超链接</a>

此处 v-bind:xxx 可以简写为 :xxx.

示例2：v-on

v-on:event事件（click、blur\focus…）也可以简写为如下第二种

        <!-- v-on:click -->
        <input type="button" value="按钮1" v-on:click="handle()">
        <input type="button" value="按钮2" @click="handle">

示例1、2全部：

<body>
    <!-- 编写视图 -->
    <div id="app">
        <!-- v-model -->
        <input type="text" v-model="url"> <br>
        <!-- v-bind -->
        <a v-bind:href="url" target="_blank">与数据模型url绑定的超链接</a><br>

        <!-- v-on:click -->
        <input type="button" value="按钮1" v-on:click="handle()">
        <input type="button" value="按钮2" @click="handle">

    </div>
    

    
</body>

<!-- 在JS中创建Vue对象，定义数据模型 -->
<script>
    new Vue({
        el:"#app",
        data:{
            url:"http://www.cmd137blog.top"
        },
        methods: {
            handle:function()
            {
                alert("Hello!")
            }   
        }
    })
</script>

示例3： v-if;v-else-if;v-else;与v-show

v-if;v-else-if;v-else：

        <span v-if="age <= 35">年轻人</span>
        <span v-else-if="age>35 && age < 65">中年人</span>
        <span v-else="age>=65">老年人</span>

v-show:

        <span v-show="age <= 35">年轻人</span>
        <span v-show="age>35 && age < 65">中年人</span>
        <span v-show="age>=65">老年人</span>

区别：v-show不满足条件渲染但不显示（通过CSS 的dispaly），而上面三个不满足条件不渲染。

全部：

<body>
    <!-- 编写视图 -->
    <div id="app">
        <!-- v-if;v-else-if;v-else -->
        <input type="text" v-model="age">经判定，为

        <span v-if="age <= 35">年轻人</span>
        <span v-else-if="age>35 && age < 65">中年人</span>
        <span v-else="age>=65">老年人</span>

        <br><br>
        <!-- v-show -->
        <input type="text" v-model="age">经判定，为

        <span v-show="age <= 35">年轻人</span>
        <span v-show="age>35 && age < 65">中年人</span>
        <span v-show="age>=65">老年人</span>

    </div>
</body>

<!-- 在JS中创建Vue对象，定义数据模型 -->
<script>
    new Vue({
        el:"#app",
        data:{
            age:0
        },
        methods: {
            
        }
    })
</script>

示例4 v-for

v-for=”(item, index) in items”

示例：

<body>
    <!-- 编写视图 -->
    <div id="app">
        <div v-for="(address, index) in addresses">{{index+1}} : {{address}}</div>
    </div>
</body>

<!-- 在JS中创建Vue对象，定义数据模型 -->
<script>
    new Vue({
        el:"#app",
        data:{
            addresses:["北京","上海","深圳","广州","香港"]
        }
    })
</script>

案例：通过Vue完成表格数据的渲染展示（推荐学习）

答案：

值得反复参考，顺便复习一波CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 外部链接引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <style>
        .scoretable {
            width: 50%;
            margin: 0 auto; /* 居中显示 */
            border: 1px solid black; /* 实线边框 */
            border-collapse: collapse; /* 合并边框 */
        }
    
        .scoretable td {
            border: 1px solid black; /* 对表格单元格添加实线边框 */
            text-align: center; /* 内容居中 */
        }
        .scoretable th {
            border: 1px solid black; /* 对表格单元格添加实线边框 */
            text-align: center; /* 内容居中 */
        }
    </style>
</head>
<body>
    <!-- 编写视图 -->
    <div id="app">
        <table class="scoretable">
            <tr>
                <th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>分数</th><th>等级</th>
            </tr>
            <tr v-for="(user,index) in users">
                <td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td v-if="user.gender==1">男</td><td v-else-if="user.gender==2">女</td><td>{{user.score}}</td>
                <td v-show="user.score>=85">优秀</td><td v-show="user.score>=60&&user.score<85">合格</td><td v-show="user.score<60"><span style="color: red;">不合格</span></td>
            </tr>
        </table>
    </div>
</body>

<!-- 在JS中创建Vue对象，定义数据模型 -->
<script>
    new Vue({
        el:"#app",
        data:{
            users:[
                {
                    name:"Tom",
                    age:20,
                    gender:1,
                    score:78
                },
                {
                    name:"Jason",
                    age:20,
                    gender:1,
                    score:100
                },
                {
                    name:"Rose",
                    age:19,
                    gender:2,
                    score:85
                },
                {
                    name:"Hans",
                    age:21,
                    gender:1,
                    score:55
                }
            ]
        }
    })
</script>

</html>

3 生命周期

生命周期：指一个对象从创建到销毁的整个过程。
Vue对象生命周期有八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）。

主要掌握 mounted：

mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。主要用于发送请求到服务端，加载数据。
挂载阶段所做的主要工作是创建 Vue 实例并用其替换 el 选项对应的 DOM 元素，同时还要开启对模板中数据（状态）的监控，当数据（状态）发生变化时通知其依赖进行视图更新。
与 methods 同级

    new Vue({
        el:"#app",
        data:{

        },
        methods: {
            
        },
        mounted() {
            
        }
    })

一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

1 Vue概述

1.1快速入门：

2 Vue常用指令：

指令：

常用指令：

示例1：v-bind 与 v-model

示例2：v-on

示例3： v-if;v-else-if;v-else;与v-show

示例4 v-for

案例：通过Vue完成表格数据的渲染展示（推荐学习）

答案：

3 生命周期

主要掌握 mounted：

发送评论 编辑评论

推荐文章

发送评论编辑评论