快速上手Vue

news2024/10/5 17:17:51

概念

创建实例

插值表达式

Vue响应式特性

概念

Vue是一个用于构建用户界面的渐进式框架

构建用户界面：基于数据渲染出用户看到的页面

渐进式：Vue相关生态：声明式渲染<组件系统<客户端路由<大规模状态管理<构建工具

Vue的两种使用方式：

                       ①Vue核心包开发

                               场景：局部模块改造

                       ②Vue核心包&Vue插件工程化开发

                               场景：整站开发

Vue 是一种非常适合循序渐进学习和开发的前端框架，无需一次性掌握所有技术，可以根据自己的需求和进度逐步深入学习和应用

框架：一套完整的项目解决方案

优点：开发效率提升

缺点：框架具有一些语法限制，可以去官网获得

创建实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>001创建一个Vue实例</title>

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

<body>
    <div id="box1">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>
    </div>

    <div id="box2">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>
    </div>

    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>

    </div>

    <script>
        const vm = new Vue({
            el: '#app',//该vm实例渲染id="app"的元素
            data: {//在Vue2中使用data 属性来声明响应式数据
                msg: 'Hello Vue',
                count: 666
            }
        })
        console.log(vm)
    </script>
</body>

</html>

插值表达式

作用：利用表达式进行插值渲染，将数据渲染于页面中

语法：{{表达式}}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>002插值表达式</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{nickname}}</p>
        <p>{{nickname.toUpperCase()}}</p>
        <p>{{nickname+'你好'}}</p>
        <p>{{age>=18?'成年':'未成年'}}</p>
        <p>{{friend.name}}</p>
        <p>{{friend.desc}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                nickname: 'tony',
                age: 18,
                friend: {
                    name: 'jepson',
                    desc: '热爱Vue'
                }
            }
        })
    </script>
</body>

</html>

Vue响应式特性

即数据驱动视图（数据改变，视图会自动更新）

Vue底层监听到数据修改->进行Dom操作,自动更新视图

使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可

data中的数据，被添加到实例上

访问数据：实例.属性名
修改数据：实例.属性名=值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003Vue响应式特性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>

    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                count: 100
            }
        })
        console.log(vm)
    </script>
</body>

</html>