Vue-初识vue

前端常用的主流框架有哪些？

Angular: 2009年 Google 71.2K

React: 2013年 Facebook 165k

Vue: 2014年尤雨溪 180k

Vue简介

Vue.js是一个渐进式的(可以使用一部分特性)，可逐步采用的JavaScript框架，用于在Web上构建UI，支持数据双向绑定

我所理解的渐进式框架就是：不用掌握它所有的语法规则也能进行开发

官网： https://cn.vuejs.org/

特点

简单、易用，上手快(HTML+CSS+JS)
灵活(完整的生态）
高效(30k)
个人项目

MVVM开发模式

M:model – data数据

V:view – Html UI界面

VM:viewModel – Vue的实例

Vue的模式是m-v-vm模式，通过modelView作为中间层（即vm的实例），进行双向数据的绑定与变化。

model中的数据改变了，同时反应到view视图中，

view视图中的数据更新了，model中的数据也会同步改变。
实现原理

通过建立虚拟dom树document.createDocumentFragment(),方法创建虚拟dom树。
一旦被监测的数据改变，会通过Object.defineProperty定义的数据拦截，截取到数据的变化。
截取到的数据变化，从而通过订阅——发布者模式，触发Watcher（观察者）,从而改变虚拟dom的中的具体数据。
最后，通过更新虚拟dom的元素值，从而改变最后渲染dom树的值，完成双向绑定。

创建一个Vue的简单程序

引入vuejs

<script src="js/vue.js" charset="utf-8"></script>

创建一个div并设置class或id

<body>
    <div id="app">
        <input v-model="message" /><br/>
        // this就是vue实例
        <p>{
   
   {this.message}}</p>
    </div>
</body>

在body标签下实例化vue实例并与div对象绑定

<script>
    // vue的内部维护了一个虚拟的DOM对象。
    var vm = new Vue({
     
     
        el:"#app", // vue实例绑定了id为app的标签 有class属性也可以用.
        data:{
     
     message:"Hi Vue",count:0}
    })
</script>

运行

猜你喜欢