基础系列（一）初识 - 简单使用 - 创建Vue对象 - 双向数据绑定 - 显示数据 - MVVM模式

0. 基本认识

渐进式 JavaScript 框架，用来动态构建用户界面

https://cn.vuejs.org/

0.1 特点

遵循 MVVM 模式

编码简洁，体积小，运行效率高，适合 移动/PC 端开发

它本身只关注 UI，可以轻松引入 vue 插件或其它第三方库开发项目

采用组件化模式，提高代码复用率、且让代码更好维护

声明式编码，让编码人员无需直接操作DOM，提高开发效率

使用虚拟DOM和Diff算法，尽量复用DOM节点

0.2 与其他前端 JS 框架的关联

借鉴 angular 的 模板 和 数据绑定 技术

借鉴 react 的 组件化 和 虚拟DOM 技术

0.3 Vue 扩展插件

vue-cli：vue 脚手架

vue-resource(axios)：ajax 请求

vue-router：路由

vuex：状态管理（它是 vue 的插件但是没有用 vue-xxx 的命名规则）

vue-lazyload：图片懒加载

vue-scroller：页面滑动相关

mint-ui：基于 vue 的 UI 组件库（移动端）

element-ui：基于 vue 的 UI 组件库（PC 端）

1. 引入Vue.js

本地引入

CDN引入

2. 创建Vue对象

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

root容器里的代码被称为【Vue模板】；

Vue实例和容器是一一对应的；

真实开发中只有一个Vue实例，并且会配合着组件一起使用；

{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；

一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

//创建Vue实例

new Vue({
    el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
    data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
        name:'YK菌',
        address:'合肥'
    }
})

注意区分：js表达式 和 js代码(语句)

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

(1). a

(2). a+b

(3). demo(1)

(4). x === y ? 'a' : 'b'

js代码(语句)

(1). if(){}

(2). for(){}