今天来总结一些我对vue的认识与介绍,可能有时候我们可以不用对一个框架去有很深的认识,就可以去完成我们的工作,但是对于一个框架有基础的理解对我们开发和学习是很有帮助的,让我们很清楚的知道这个框架是做什么的,我们该用来做些什么。
一、渐进式框架Vue
- 什么是渐进式框架
vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
渐进式我个人理解就是阶梯式向前。vue是轻量级的,它有很多独立的功能或库,我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染,我就只用vue的声明渲染,而我们要用他的组件系统,我们可以引用它的组件系统。
vue的渐进式表现为:
声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具
二、Vue中两个核心点
1、响应式数据绑定
当数据发生变化是,vue自动更新视图
Vue2.0的原理是利用了 Object.definedProperty 中的setter/getter 代理数据,监控对数据的操作。(这也是为什么vue不支持ie8 以及更早的ie浏览器的原因)
Vue3.0原理:通过ES6的新特性proxy来劫持数据,当数据改变时发出通知
2、组合的视图组件
- ui页面映射为组件书
- 划分组件可维护、可重用、可测试
三、虚拟DOM
- js的运行速度已经很快了,然而大量的DOM 操作就会变得很慢,但是前端本身就是要通过JS处理DOM 来更新视图数据的。 这样在更新数据后会重新渲染页面,这样就造成在没有改变数据的地方也重新渲染了DOM节点。这样性能方面就会很受影响。
利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM。
当数据发生变化时,能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。vue就是利用了这一点。(vue 渲染组件的步骤图:)
四、MVVM模式
Vue提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲,Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。
具体了解请参考我的上一篇博客:Vue的架构模式
五、Vue的内置指令
1. v-text指令:
- 作用:向其所在的节点中渲染文本内容
- 与插值语法的区别:v-text会替换掉节点中的内容,{
{xx}}则不会
2. v-html指令:
1.作用:向指定节点中渲染包含html结构的内容
2.与插值语法的区别:
- v-html会替换掉节点中所有的内容,{ {xx}}则不会
- v-html可以识别html结构
3.严重注意:v-html有安全性问题!!!
- 在网站上动态渲染任意HTML是非常危险的,容易导致xss攻击
- 一定要在可信的内容上使用v-html,永不要在用户提交的内容上!
3. v-show
v-show
指令根据表达式的真假,显示或隐藏HTML元素。
使用v-show
指令,元素本身是要被渲染的,至于是否显示是通过设置CSS
样式属性display
来控制的,如果表达式的值为false
,则设置样式:"display:none"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>v-show指令</title>
</head>
<body>
<div id="app">
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">NO!</h1>
<h1 v-show="age >= 25">Age: {
{ age }}</h1>
<h1 v-show="name.indexOf('Smith') >= 0">Name: {
{ name }}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
yes: true,
no: false,
age: 28,
name: 'Will Smith'
}
}
}).mount('#app');
</script>
</body>
</html>
渲染结果如下:
4. v-if
v-if
指令根据表达式值得真假来生成或删除一个元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>v-if指令</title>
</head>
<body>
<div id="app">
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">NO!</h1>
<h1 v-if="age >= 25">Age: {
{ age }}</h1>
<h1 v-if="name.indexOf('Smith') >= 0">Name: {
{ name }}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
yes: true,
no: false,
age: 28,
name: 'Will Smith'
}
}
}).mount('#app');
</script>
</body>
</html>
如果v-if需要控制多个元素的创建与删除,可以用<template>
元素包裹这些元素,然后在<template>
元素上使用v-if指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8