🌨 Vue 的基本使用

🔗 相关链接：

📁 官方文档：Vue.js (vuejs.org) (opens new window)
- 🇨🇳 中文文档：Vue.js (vuejs.org) (opens new window)

🚠 实例代码仓库：https://github.com/simon1uo/vue-notes

Vue 是一个动态构建用户界面的渐进式 JavaScript 框架；

相关概念：

渐进式：自底向上逐层的应用；

简单应用：只需要轻量小巧的核心库；

复杂应用：可引入各式各样的 Vue 插件；

特点：

遵循组件化模式，提高代码的复用率、更好维护；
声明式编码，无需操作 DOM，提高开发效率；（非命令式编码）
使用虚拟 DOM + Diff 算法，尽量复用 DOM 节点；
编码简洁、体积小、运行效率高，适合移动 / PC 端开发；
只关注 UI, 也可以引入其它第三方库开发项目；

其他 JS 框架的关联：
借鉴 Angular 的模板和数据绑定技术；
借鉴 React 的组件化和虚拟 DOM 技术；

# 基础学习中使用 Vue

为了在学习过程中得到警告提示，使用开发版本的 Vue.js:

在文档中引入 vue.js ：
```
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
```
1
此处引入的是 cdn 的 Vue 2 开发环境版本。生产环境版本可以替换为 https://cdn.jsdelivr.net/npm/vue@2 （优化尺寸和速度）
安装浏览器拓展 🔗 Vue Devtools (opens new window)
（可选项） 关闭生产环境提示：
```
Vue.config.producitonTip = false;
```
1

🌰 第一个 Vue 页面：

<body>
    <!-- 1. 准备容器 -->
    <div id="app">
        <h1> hello, {{name}}, {{age}}</h1> 
    </div>
    <script>
        Vue.config.producitonTip = false;
        // 创建一个Vue实例
        const x = new Vue({
            el: '#app',
            data: {
                name: 'simon',
                age: '1',
            }   
        });
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

el 指定当前 Vue 实例为哪个容器服务，通常为 CSS 选择器；

data 存储数据；

# 使用 Vue 工作步骤

创建 Vue 实例，传入一个配置对象；
准备一个容器，内可使用特殊的 Vue 语法（如 {{}} 引用数据）；
容器内的代码被称为 Vue 模版；

提示

注意：

一个实例只能为一个容器服务，多个实例不能接管同一个容器 —— 容器与实例一对一；
真实开发中只有一个 Vue 实例，并且会配合着组件一起使用；
{variable} 中的 xx 要写 JavaScript 表达式，且 variable 可以自动读取到 data 中的所有属性；
一旦 data 中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

编辑

📢 上次更新: 2022/09/02, 10:18:16

← 🪝 Vue 3 + TypeScript 项目搭建 🌕 Vue 模版语法→