西安市创新人才研究院互联网服务平台
新闻详情

Vue前端框架

发表时间:2019-10-20 14:01作者:Web网站设计

一、Vue的介绍

1.什么是Vue

    vue.js是一款受广大程序员青睐的前端JavaScript框架

    三大前端框架:react/angular/Vue

库和框架的区别:

    库:

        库是是工具,提供大量API,体现了封装的思想、需要自己调用这些API

    例如:JQuery,animate.css

框架:

    框架提供了一套完整解决方案,使用者要按照框架所规定的某种规范进行开发

    例如:vue.js,bootstrap

2.为什么要学习Vue

    传统开发模式: JQuery+RequireJS/SeaJS+artTemplate+Gulp/Grunt

   随着项目业务场景的复杂,传统模式已无法满足需求,就出现了Angular/React/Vue等框架

    为何如此青睐:

        企业需求

        主流框架之一

        易用、灵活、高效

3.Vue 能做什么

   最大程度上解放了 DOM 操作

    单页web项目(SinglePageApplication项目,例如Worktile官网)开发

    传统网站开发

4.核心特性

  • 双向数据绑定

    • vue(借鉴了react的虚拟DOM,借鉴了angular双向数据绑定)

  • 通过 指令 扩展了 HTML,通过 表达式 绑定数据到 HTML

  • 解耦视图与数据

  • 可复用组件

  • 虚拟DOM

  • M-V-VM

  • 数据驱动视图

可以参考

    Vue官方文档

    Vue开源项目汇总

    Vue.js中文社区

二、如何安装Vue

1.直接下载源码然后通过路径引入

    开发版本:https://vuejs.org/js/vue.js

    生产版本:https://vuejs.org/js/vue.min.js

2.CDN引用


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

3.使用 npm 下载(默认安装最新稳定版) 然后通过路径引入



npminit -ynpmi vue

注意:Vue.js 不支持 IE8 及其以下版本

三、如何将Vue运用到HTML中

1.简单使用Vue

    基本步骤       

        1). 在body中,设置Vue管理的视图<div id="app"></div>

        2). 引入vue.js

        3). 实例化Vue对象 new Vue();

        4). 设置Vue实例的选项:如el、data...     new Vue({选项:值});

        5). 在<div id='app'></div>中通过{{ }}使用data中的数据
















<!-- 我是Vue所管理的视图div#app --><divid="app"><!-- 在视图里使用Vue实例中data里面的list数据 --><p>{{list}}</p></div><!-- 引入vue.js --><scriptsrc="./vue.js"></script><script>new Vue({el: '#app',data: {list: '我是模拟发起ajax请求后从服务端返回的数据'        }    })</script>

2.Vue实例的选项

el

  • 作用:当前Vue实例所管理的html视图

  • 值:通常是id选择器(或者是一个 HTMLElement 实例)

  • 不要让el所管理的视图是html或者body!

data

  • Vue 实例的数据对象,是响应式数据(数据驱动视图)

  • 可以通过 vm.$data 访问原始数据对象

  • Vue 实例也代理了 data 对象上所有的属性,因此访问 vm.a 等价于访问 vm.$data.a

  • 视图中绑定的数据必须显式的初始化到 data 中

methods

  • 其值为可以一个对象

  • 可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。

  • 方法中的 this 自动绑定为 Vue 实例。

  • 注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined

代码演示:
















































<divid="a">    {{msgA}} -- {{fn1()}}</div>

<scriptsrc="./vue.js"></script><script>const vm = new Vue({// el作用:指定当前Vue实例所管理的视图,值通常是id选择器// 1. el的值可以是css选择器,通常是id选择器// 2. el的值不能是html标签和body标签

        el: '#a',// data作用:指定当前Vue实例的数据对象// 1. data中的数据是响应式数据// 2. 值可以是一个对象 {属性: 值}// 3. 所有数据部分写在data中// 4. 在当前Vue实例所管理的视图中通过属性名使用data中的数据// 5. 可以通过vm.$data.属性 访问数据// 6. 可以通过vm.属性 访问数据(更简单)        data: {msgA: '第一个Vue实例对象'        },// methods作用:指定当前Vue实例中的方法// 1. 可以直接通过vm实例访问这些方法,// 2. 方法中的 this 自动绑定为 Vue 实例。// 3. 不推荐使用箭头函数        methods: {fn1: function() {console.log(this.msgA);console.log('vm实例中的methods里的fn1方法被调用');            },fn2: function() {this.fn1();console.log('fn2方法被调用--');            },fn3: () => {console.log(this);            }        }    });// 调用fn2方法    vm.fn2();// 调用fn3方法    vm.fn3();</script>

最基础的三个Vue实例,也是最常用的,Vue可不止这三个实例

免责声明:以上内容为本网站转自其它媒体,相关信息仅为传递更多信息之目的。文章仅代表作者个人观点,不代表西安市创新人才研究院立场。


分享到:
——————————————————————————————————————————————————————
18682935813
675705873@qq.com
陕西省西安市莱安中心T2-16楼
——————————————————————————————————————————————————————