初见vue

最新推荐文章于 2024-11-08 23:19:07 发布

Reliable_

最新推荐文章于 2024-11-08 23:19:07 发布

阅读量82

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_63159216/article/details/133795299

版权

1初见Vue

1.1 vue介绍

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。它与其他大型框架不同的是，Vue被设计可以自底向上逐层应用。
自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发（即插即用）。

1.2 为什么要使用vue

1 声明式渲染：前后端分离是未来趋势
2 渐进式框架：适用于各种业务需求
3 简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习

2 vue入门程序

2.1 使用vue主要有三个步骤

1 创建一个HTML文件，引入vue.js

有两种方式引入：
一：在线引入：

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

二：本地引入：创建一个空文件js,将下载好的vue,js放到里面，引入

<script src="../js/vue.js"></script>

2 定义标签div，此标签作为vue的接管区域，一般div的id设置为app

3 定义vue实例，接管app区域，在实例中定义数据，使数据显示到页面上

2.2 具体实现

2.2.1 code如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
</body>
</html>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"Hello Vue"
            }
        })
    </script>

2.2.2 要点描述

在这里插入图片描述

2.2.3 结果展示

在这里插入图片描述

3 vue实例详解

3.1 {{}} 插值表达式

差值表达式的作用通常是用来获取vue实例中定义的数据（data）
注：属性节点中不能使用差值表达式

3.2 el 挂载点

1 el的作用是定义vue实例挂载的元素节点，表示vue接管该区域，一般用 id选择器选择挂载点，接管区的id为app

2 vue会接管el选项命中的元素及其内部元素

3 可以设置其他DOM元素作为接管区，但是一般使用div

3.3 data 数据对象

vue中的数据定义在data中，渲染复杂类型数据的时候，遵守js语法

4 vue常用指令

4.1 v-text

获取data数据，设置标签内容，会覆盖本标签原来的内容，只是将data的数据以纯文本的内容展示出来
在这里插入图片描述

4.2 v-html

获取data数据，设置标签内容，会覆盖本标签原来的内容，不同的是它会识别内容，如果你data中的数据是html样式格式，他会以html格式显示出来
在这里插入图片描述

4.3 v-on

为元素绑定事件，绑定的方法定义在vue实例的methods属性中
在这里插入图片描述

做个小练习试试吧

要求：实现一个计数器，点击加减按钮分别加减数据当数据加到10时停止增加，并且弹出对话框“已经加到10了”，同样数据减到0停止减，弹出对话框 “已经减到0了”
code

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

</head>
<body>
    <div id="app">
        <button v-on:click="add" >+</button>
        <span >{{num}}</span>
        <button v-on:click="sub">-</button>
    </div>

</body>
</html>

    <script>
        new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function (){
                    if(this.num < 10){
                        this.num ++
                    }else {
                        alert("已经加到10了")
                    }
                },
                sub:function (){
                    if(this.num > 0){
                        this.num --
                    }else {
                        alert("已经减到0了")
                    }
                }

            }
        })
    </script>

4.4 v-show

v-show指令, 根据真假值,切换元素的显示状态


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="f">切换</button>
    <img v-show="state" src="../img/1.png"/>
</div>

</body>
</html>
<script>
    new Vue({
        el:"#app",
        data: {
            state: true
        },
        methods:{
            f:function () {
                this.state= !this.state
            }
        }
    })
</script>

4.5 v-if

根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="f">切换</button>
    <img v-if="2 > 1" src="../img/1.png"/>
</div>

</body>
</html>
<script>
    new Vue({
        el:"#app",
        data: {
            state: true
        },
        methods:{
            f:function () {
                this.state= !this.state
            }
        }
    })
</script>

4.6 v-for

根据数据生成列表结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="items in arr">
                {{items}}
            </li>
        </ul>
    </div>

</body>
</html>
    <script>
        new Vue({
            el:"#app",
            data:{
                arr:[11,22,33,44,55,66]

            }
        })
    </script>