Vue入门教程

最新推荐文章于 2024-07-16 01:47:39 发布

typ maxval

最新推荐文章于 2024-07-16 01:47:39 发布

阅读量762

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42696010/article/details/124741490

版权

这篇博客是Vue.js的入门教程，涵盖了Vue的特点、版本选择、基本语法、事件绑定、条件渲染、属性绑定、v-model、MVVM架构、Axios使用、Vue生命周期、组件系统、计算属性和路由等内容。强调在使用Vue时避免引用jQuery，并介绍了Vue脚手架Vue-cli的安装与项目结构。

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

Vue实战

1.0 简介

什么是vue?

渐进式 JavaScript 框架,让我们很少的操作页面dom,甚至不操作,就可以实现视图与数据的绑定

在使用vue的时候,不要引用jQuery

**渐进式 **

易用

已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
高效

20kB min+gzip 运行大小超快虚拟 DOM 最省心的优化

1.1 vue 版本选择(开发,与生产)

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

1.2 第一个入门程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{
  { msg }}</p>
    {
  { user.name }}
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
<script !src="">

    const app = new Vue({
        //表示给vue实例作用到那个元素上
        el: "#app",
        //用来给vue实例定义一些相关的数据
        data: {
            msg: "你好vue",
            user: {
                name: "王五"
            }
        }
    });
</script>
</html>

el 表示vue对象的作用范围,在该范围内都可以使用vue的语法

data 表示存放vue对象的一些数据,绑定的数据可以通过{ {数据名}} 取出来

使用{ {}} 取值的时候可以书写表达式列如{ { name.toLocaleUpperCase()+“oop” }}

el 中可以书写任意的css选择器,在使用vue开发是建议使用id选择器

1.3 v-text与v-html

v-text

可以获取vue中data的数据,以文本的形式渲染到元素中(类似于jQuery中的innerText)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <del v-text="msg"></del> 
    <span v-text="msg"></span>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
     
        el: "#app",
        data: {
     
            msg: "你好"
        }
    });
</script>
</html>

总结

使用{ {}}代表插值表达式于v-text的区别

使用v-text会将标签中原有的数据覆盖,{ {}}不会覆盖

使用v-text可以避免在网络延迟是,出现数据未渲染的闪烁情况,{ {}}在网络情况差时渲染数据,会出现闪烁情况

v-html

可以获取vue中data的数据,以html的形式渲染到元素中(类似于jQuery中的innerHTML)

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

总结

使用{ {}}代表插值表达式于v-html的区别

使用v-html会将标签中原有的数据覆盖,{ {}}不会覆盖

使用v-html可以避免在网络延迟是,出现数据未渲染的闪烁情况,{ {}}在网络情况差时渲染数据,会出现闪烁情况

使用v-html可以解析html,而{ {}}不会

1.4 vue事件绑定(v-on)

语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button type="button" v-on:click="getDate">点我显示时间</button>
    <span v-text="msg"></span>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
     
        el: "#app",
        data: {
     
            msg:""
        },
        //methods用来定义vue中的事件
        methods: {
     
            getDate: function () {
     
                //在事件函数中,this就是vue实例
                this.msg = new Date();
            }
        }
    });
</script>
</html>

事件总结

在vue中使用v-on:事件名完成事件于元素的绑定

在vue中事件函数统一的放在vue对象实例中methods属性管理

在vue事件函数中this就代表vue对象实例

事件绑定简化写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-text="age"></span>
    <input type="button" value="点击我增长一岁" @click="increment">
    <!--  等价于下面  -->
    <input type="button" value="点击我增长一岁" v-on:click="increment">
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
     
        el: "#app",
        data: {
     
            age: 16
        },
        methods: {
     
            increment: function () {
     
                this.age++;
            }
        }
    });
</script>
</html>

事件绑定简化写法总结

日后在开发vue中可以使用 @事件名=事件函数的方式,替换v-on:事件名=事件函数的写法

事件函数简写

methods: {
    // increment: function () {
    //     this.age++;
    // }
    increment() {
        this.age++;
    }
}

1.5 v-show v-if v-bind

V-show 用来表示标签是否显示(其底层是控制的是display属性)不会修改DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="button" value="点击我显示时间" @click="showdate">
    <!--  v-show 可以控制标签是否显示  -->
    <p v-show="show" v-text="msg"></p>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
     
        el: "#app",
        data: {
     
            show: false,
            msg: ""
        }, methods: {
     
            showdate() {
     
                this.msg = new Date();
                this.show = !this.show;
            }
        }

    });
</script>
</html>

总结在使用v-show可以直接使用bool值控制,可可以书写bool表达式控制

v-if 于v-show差不多不过(底层控制的是DOM元素) 会修改DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <ul>
        <li v-if="msg==='男'">男</li>
        <li v-else-if="msg==='女'">女</li>
        <li v-else>双性</li>
    </ul>
    <input type="button" value="男" @click="sex('男')"><br>
    <input type="button" value="女" @click="sex('女')"><br>
    <input type="button" value="中性" @click="sex('中性')"><br>

</div>

</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
     
        el: "#app",
        data: {
     
            msg: "男"
        }, methods: {
     
            sex(data) {
     
                this.msg = data;
            }
        }

    });
</script>
</html>

v-bind(重点)用来把标签的属性绑定到vue对象属性上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

最低0.47元/天解锁文章