Vue简单入门及案例

最新推荐文章于 2024-10-24 19:49:07 发布

原创最新推荐文章于 2024-10-24 19:49:07 发布 · 1.9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue.js的基础知识，包括它的优点、DOM操作的简化、响应式数据驱动。通过一系列示例，讲解了Vue的挂载点、数据对象、指令如v-text、v-html、v-on、v-show、v-if、v-bind、v-for和v-model的使用。还展示了如何创建计算器和记事本应用，进一步巩固Vue的实战应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE入门

简介：

JavaScript框架
简化Dom操作
响应式数据驱动

之前基于DOM----->（1）获取DOM元素（2）操作DOM元素

Vue官网： https://cn.vuejs.org

Vue.js的优点

体积小

压缩后33K
更高的运行效率

基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM
双向数据绑定

让开发者不用再去操作DOM对象，将更多精力投放到业务逻辑上；
生态丰富、学习成本低

市场上有用大量成熟，稳定的vue.js的ui框架、常用组件，即用实现快速开发

使用场景广泛：譬如 web端，移动端，跨平台应用开发

一、vue第一个程序hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--①引入vue的库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<!--②创建一个双标签并为该标签定义一个id-->
<div id="add">
    <!--显示数据-->
    {{message}}
</div>
</body>
<!--创建自己的js代码-->
<script>
    /*创建一个Vue对象*/
    const app = new Vue({
        el: "#add",
        data:{
            //数据
            message:"今天是周一......"
        }
    })
</script>
</html>

二、el挂载点

挂载点:(1)作用范围:该标签内或者子标签内
挂载点:(2)一定使用id选择器?,可以使用其他选择器,但是建议使用id选择器，因为		   id具有唯一性
挂载点:(3)挂载点一定使用div标签吗?可以使用其他标签，但是必须双标签。不能在		  body和html标签上，建议挂载到div标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--①引入vue的库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<!--②创建一个双标签并为该标签定义一个id-->
{{message}}
<div id="add">
    {{message}}
</div>

<!--测试class选择器-->
<!--<div class="add">
    {{message}}
</div>-->

</body>

<!--创建自己的js代码-->
<script>
    /*创建一个Vue对象*/
    const app = new Vue({
        /*el挂载点*/
        el: "#add",
        data: {
            //挂载点:(1)作用范围:该标签内或者子标签内
            //挂载点:(2)一定使用id选择器?,可以使用其他选择器,但是建议使用id选择器，因为id具有唯一性
            //挂载点:(3)挂载点一定使用div标签吗?可以使用其他标签，但是必须双标签。不能在body和html标签上，建议挂载到div标签
            message: "明天是周二......"
        }
    })
</script>
</html>

三、data数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--引入vue库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="add">
    {{message}}</br>
    <span>{{message}}</span></br>
    {{person}}</br>
    {{person.name}}-------->{{person.age}}<br>
    <ul>
        <li>{{list[0].school}}</li>
        <li>{{list[1].school}}</li>
        <li>{{list[2].school}}</li>
    </ul>
</div>
</body>
<script>
    const app= new Vue({
        el:"#add",
        //数据标志
        data:{
            //基本数据类型和字符串
            message:"今天老白来了....",
            //对象
            person:{
                name:"张三",
                age:3
            },
            //集合
            list:[
                {school:"五道口"},
                {school:"南开"},
                {school:"北大"}
            ]
        }
    })
</script>
</html>

四、Vue指令

v-text v-html v-on基础

v-show v-if v-bind

v-for v-on补充 v-model

通过Vue实现常见的王爷效果
学习Vue指令，一案例巩固知识点
Vue指令指的是以v-开头的一组特殊语法

4.1 v-text 设置标签的文本值（textContent）

v-text指令的作用是：设置标签的内容（textContent）
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
内部支持写表达式

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--引入vue库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="add">
    <span v-text="message+'，天气不好影响心情！'">冬冬</span><br>
    <span>{{message+"嘿呀"}}</span>
</div>
</body>
<script>
    const app= new Vue({
        el:"#add",
        //数据标志
        data:{
            message:"一周的阴天和雨天..."
        }
    })
</script>
</html>

4.2v-html：设置标签的innerHTML

内容中有html结构会被解析为标签

特点：

v-html 指令的作用是设置标签的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--引入vue库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="add">
    <span v-text="message+'，天气不好影响心情！'">冬冬</span><br>
    <span>{{message+"嘿呀"}}</span><br>
    <p v-html="context"></p>
    <p v-text="context"></p>
</div>
</body>
<script>
    const app= new Vue({
        el:"#add",
        //数据标志
        data:{
            message:"一周的阴天和雨天...",
            context:"<span style='color: chartreuse'>Hello 世界</span>"
        }
    })
</script>
</html>

4.3 v-on基础为元素绑定事件

格式：v-on:click=“方法”（点击事件） v-on:monseenter=“方法” v-on:dblclick=“方法”（双击事件）

特点：

v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--引入vue库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="add">
    {{message}}<br>
    <input type="button" value="点击事件" v-on:click="doIt"/>
    <hr>
    <!--建议使用@，方便-->
    {{message}}<br>
    <input type="button" value="@点击事件" @click="doIt"/>
    <hr>
    {{message}}<br>
    <input type="button" value="双击事件" v-on:dblclick="dblIt"/>
</div>
</body>
<script>
    const app= new Vue({
        el:"#add",
        //数据标志
        data:{
            message:"今天太阳大哥出来了。。。"
        },
        /*方法的定义*/
        methods:{
            doIt(){
                this.message="心情变好了"
            },
            dblIt(){
                this.message="不知道明天天气怎么样..."
            }
        }
    })
</script>
</html>

计算器为例

<!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>计数器</title>
    <link rel="stylesheet" href="./css/index.css"/>
</head>

<body>
<!-- html结构 -->
<div id="app">
    <!-- 计数器功能区域 -->
    <div class="input-num">
        <!--点击事件-->
        <button @click="decr">
            -
        </button>
        <span v-text="num"></span>
        <!--点击事件-->
        <button @click="incr">
            +
        </button>
    </div>
    <img src="http://qnaaa.zzaaa.net/aaajy/logo.png" alt=""/>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="./js/vue.js"></script>
<!-- 编码 -->

</body>
<script>
    const app = new Vue({
        el: "#app",
        //数据标志
        data: {
            num: 0,
            max: 10,
            min: 0
        },
        /*方法的定义*/
        methods: {
            /*加*/
            incr() {
                <!--如果增加的数量大于10，那么就不能再执行加操作-->
                if (this.num < 10) {
                    this.num++;
                } else {
                    alert("不能再加了")
                }
            },
            /*减*/
            decr() {
                <!--如果减的数量小于0，那么就不能再执行减操作-->
                if (this.num > 0) {
                    this.num--;
                } else {
                    alert("不能为负哦")
                }
            }
        }
    })
</script>
</html>

创建Vue实例时，el（挂载点）、data（数据）、methods（方法）
v-on指令的作用是绑定事件，简写为@
方法中通过this，关键字获取data中的数据
v-text 指令的作用是：设置元素的文本值，简写为{{}}

4.4 v-show

v-show:根据表达值的真假,切换元素的显示和隐藏

特点：

v-show指令的作用：根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--引入vue库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="点击事件" @click="doThis"/><br>
    <input type="button" value="点击事件" @click="incrAge"/><br>
    <img src="./image/1.jpg" v-show="flag" width="200"><br>
    <img src="./image/6.jpg" v-show="age>18"/>
</div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        //数据标志
        data: {
            message: "姗姗来迟",
            flag: false
            ,age: 15
        },
        methods: {
            doThis() {
                this.flag = !this.flag;
            }
            ,incrAge(){
                this.age++;
            }
        }
    })
</script>
</html>

4.5 v-if 根据表达值的真假，切换元素的显示和隐藏（操作dom元素）

v-if指令的作用是：根据表达值的真假，切换元素的显示状态
本质是通过操作dom操作来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除
频繁的使用v-show，频繁使用v-if，前者的切换消耗小

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--引入vue库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="点击事件" @click="doThis"/><br>
    <input type="button" value="点击事件" @click="incrAge"/><br>
    <img src="./image/1.jpg" v-show="flag" width="200"><br>
    <!--v-show 只是设置了style:display=none
        v-if 是否显示该标签
    -->
    <img src="./image/6.jpg" v-if="flag"/>
</div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        //数据标志
        data: {
            message: "姗姗来迟",
            flag: false
            ,age: 15
        },
        methods: {
            doThis() {
                this.flag = !this.flag;
            }
            ,incrAge(){
                this.age++;
            }
        }
    })
</script>
</html>

4.6 v-bind 设置元素的属性（比如src，title，class）

格式：v-bind：属性名=表达式

设置元素的属性
写法v-bind：属性名
简写方式省略v-bind 只保留 :属性名
动态的增删class建议使用对象的方式

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--引入vue库-->
    <script src="./js/vue.js"></script>
    <style>
        .active {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="点击事件" @click="doThis"/><br>
    <hr>
    <input type="button" value="点击事件" @click="toActive"/><br>
    <!--v-bind：绑定标签的属性-->
    <img v-bind:src="imgUrl" width="200" v-bind:title="imgTitle" width="200"><br>

    <!--v-show 只是设置了style:display=none
        v-if 是否显示该标签
    -->
    <!--<img src="./image/6.jpg" v-if="flag" width="200" v-bind:class="isActive? 'active':''"/>-->
    <!--建议使用这种-->
    <img src="./image/6.jpg" v-if="flag" v-bind:class="{active:isActive}">
</div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        //数据标志
        data: {
            message: "姗姗来迟",
            flag: false
            , age: 15
            , isActive: false
            ,imgUrl:"./image/6.jpg"
            ,imgTitle:"小姐姐"
        },
        methods: {
            doThis() {
                this.flag = !this.flag;
            }
            , toActive() {
                this.isActive = !this.isActive
            }
        }
    })
</script>
</html>

示范：图片切换：① 图片数组 ②索引 ③v-bind ④v-on ⑤v-if

<!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>图片切换</title>
    <link rel="stylesheet" href="./css/imgaeIndex.css"/>
</head>

<body>
<div id="mask">
    <div class="center">
        <h2 class="title">
            <img src="./images/logo.png" alt="">
            深圳创维校区环境
        </h2>
        <!-- 图片 -->
        <img :src="images[index]" alt=""/>
        <!-- 左箭头 -->
        <a href="javascript:void(0)" class="left" @click="prev" v-if="index>0">
            <img src="./images/prev.png" alt=""/>
        </a>
        <!-- 右箭头 -->
        <a href="javascript:void(0)" class="right" @click="nx" v-show="index<images.length-1">
            <img src="./images/next.png" alt=""/>
        </a>
    </div>
</div>

<script src="./js/vue.js"></script>
</body>
<script>
    const app = new Vue({
        el: "#mask"
        , data: {
            //定义所有的图片
            images: [
                "images/00.jpg",
                "images/01.jpg",
                "images/02.jpg",
                "images/03.jpg",
                "images/04.jpg",
                "images/05.jpg",
                "images/06.jpg",
                "images/07.jpg",
                "images/08.jpg",
                "images/09.jpg",
                "images/10.jpg",
            ],
            //定义一个下标
            index:0
        },
        methods:{
            prev(){
                this.index--;
            },
            nx(){
                this.index++;
            }
        }
    })
</script>
</html>

4.7 v-for 根据数据生成列表结构

v-for指令的作用是:根据数据生成列表结构
u 数组经常和v-for结合使用
语法是( item,index ) in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--引入vue库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="addFriends">新增朋友</button>
    <ul>
        <!--:title标题-->
        <li v-for="(item,index) in friends" :title="item.age">{{index}}-->{{item.name}}</li>
    </ul>
</div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        //数据标志
        data: {
            friends: [
                {name: "冬冬", age: 18},
                {name: "红红", age: 19},
                {name: "橙子", age: 12}
            ]
        },
        //方法的定义
        methods: {
            addFriends() {
                this.friends.push({name: "轩轩",age: 5})
            }
        }
    })
</script>
</html>

4.8 v-on补充传递自定义参数，事件修饰符

https://cn.vuejs.org/v2/api/#v-on

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有多种

4.9 v-model 获取和设置表单元素的值(双向数据绑定)

什么是表单元素：表单里的元素都是表单元素，譬如：input、select等。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--引入vue库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="changeName">点击</button>
    <input type="text" v-model="name"/>
    <hr>
    {{name}}
</div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        //数据标志
        data: {
            name:"张三"
        },
        //方法的定义
        methods: {
            changeName(){
                this.name="冬冬"
            }
        }
    })
</script>
</html>

实例：记事本

列表结构可以通过v-for指令结合数据生成
v-on结合事件修饰符可以对事件进行限制,比如.enter
v-on在绑定事件时可以传递自定义参数
通过v-model可以快速的设置和获取表单元素的值基于数据的开发方式

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>小黑记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="robots" content="noindex, nofollow"/>
    <meta name="googlebot" content="noindex, nofollow"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="./css/Bookindex.css"/>
</head>

<body>
<!-- 主体区域 -->
<section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
        <h1>小黑记事本</h1>
        <!--autocomplete:自动完成
            autofocus:自动集中
        -->
        <input
                autofocus="autofocus"
                autocomplete="off"
                placeholder="请输入任务"
                class="new-todo"
                v-model="context"
                @keyup.enter="addCon"
        />
    </header>
    <!-- 列表区域 -->
    <section class="main">
        <ul class="todo-list">
            <li class="todo"  v-for="(item,index) in items">
                <div class="view">
                    <span class="index">{{index+1}}</span> <label>{{item}}</label>
                    <button class="destroy" @click="removeItems(index)"></button>
                </div>
            </li>
        </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer">
        <span class="todo-count"> <strong>{{items.length}}</strong> items left </span>
        <button class="clear-completed" @click="clear">
            Clear
        </button>
    </footer>
</section>
<!-- 底部 -->
<footer class="info">
    <p>
        <a href="http://www.baidu.com"
        ><img src="./img/logo.png" alt=""
        /></a>
    </p>
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="./js/vue.js"></script>
<script>
    const als = new Vue({
        el: "#todoapp",
        data: {
            //声明一个数组
            items: ["今天太阳很好", "今天二十多度"],
            context: "1002"
        }
        , methods: {
            //新增一条信息
            addCon() {
                this.items.push(this.context)
            },
            //清除
            clear(){
                this.items = [];
            },
            //删除一个
            removeItems(index){
                this.items.splice(index,1)
            },
            //统计
            statistics(){

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