vue初级

Alexuuu

于 2022-05-02 12:46:07 发布

阅读量563

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Alexuuu/article/details/124539446

版权

本文档是Vue.js的初级教程，介绍了Vue的基本概念和渐进式框架的特点。内容包括Vue的创建工程、导入资源，详细讲解了Vue的入门案例，如文本插值、表单绑定、条件判断等核心指令的使用。此外，还涵盖了Vue的生命周期和异步操作，适合前端初学者入门。

摘要由CSDN通过智能技术生成

Vue快速入门

Vue介绍

在互联网产品快速迭代的背景下，前端开发人员不仅要编写页面，还要通过ajax+js完成页面动态效果，压力较大。

为了解决这个问题，一款前端的渐进式框架==Vue==就诞生了。

==渐进式框架==：一个前端项目可以使用vue一两个特性，也可以整个项目都用vue。

入门案例

需求：视图Div获取input中输入的文字

创建工程

导入资源

js代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01-入门案例</title>

</head>
<body>
    <h3>获取input中输入的文字</h3>
    <input type="text" id="myInput">
    <div style="border:red 1px solid; height: 25px;" id="myDiv"></div>
    <script>
        // 给input绑定键盘弹起事件
        document.getElementById('myInput').οnkeyup=function () {
            // 获取input文本框的值
            let val = this.value;
            // 显示到div中
            document.getElementById('myDiv').innerHTML=val;
        }
    </script>

</body>
</html>

vue代码

视图：负责页面渲染，主要由HTML+CSS构成。脚本：负责业务数据模型（Model）以及数据的处理逻辑。

步骤：

引入vue的js类库
编写视图
编写脚本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01-入门案例</title>

    <!--1.引入vue的js类库-->
    <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
<!--2.将视图交给vue管理-->
<div id="app">
    <h3>获取input中输入的文字</h3>
    <input type="text" v-model="message">
    <div style="border:red 1px solid; height: 25px;">{{message}}</div>
</div>

<!--3.将js脚本vue管理-->
<script>
    const app = new Vue({
        el: '#app', // 管理视图，通过css选择器
        data:{  // 管理js变量（模型）
            message:''
        },
        methods:{ // 管理js方法（函数）

        }
    });
</script>

</body>
</html>

入门详解

html视图：视图用于展示Vue模型中的数据，定义时必须使用双标签
==注意：不能使用body标签，通过使用div==
```
<div id="app"></div>
```
Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。
```
let app = new Vue({
 选项列表;
});
```

选项列表

1. el选项：指定的vue控制视图区域。(根据css选择器获取)

2. data选项：用于保存当前Vue对象中的数据。支持js的各种数据类型

3. methods选项：用于定义方法。方法可以直接通过对象名调用，或者用this来调用(代表当前Vue对象)。

数据绑定

* 在视图部分获取脚本部分的数据: {{插值表达式}}

Vue常用指令【重点】

指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
使用指令时，通常编写在标签的属性上，值（内容）可以使用 JS 的表达式。
常用指令:

文本插值

{{插值表达式}}：将数据输出到页面视图中

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出

v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>

</head>
<body>
<div id="app">

    <!--
        {{插值表达式}}：展示vue管理的变量
            缺点：网络波动，在等待期间直接显示插值表达式原文
        v-text：相当于js中innerText（文本）
        v-html：相当于js中innterHTML（超文本）
    -->
    插值表达式：{{message}} <br>
    v-text：<span v-text="message"></span> <br>
    v-html：<span v-html="message"></span> <br>

</div>
<script>
    setTimeout(function () {
        const app = new Vue({
            el:'#app', // 管理视图
            data:{ // 管理变量
                message:'<b>哈哈哈~~~</b>'
            },
            methods:{ // 管理方法

            }
        });
    },2000)

</script>
</body>
</html>

表单绑定

==表单：采集用户输入的数据，发送给服务器端==

* 插值表达式(包括v-text和v-html)可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行

* v-model是双向绑定，视图（View）和模型（Model）之间会互相影响

* 目前v-model的可使用元素有：input、select、textarea

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>

</head>
<body>
<div id="app">

    <h3>姓名：</h3>
    <input type="text" v-model="username">
    <div>您写的姓名是:{{username}}</div>


    <h3>性别：</h3>
    <input type="radio" value="男" v-model="gender"> 男 <br>
    <input type="radio" value="女" v-model="gender"> 女 <br>
    <div>您选择的性别是:{{gender}}</div>


    <h3>爱好：</h3>
    <input type="checkbox" value="抽烟" v-model="hobbies">抽烟<br>
    <input type="checkbox" value="喝酒" v-model="hobbies">喝酒<br>
    <input type="checkbox" value="烫头" v-model="hobbies">烫头<br>
    <div>您选择的爱好是:{{hobbies}}</div>


    <h3>段位：</h3>
    <select v-model="level">
        <option value="">请选择</option>
        <option value="青铜">青铜</option>
        <option value="白银">白银</option>
        <option value="王者">王者</option>
    </select>
    <div>您选择的段位是:{{level}}</div>


</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username:'', // 用户名
            gender:'', // 性别
            hobbies:[],// 爱好
            level:'' // 段位
        }

    })
</script>
</body>
</html>

小结

单向绑定：vue管理的模型修改，视图也就同步修改了
双向绑定：vue管理的视图（input、select、textarea）和模型，可以相互影响

绑定属性

* 对于HTML标签属性，如果想要动态传值，不能使用{{}}，而应该使用专门的属性绑定语法
    标准语法：   v-bind:属性名="Vue中的变量"
    简写语法：         :属性名='Vue中的变量'

<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>

</head>
<body>
<div id="app">

    <h3>属性绑定基本使用</h3>
    改变图片的地址和大小<br>
    图片地址:
    <select v-model="imgSrc">
        <option value="../img/vue.png">vue</option>
        <option value="../img/lj.jpg">雷军</option>
    </select>
    图片宽度: <input type="text" v-model="imgWidth">
    <br>
    <img v-bind:src="imgSrc" :width="imgWidth">

</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            imgSrc: "../img/vue.png",
            imgWidth: "100px"
        },
    })
</script>
</body>
</html>

列表循环

* 在vue中使用v-for实现数组的遍历，格式如下:
* v-for="(item,index) in items"
    items：要遍历的List
    item： 每次遍历得到的临时变量
    index：每次遍历的索引，从0开始计数(可省略)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">

    <!--
        for循环
            1）简单： user in userList
            2）完整：(user,index) in userList
    -->
    <ul>
        <li v-for="(user,index) in userList">{{user.name}} -- {{index}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            userList: [
                {id: 1, name: 'jack', address: '北京昌平'},
                {id: 2, name: 'lucy', address: '上海虹桥'},
                {id: 3, name: 'jerry', address: '天津宝坻'}
            ]
        }
    })
</script>
</body>
</html>

条件判断

* 语法：
    v-if="布尔表达式"
    v-else-if="布尔表达式"
    v-else
* 注意：
    v-else元素必须紧跟在带v-if或者v-else-if元素的后面，否则它将不会被识别
    v-if还可以和v-for联合使用，当二者出现在一起时，会先遍历再判断条件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>

</head>
<body>
<div id="app">
    <!--从文本框输入成绩, 然后判断成绩是否及格  >=80：优秀 、60>=：及格   <60：不及格-->
    <h3>考试成绩练习</h3>
    请输入成绩:<input type="text" v-model="score"><br>
    你本次考试成绩:
    <span v-if="score>=80">优秀</span>
    <span v-else-if="score>=60">及格</span>
    <span v-else>不及格</span>


    <!--遍历users, 但是要求只显示性别为女的用户-->

    <!--
        v-if：如果满足条件显示，不满足不显示（页面不会渲染元素）
        v-show：如果满足调节键显示，不满足不显示（页面会渲染元素）
    -->
    <h3>用户列表</h3>
    <ul>
        <li v-for="user in users" v-if="user.gender=='女'">{{user}}</li>
    </ul>

    <ul>
        <li v-for="user in users" v-show="user.gender=='女'">{{user}}</li>
    </ul>


</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            score: 15,
            users: [
                {name: 'jack', gender: '女'},
                {name: 'lucy', gender: '女'},
                {name: 'jerry', gender: '男'}
            ]
        }
    })
</script>
</body>
</html>

事件绑定

* 事件绑定
    1) 标准语法   v-on:事件名="js片段或函数名"   如果不想页面爆红,需要单独引入名称空间
    2) 简化语法   @事件名="js片段或函数名"       推荐使用

<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>

</head>
<body>
<div id="app">
    <b>数量：</b>
    <button @click="diff()">-</button>
    <span>{{num}}</span>
    <button v-on:click="num++">+</button>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {// 成员变量
            num: 1
        },
        methods:{ // 定义方法
            diff(){
                console.log(this.num); // 输出成员变量
                if (this.num > 1) {
                    this.num--;
                }
            }
        }
    })
</script>
</body>
</html>

知识小结

<!--Vue对象模板-->
<script>
    const app = new Vue({
        el: "#app",// 管理视图（html+css）
        data: {}, // 管理模型（数据）
        methods: {} // 管理方法（函数）
    });
</script>

1. 单方向赋值
    html文本: <span v-text="" v-html="">{{插值表达式}}</span>
    html属性: <img :src="vue变量"/>

2. 双向绑定
    <input type="text" v-model="vue变量"/>

3. 遍历循环
    <li v-for="(item,index) in list"></li>

4. 判断
    <span v-if="表达式1"></span>
    <span v-else-if="表达式2"></span>
    <span v-else></span>

5. 事件绑定
    <a @click="js代码或函数"></a>

Vue高级使用【理解】

生命周期

生命周期经历的八个阶段

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">

</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            find(){
                alert('查询后台数据。。。')
            }
        },
        // created是vue生命周期创建后触发的函数，与methods同级
        created(){
            // 类似于 window.onload
           this.find();
        }

    })
</script>
</body>
</html>

Vue异步操作

在Vue中发送异步请求，本质上还是AJAX。我们可以使用axios这个插件来简化操作！

常用方法

// 执行get请求
axios.get('/url?name=admin&password=123').then(resp=>{
    console.log(resp.data);
})


// 执行get请求参数比较多的时候
axios.get('/url',{
    params:{
        name: 'admin',
        password: '123'
    }
}).then(resp=>{
    console.log(resp.data);
})


//执行post请求
axios.post('/url', {
    name: 'admin',
    password: '123'
}).then(resp=>{
    console.log(resp.data);
})

Vue概念

* MVVM是Model-View-ViewModel的简写，它本质上就是MVC的改进版；MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。
    - M： 即Model，模型，指的就是数据
    - V： 即View， 视图，指的就是页面
    - VM：即View-Model，指的是模型和数据的双向绑定(即view和Model互相影响，Model变了，view随之改变；view变了，Model也随之改变)
    
* MVC和MVVM的使用区别
    在MVC模式中，
        开发人员需要从后端获取到数据(Model)，然后通过操作DOM渲染视图(View)。
        如果用户改变了视图(view)，开发人员还需要再通过DOM获取改变之后的数据，同步到Model中。
    在MVVM模式中，
        Model和View是绑定的，Model变了，view自动变化；view变了，Model自动变化。
        因此，程序员只需要关注Model即可。
        
* 基于MVVM模式的前端框架三巨头：Vue、React、AngularJS