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)开发环境
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
(2)生产环境
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
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）浏览器执行代码的过程

<div id="app">
    <h1>
        hello {{name}}
    </h1>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
       el:'#app',//用于挂载要管理的元素
       data:{ //定义数据
           message:'你好，李银河！',
           name:'Jose'
       }
    })
</script>

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

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好！',
            movies:['海贼王','火影','盗墓笔记']
        }
    })
</script>

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