1 Vue - 简介

2021-04-05 19:34:39 作者：互联网

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>

标签：Vue,title,简介,app,挂载,message,lizi
来源： https://www.cnblogs.com/lizitestdev/p/14619172.html