vue介绍

vue 中文网
Vue.js 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

渐进式的概念

渐进式：逐渐增强，可以在项目中使用vue的一部分功能，也可以使用vue的全家桶来管理整个项目。

框架的概念

我们所说的前端框架与库的区别？

Library

代表：jQuery
库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能

使用库的时候，把库当成工具使用，需要自己控制代码的执行逻辑。

Framework

代表：vue、angular、react
框架，是一套完整的解决方案

使用框架的时候，框架实现了大部分的功能，我们只需要按照框架的规则写代码

库和框架的区别

使用库的时候，很自由，只要调用库提供的各种各样的方法就行，也可以不用其他的一些方法
使用框架的时候，需要按照框架的规则写代码，限制会非常多，但同时框架的功能也很强大，可以极大的提升开发的效率。

MVVM的概念

MVVM，一种软件架构模式，决定了写代码的方式。
- M：model数据模型(ajax获取到的数据)
- V：view视图（页面）
- VM：ViewModel 视图模型

MVVM通过数据双向绑定让数据自动地双向同步 不在需要操作DOM
- V（修改视图） -> M（数据自动同步）
- M（修改数据） -> V（视图自动同步）

Vue中的MVVM

虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例

注意：

1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！

vue初体验

基本使用步骤

安装：npm install vue
引入vue.js文件

<script src="vue.js"></script>

创建Vue实例，指定el和data参数

// 创建vue实例，需要指定el和data属性
const vm = new Vue({
    // 指定vue的模版，值是一个选择器
    el: '#app',
    // 提供了vue中使用的数据
    data: {
        msg: 'hello vue'
    }
})

在模版中显示数据

<div id="app">
    // 通过{{}}可以显示data中的数据
    {{msg}}
</div>

注意事项：

在开发阶段，一定要引入未压缩版的vue.js，因为压缩版的vue.js去除了警告信息和错误提示
el不能是html或者body

插值表达式

插值表达式：{{}}，也叫Mustache语法，小胡子语法，因为长得像胡子

解释：使用{{}}（插值表达式）从data中获取数据，并展示在模板中
说明：{{}}中只能出现JavaScript表达式

<h1>Hello, {{ msg }}.</h1>
<p>{{ isOk ? 'yes': 'no' }}</p>
<p>{{ 1 + 2 }}</p>

注意点：

插值表达式中不能出现语句，比如if / else / for等
插值表达式中访问的数据要在data中存在。
插值表达式不能在属性中使用，只能在标签的内容中使用。

Vue学习第一天：概念入门