Vuejs(1)-基础知识

1.认识Vuejs
1）官网：https://cn.vuejs.org/
2）Vue是一个渐进式的框架，什么是渐进式？
(1)渐进式意味着你可以将Vue作为应用的一部分嵌套其中，带来更加丰富的交互体验。
(2)如果希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
3）Vue特点
(1)解耦视图和数据； (2)可复用的组件； (3)前端路由技术；
(4)状态管理； (5)虚拟DOM
2.Vuejs安装方式
1）直接CDN引入
选择引入开发环境还是生产环境版本
(1)开发环境

(2)生产环境

2）下载和引入
(1)开发环境：https://vuejs.org/js/vue.js
(2)生产环境：https://vuejs.org/js/vue.min.js
3）NPM安装
4.Vuejs初体验
1）创建Vue对象，传入一些options:{}
(1){}中包含el属性：该属性决定了这个Vue对象挂载到哪一个元素上
(2){}中包含data属性：该属性中通常用于存储一些数据
<1>这些数据可以是我们直接定义出来的。
<2>也可以是来自网络，从服务器中加载的。
2）浏览器执行代码的过程

    

        hello {{name}}
    

执行过程：
(1)先执行对应的html的代码
(2)执行到js代码时，创建Vue实例，并且对原html进行解析和修改
3）展示更加复杂的数据：数据列表

    

        
{{item}}
    

html中使用v-for指令，进行遍历

图片.png

5.Vue中的MVVM
1）维基百科解释： https://zh.wikipedia.org/wiki/MVVM
2）计数器的MVVM
（1）View依旧时DOM层
（2）Model就是抽象出来的obj
（3）ViewModel就是我们创建的Vue对象实例
过程：首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示，然后ViewModel通过DOM Listener来监听DOM事件，并且通过methids中的操作，来改变obj中的是数据。

image.png