安装Vue.js和体验Vuejs

什么是Vuejs

• Vue (读音 /vjuː/，类似于 view) 是一个渐进式的框架

渐进式就是将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。

• 学习Vue开发，需要具备一定的HTML、CSS、JavaScript基础。

---

Vue.js的安装

• 方式一：直接CDN引入
  你可以选择引入开发环境版本还是生产环境版本

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

• 方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js

• 方式三：NPM安装
  后续通过webpack和CLI的使用，我们使用该方式。

---

Vuejs的体验

Hello VueJS

先阅读下面的代码

<div id = "app">{{value}}</div>

<script src = "./js/vue.js"></script>
<script>
const app = new Vue({
  el:"#app",
  data:{
    value:"Hello VueJS"
  }
 })
</script>

观察代码，我们会发现：

创建Vue对象的时候，传入了对象
对象中包含的el属性：决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
对象中包含的data属性：该属性中通常会存储一些数据，这些数据可以是我们直接定义出来的，也可以是来自网络，从服务器加载的。
再观察div中的 {{value}} 明显就是对象data中的value互相绑定，并且是响应式的

• 这个options中可以包含哪些选项呢？
  详细解析:点击这里

• 目前掌握这些选项：

el:
类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。
data:
类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。
methods:
类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

Vue列表显示

假设我们从服务器请求到数据：一个对象，如果我们像上面那样写，结果是？

    <div id="app">{{student}}</div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                student:{
                    1001:"张三",
                    1002:"李四",
                    1003:"王五",
                }
            }
        })
    </script>

这明显不是我们想看到的

那怎样将对象显示在我们的页面上呢？
我们将html部分改为以下:

<div id="app">
        <ul>
            <li v-for = "(value,key) in student">{{key}} - {{value}}</li>
        </ul>
    </div>

此时，页面显示为

• HTML代码中，使用了v-for指令
  该指令我们后面会详细讲解，这里先学会使用
  再控制台中更改如下:

  
  

也就是说，当我们对象中的数据发生改变时，界面会自动改变。是不是很方便呢

Vue中的MVVM

• 什么是MVVM:
  维基百科的官方解释:https://zh.wikipedia.org/wiki/MVVM
• View层(视图层)：

在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。

• Model层(数据层)：

数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。

• VueModel层(视图模型层)：

视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

【扩展】Vue的生命周期

END