Vue-认识

三大框架（vue、react、angular）

Vue主要做什么

不需要操作DOM
单页面应用页项目
采用类似React语法 , 用于微信小程序/MpVue

特点

数据驱动视图
MVVM 双向绑定
通过指令增强 html功能
组件化复用代码
开发者只需关注数据

# API

VueAPI : https://cn.vuejs.org (opens new window)

Vue中文社区 : https://www.vue-js.com/ (opens new window)

# 安装

安装应用的方式向引入 js代码一样即可

下载 Vue.js 库 , 本地引入

在线 CDN 引入

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

# Vue应用

步骤

body中 , 设置Vue管理的视图==<div id="app"></div>==
引入vue.js
实例化 Vue对象new Vue();
设置Vue实例的选项：如el、data... new Vue({选项:值});
在 ==<div id="app"></div>== 中通过使用data中的数据

<body>
    <!-- 1. 提供容器 -->
    <div id="app">
        <p>{{str}}</p>
    </div>
    <!-- 2. 引入vue -->
    <script src="vue.js"></script>
    <script>
        // 3. 模拟数据
        new Vue({
            // 配置vue选项
            // 选择器选择容器
            el: '#app',
            // 设置数据
            data: {
                str: '测试对象'
            }
        })
    </script>
</body>

新版Vue容器选择方式

<script>
	const vm = {
        data: ...,
    }
    const app = Vue.createApp(vm);
    app.mount('#app');
</script>

#Vue

← Vue技巧功能 Vue-生命周期→