Vue之初识Vue

前言

如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维, 因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和 数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相 应地更新。

一、Vue简介

1.1 渐进式框架-Vue

vue官网说:Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。 渐进式我个人理解就是阶梯式向前。vue是轻量级的,它有很多独立的功能或库,我们会根据 我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染,我就 只用vue的声明渲染,而我们要用他的组件系统,我们可以引用它的组件系统。 vue的渐进式表现为:

声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具

1.2 Vue两个核心点

1.2.1 响应式数据绑定

  • 当数据发生变化是,vue自动更新视图。
  • 它的原理是利用了 Object.definedProperty 中的setter/getter 代理数据, 监控对数据的操作。(这就是为什么vue不支持ie8 以及更早的ie浏览器的原因) 1.2.2 组合的视图组件
  • ui页面映射为组件书
  • 划分组件可维护、可重用、可测试

1.3 虚拟Dom

js的运行速度已经很快了,然而大量的DOM 操作就会变得很慢,但是前端本身就是要通过 JS处理DOM来更新视图数据的。这样在更新数据后会重新渲染页面,这样就造成在没有 改变数据的地方也重新渲染了DOM节点。这样性能方面就会很受影响。

利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM。 当数据发生变化时,能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。 vue就是利用了这一点。(vue 渲染组件的步骤图:)

二、MVVM模式

我们可能经常听说的有MVC模式和MVVN模式。 angularJS就是所谓的 MVC 模式的框架,model 、view、controller。 而vue 是 MVVM 模式的框架:

  • M: model (数据层,也就是指数据(前端是js))
  • V:view ( 也就是指DOM层 或用户界面 )
  • VM : view-model (处理数据和界面的中间层,也就是指Vue)

三、第一个Vue程序

<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello world!'
        }
    })
</script>
</html>

1)构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个Vue的根实例启动:

var vm = new Vue({
  // 选项
})

2)属性与方法 每个 Vue 实例都会代理其 data 对象里所有的属性:

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。 这些属性与方法都有前缀 $,以便与代理的 data 属性区分。例如:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

3)实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据 观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。 在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的 机会。

<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        beforeCreate: function () {
            console.log("vue beforeCreate......")
        },
        created: function () {
            console.log("vue created......")
        },
        beforeMount: function () {
            console.log("vue beforeMount......")
        },
        mounted: function () {
            console.log("vue mounted......")
        },
        beforeUpdate: function () {
            console.log("vue beforeUpdate......")
        },
        updated: function () {
            console.log("vue updated......")
        },
        beforeDestroy: function () {
            console.log("vue beforeDestroy......")
        },
        destroyed: function () {
            console.log("vue destroyed......")
        }
    })
</script>

</html>

结果:

vue beforeCreate......
vue created......
vue beforeMount......
vue mounted......

谷歌浏览器控制台输入 app.message = 11111
vue beforeUpdate......
vue updated......

app.$destroy()
vue beforeDestroy......
vue destroyed......
undefined

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏惶心 - 技术博客

Grouper.html: 分享群组的最佳方式

之前看到 狗子 的 https://getrbq.com ,是给 DIYgod 的群组做的一个加群页面,发现他是用 折影轻梦 的模板修改了一下做好的。虽然说这个...

19060
来自专栏DeveWork

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Fi...

39150
来自专栏小狼的世界

Vimperator的有用操作

可以有一个变通的办法复制,先按下"Ctrl+V",然后再用快捷键复制,接下来Vim的快捷键又起作用了。现在还有一个困惑的地方是不用鼠标,如何选中网页中自己希望的...

10430
来自专栏张戈的专栏

一行代码彻底禁用WordPress缩略图自动裁剪功能

记得在博客分享七牛缩略图教程的时候,提到过 WordPress 默认会将上传的图片裁剪成多个,不但占用磁盘空间,也会拖慢网站性能,相当闹心! 当时也提到了解决办...

41260
来自专栏前端小叙

推荐两款简单好用的图片放大jquery插件

一、zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件 引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zo...

82590
来自专栏从零开始学自动化测试

Selenium+python自动化83-chrome手机wap模式

一、前言 这里是群里(QQ群:226296743)风神出60大洋悬赏的问题,学会这篇就是赚了60大洋了! 我的环境: - chrome 62 - chrome...

49440
来自专栏谦谦君子修罗刀

RN项目第一节

一、项目说明 本项目为模仿美团的项目,采用的是网上提供的API接口。导航采用 公司推荐的react-navigation,滚动条采用第三方组件react-na...

36660
来自专栏mathor

matlab—图形界面(GUI)程序设计

matlab也能做应用程序,类似于c++的mfc,这点我也是才知道,大吃一惊,原来现在可视化编程应用如此广泛,连matlab都可以,接下来我就会讲解如何通过ma...

39220
来自专栏全栈之路

vue项目引入markdown

git地址:https://github.com/showdownjs/showdown 其实引入markdown挺简单的:

88110
来自专栏向治洪

用xml来编写动画

我们可以使用代码来编写所有的动画功能,这也是最常用的一种做法。不过,过去的补间动画除了使用代码编写之外也是可以使用XML编写的,因此属性动画也提供了这一功能,...

22750

扫码关注云+社区

领取腾讯云代金券