码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 初体验

时间:2020-03-04 12:40:03      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:框架   自我   实例   script   core   下载   基于   mode   http   

Vue.js

认识 Vue(读音 /vju?/,类似于?view)

  • Vue是一个渐进式JavaScript 框架
  • Vue全家桶: Core+Vue-router+Vuex

Vue有很多特点和Web开发中常见的高级功能

  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟DOM

框架和库的区别

库是将代码聚合成一个产品,供开发者去使用,开发者去调用库中的方法去实现自己的功能。如jQuery,zepto

框架是为了解决一类问题而开发出来的产品,基于自身的特点向用户提供一套完整的解决方案。如vue,react

安装Vue

方式一:直接CDN引入

你可以选择引入开发环境版本还是生产环境版本

方式二:下载和引入

方式三:NPM安装

后续通过webpack和CLI的使用,我们使用该方式

第一个 Vue 实例

<div id='app'>
    {{ message }}
</div>
const app = new Vue({
    el: '#app',    //挂载点
    data: {    //数据
        message: 'Hello Vuejs'
  },
  mounted() {    
      setTimeout(() => {
          this.message = 'hello landuo'
      },2000)
  }
})

el属性

该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到了id为app的元素上

data属性

该属性中通常会存储一些数据

  • 这些数据可以是我们直接定义出来的,比如像上面这样。
  • 也可能是来自网络,从服务器加载的。

Vue的MVVM

技术图片

View层:视图层

  • 在我们前端开发中,通常就是DOM层。
  • 主要的作用是给用户展示各种信息。

Model层:数据层

  • 数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。

VueModel层:视图模型层

  • 视图模型层是View和Model沟通的桥梁。
  • 一方面它实现了Data Binding,也就是数据绑定,将Model的改变实时的反应到View中
  • 另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改- 变对应的Data。

Vue的生命周期

技术图片

Vue 初体验

标签:框架   自我   实例   script   core   下载   基于   mode   http   

原文地址:https://www.cnblogs.com/landuo629/p/12408591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!