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
Vue之初识Vue的更多相关文章
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- 初识vue小结
初识vue 大家都那么热爱他一定有原因,我也特想了解. 我来咯, 首先用vue开发版,用一个标签在head中插入,script标签src属性引入vue文件,就像jquey一样在script,但是放在h ...
- 第1章-初识Vue.js
一.初识Vue 1.1.本次我们学习的内容 常用指令:vue中最基础的内容 交互: 网络请求 组件: 是vue.js 这个框架 最核心,最精华的内容,因为vue呐,它在所有的框架中是把组件化做到了极致 ...
- Vue框架初识01
摘要 vue简介 vue使用 一.Vue简介: 简介: Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 A ...
- Vue.js——1.初识Vue
初识Vue.js 1. 什么是Vue.js Vue.js是前端主流框架之一,现在看招聘几乎都要求会vue 好像成了前端的代名词. Vue.js是构建界面 只关注视图层V,也就是页面的, 2. 为什么要 ...
- 初识Vue.js
一 ,什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧 ...
- 六、VueJs 填坑日记之初识*.Vue文件
上一篇博文中,我们将接口的地址通过webpack代理到了本地,解决了跨域的问题.在之前的文章中,我们一直对项目进行配置,并没有真正的切入正题,可能很多人还不明白我们要做什么?那么今天,我们就要开写代码 ...
- Vue学习笔记一:初识Vue
目录 什么是Vue? 为什么要学习前端框架? MVC,MVP 和 MVVM 最简单的入门小案例 下载Vue.js 新建文件结构 写一个html 运行 可笑的小报错 Vue和MVVM 什么是Vue? V ...
- 初识Vue
Vue.js介绍 Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另 ...
随机推荐
- ES6 原始类型 Symbol
1. 创建Symbol (没有字面格式) Symbol是原始值,没有构造函数 Symbol接受一个可选参数,可以让你添加一段文本描述即将创建的Symbol,这段描述不可用于属性访问,以便于代码阅读和调 ...
- js计算总页数
前端js取余是a%b 取除数parseInt(a / b) /** * 总页数@param(总条数,每页总条数) */ function pageTotal(rowCount, pageSize) { ...
- echarts动态添加数据
数据异步加载 EChart中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行. 绑定数据的方式有两种,一 ...
- poj3253 Fence Repair(贪心+哈夫曼 经典)
https://vjudge.net/problem/POJ-3253 很经典的题,运用哈夫曼思想,想想很有道理!! 具体实现还是有点绕人,最后被long long卡了一下,看数据大小的时候单纯相乘了 ...
- webview 向右滑动关闭时,怎么禁止此 webview 上下滚动?
webview 向右滑动关闭时,怎么禁止此 webview 上下滚动?
- SpringBoot无废话入门02:SpringBoot启动分析
1.核心注解 在上文中,我们讲到了@SpringBootApplication是SpringBoot的核心注解. 可以很方便的在idea中下载源码来查看该注解的源码,如下: 可以看到,该注解本身又被其 ...
- GBK转UTF8
shell 脚本自动GBK转UTF8 for i in `find . -name "*.java"`; do iconv -f gbk -t utf-8 $i > $i.n ...
- 转:基于Jmeter的MQTT测试插件
基于Jmeter的MQTT测试插件-上 1. Jmeter插件简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具.下载 用于对软件做压力测试,它最初被设计用于Web应用 ...
- iostat各字段的来源和真实含义
The primary tool for inspecting Linux disk performance is iostat. The output includes many important ...
- R语言︱处理缺失数据&&异常值检验、离群点分析、异常值处理
在数据挖掘的过程中,数据预处理占到了整个过程的60% 脏数据:指一般不符合要求,以及不能直接进行相应分析的数据 脏数据包括:缺失值.异常值.不一致的值.重复数据及含有特殊符号(如#.¥.*)的数据 数 ...