vue教程-介绍与使用

news2024/11/15 13:39:14

vue介绍

介绍

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

安装

最简单的例子就是，创建一个html文件，在文件中引入vue：

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

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

创建实例

创建 Vue 实例，初始化渲染的核心步骤:
        1.准备容器
        2.引包(官网)-开发版本/生产版本
        3.创建 Vue 实例 new Vue()
        4.指定配置项 el data => 渲染数据
                ①el指定挂载点，选择器指定控制的是哪个盒子
                ② data 提供数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Domcument</title>
</head>
<body>

    <!--
        1.准备容器
        2.引包
        3.创建实例
        4.添加配置项
    -->

    <div id="app">
        {{ foo }}
    </div>

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

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                foo: 'hello vue！'
            }
        });
    </script>
</body>
</html>

结果：

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

插值表达式

插值表达式是一种vue的模版语法。

作用

利用表达式进行插值，渲染到页面中

语法

注意点

1.使用的数据必须存在

2.支持的是表达式，而非语句，比如：if、for......

3.不能在标签属性中使用{{}}进行插值

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Domcument</title>
</head>
<body>

    <div id="app">
        <p>{{ nickname }}</p>
        <p>{{ nickname + '你好' }}</p>
        <p>{{ age >= 18 ? '成年' : '未成年' }}</p>
        <p>{{ firend.name }}</p>
        <p>{{ firend.desc }}</p>
    </div>

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

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                nickname: 'vue',
                age: '20',
                firend: {
                    name: 'json',
                    desc: '热爱学习'
                }
            }
        });
    </script>
</body>
</html>

结果：

响应式

数据修改，视图自动更新

data中的数据，最终会被添加到实例上：

1.访问数据：“实例名.属性名”

2.修改数据：“实例名.属性名 = 值”

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Domcument</title>
</head>
<body>

    <div id="app">
        <p>{{ nickname }}</p>
        <p>{{ count }}</p>
    </div>

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

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                nickname: 'vue',
                count: 20
            }
        });
    </script>
</body>
</html>

结果：