2019-06-27 vue之入门

2019-06-27 本文已影响0人果冻_4c9b

Vue简介

Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架
2016年最火的前端框架当属Vue.js了，很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。授予了这么高的评价的vue.js，也是开源世界华人的骄傲，因为它的作者是位中国人–尤雨溪（Evan You）

为什么使用Vue

企业为了提高开发效率：在企业中，时间就是金钱
提高开发效率的发展历程：原生js→Jquery之类的类库→前端模板引擎→Vue.js 、Angular.js、React.js
在Vue中，一个核心的概念，就是让用户减少操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑
增强个人竞争力，人无我有，人有我优

框架和库的区别

框架：是一套完整的解决方案，对项目的入侵性较大，项目如果需要替换框架，则需要重新架构整个项目
库（插件）：提供某一个小功能，对项目入侵性小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求

MVVM

MVVM的发展历程
MVVM是Model-View-ViewModel的缩写，最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离；而把Model和View关联起来的就是ViewModel，ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

入门程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <!-- v-model只能绑定表单控件  实现双向绑定-->
        <!-- vue指令 v-xxxx -->
        <input type="text" v-model="msg">
    </div>
    <!-- 引入vue.js -->
    <script src="js/vue.js"></script>
    <script>
    // 2使用vue
        //2.1创建vue的实例---MVVM中的VM viewmodel 
        var vm = new Vue({
            el: '#app',//挂载元素，当前扶额控制的区域
            data: {//当前vue实例的数据，mvvm中的M
                msg: 'hello Vue!!!'
            },

        })
    </script>
</body>
</html>