前言:本文带大家初步认识Vue.js框架,为什么使用vue 和几个简单的指令。第一次写学习笔记,掘友们,如果文章有哪些错的地方提醒我一下,万分感谢!
什么是Vue
Vue 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。响应式的更新机制:数据改变之后,视图会自动刷新。
MVVM模式
- Model:负责数据存储(包含了业务和验证逻辑的数据模型)
- View:负责页面展示,布局和外观
- View Model:负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示(调度者)
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统(声明式渲染)
什么是虚拟 DOM
虚拟 DOM
(Virtual-DOM) 不会立即操作 DOM
,而是等一系列更新DOM操作完成,一次性插入到html里去,再进行后续操作,避免大量无谓的计算量。所以,用 JS
对象模拟 DOM
节点的好处是,页面的更新可以先全部反映在 JS
对象(虚拟 DOM
)上,操作内存中的 JS
对象的速度显然要更快,等更新完成后,再将最终的 JS
对象映射成真实的 DOM
,交由浏览器去绘制。
Vue1.0没有虚拟DOM,Vue2.0改成了基于虚拟DOM。
- 优点:减少DOM操作,提高性能。
a. 小, 遍历快!
b. 只更新受影响的元素,效率高!
c. 封装了DOM操作,无需我们程序员重复编码!
什么是组件开发
它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。
<div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div>
模块化和组件化的区别
- 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一
- 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用
- 复用性
为什么我们要使用 Vue
- 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十 kb;
- 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;
- 双向数据绑定:保留了 angular 的特点,在数据操作方面更为简单;
- 组件化:保留了 react 的优点,实现了 html 的封装和重用,在构建单页面应用方面有着独特的优势;
- 视图,数据,结构分离:
- 使数据的更改更为简单;
- 不需要进行逻辑代码的修改;
- 只需要操作数据就能完成相关操作;
- 虚拟 DOM:
- dom 操作是非常耗费性能的;
- 不再使用原生的 dom 操作节点;
- 极大解放 dom 操作;
- 但具体操作的还是 dom:
- 不过是换了另一种方式;
- 运行速度更快:
- 相比较与 react 而言:
- 同样是操作虚拟 dom:
- 就性能而言,vue 存在很大的优势;
- 同样是操作虚拟 dom:
- 相比较与 react 而言:
如何使用 Vue
Vue的环境搭建
常见的插件
- Webpack:代码模块化构建打包工具。
- Gulp:基于流的自动化构建工具。
- Babel:使用最新的 规范来编写 js。
- Vue:构建数据驱动的Web界面的渐进式框架
- Express:基于 Node.js 平台,快速、开放、极简的 Web 开发框架。
以上这些包,都可以通过 NPM 这个包管理工具来安装。
create a hello world
在html 文件引入vue.js文件
<script src="https://www.geekschool.org/wp-content/uploads/2021/01/1610194825.7689612.jpg"></script> <div id ="app"> {{message}} </div>
// 左手el,右手data,完成绑定 var app = new Vue({ el: '#app', data:{ message:"Hello Vue!" } }) //Hello Vue!
看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。
系统指令
什么是指令?
指令 (Directives) 是带有 v-
前缀的特殊 attribute。为HTML 添加或改变功能的属性
插值表达式{{}}
数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值。给HTML中添加变量功能例如:
<span>Message: {{ msg }}</span>
{{}}中可以放什么,不能放什么
- 可以放: 变量,表达式,函数调用,创建对象,访问数组元素,三目
- 不能放: 程序结构(分支和循环),没有返回值的函数调用
v-bind–属性绑定
v-bind
attribute 被称为指令。将数据绑定到指定的属性上,
写法:
<div v-bind:参数=“值/表达式></div>
。v-bind
的缩写为::
v-on–事件监听
为了让用户和你的应用进行交互,我们可以用 v-on
(简写:@
)指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法:
<div id="app-5"> <p>{{message}}</p> <button v-on:click="reverseMessage">反转消息</button> </div>
var app5= new Vue({ el:'#app-5', data:{ message:'Hello Vue.js' }, methods:{ reverseMessage:function(){ this.message=this.message.split('').reverse().join('') } } })
v-model
v-if — v-show
v-if 每次都会重新删除或创建元素,有较高的切换性能消耗
v-show每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式。有较高的初始渲染消耗
如果元素涉及到频繁的切换,最好不要使用 v-if,而是使用 v-show
如果元素可能永远也不会显示出来被用户看到,则推荐 v-if
v-for
作用:根据数组中的元素遍历指定模板内容生成内容。
<body> <div id="app"> <ul> <!-- 使用v-for对多个li进行遍历赋值 --> <li v-for="item in list">{{item}}</li> </ul> </div> </body> <script> var vm = new Vue({ el: '#app', data: { list: [1, 2, 3] } }); </script>
// 显示结果
- 1
- 2
- 3
创建一个简单的商品数量管理器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://www.geekschool.org/wp-content/uploads/2021/01/1610194825.7689612.jpg"></script> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="product in doubleCount" :key="product.id"> {{product.name}} -- {{product.count}} <span v-show="product.count === 0"> 卖没拉</span> <button @click="product.count++">add</button> <input type="text" v-model.number="product.count" /> double:<span>{{product.double}}</span> </li> </ul> 总数: {{totalCount}} </div> <script> app = new Vue({ el: "#app", data: { products: [ { id: 1, count: 2, name: "苹果", }, { id: 2, count: 3, name: "香蕉", }, { id: 3, count: 5, name: "桃子", }, ], }, computed: { totalCount() { // js return this.products.reduce((total, item) => { return total + item.count; }, 0); }, doubleCount() { let tempArr = []; this.products.forEach((element) => { element["double"] = (element.count - 0) * 2; }); tempArr = this.products; return tempArr; }, }, }); </script> </body> </html>