1 Vue - 简介

织梦狗教程前端开发

2023-10-08

1 vue 简介是JS框架，比JS库（Jquery）更加强大简化dom操作响应式数据驱动：页面由数据生成，数据更新页面更新 2 vue 官网https://cn.vuejs.org/ 3 第一个 vue!DOCTYPE htmlhtml lang=enheadmeta ch...

1 vue 简介

是JS框架，比JS库（Jquery）更加强大
简化dom操作
响应式数据驱动：页面由数据生成，数据更新页面更新

2 vue 官网

https://cn.vuejs.org/

3 第一个 vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <!-- 关联数据 （响应式）-->
        {{ message }}
    </div>

    <script>
        var app = new Vue({     // 创建 Vue 应用
            el: '#app',         // 挂载点，挂载元素
            data: {             // 数据（响应式）
                message: 'Hello lizi!'
            }
        })
    </script>
</body>
</html>

4 data 中复杂数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <!-- 关联数据 （响应式）-->
        <p>{{ message }}</p>
        <p>{{ user.name }} {{ user.password }}</p>
        <p>{{ blogs[0].title}}</p>
    </div>

    <script>
        var app = new Vue({     // 创建 Vue 应用
            el: '#app',         // 挂载点，挂载元素
            data: {             // 数据（响应式）
                message: 'Hello lizi!',
                user: {
                    name: 'lizi',
                    password: '123456'
                },
                blogs: [
                    {title: 'title1',content: 'content1'},
                    {title: 'title2',content: 'content2'},
                    {title: 'title3',content: 'content3'}
                ]
            }
        })
    </script>
</body>
</html>

织梦狗教程

本文标题为：1 Vue - 简介