3/6 Vue.js

1.Vue.js是什么

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js入门教程
前端三大马车： 1.Vue 2. Angular 3. React

Vue.js的特性：

1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化

2.MVX框架模式

MVX框架模式：MVC+MVP+MVVM

1.MVC：Model(模型)+View(视图)+controller(控制器)，主要是基于分层的目的，让彼此的职责分开。
View通过Controller来和Model联系，Controller是View和Model的协调者，View和Model不直接联系，基本联系都是单向的。
用户User通过控制器Controller来操作模板Model从而达到视图View的变化。

2.MVP：是从MVC模式演变而来的，都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。
在MVP中，Presenter完全把View和Model进行了分离，主要的程序逻辑在Presenter里实现。
并且，Presenter和View是没有直接关联的，是通过定义好的接口进行交互，从而使得在变更View的时候可以保持Presenter不变。
MVP模式的框架：Riot,js。

3.MVVM：MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。
View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。
这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。
MVVM模式的框架有：AngularJS+Vue.js和Knockout+Ember.js后两种知名度较低以及是早起的框架模式。

3.Vue.js起步练习

通过引入CDN后直接使用或者下载后使用（较为简单）
使用命令行工具CLI搭建脚手架去编写对应的内容
页面起步步骤：
1.引入图中的script代码，将Vue.js引入到我们的项目中并可以使用

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

4、通过以下代码体验Vue.js最核心的功能-数据的双向绑定

Vue的核心特性之一是双向的数据绑定,关于如何进行数据的绑定下面来介绍一下

image

5、使用v-bind绑定data中的属性

image.png

6、练习

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-model </title>
        <!-- 通过CDN引入Vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            
            <img :src="avatar">
            <a v-bind:href="url">{{website}}</a>
            <p>{{name}}</p>
        </div>
        <script type="text/javascript">
            //实例化一个对象
            var app = new Vue({
                el: '#app',
                data: {
                    name:'日本辰巳出版株式会社 ',
                    website:'料理的1000个魔法',
                    url:'https://book.douban.com/subject/30434531/',
                    avatar:'https://img1.doubanio.com/view/subject/l/public/s29979849.jpg'
                }
            })
        </script>
    </body>
</html>