美文网首页
2019-06-27 vue之入门

2019-06-27 vue之入门

作者: 果冻_4c9b | 来源:发表于2019-06-27 16:14 被阅读0次

    VSCode之vue的插件下载

    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关联起来的就是ViewModelViewModel负责把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>
    

    相关文章

      网友评论

          本文标题:2019-06-27 vue之入门

          本文链接:https://www.haomeiwen.com/subject/qxprcctx.html